Design system  /  Components  /  RotatingCards

RotatingCards — scroll-pinned stacked cards.

Cards stick to the top of the viewport as you scroll past, the next card slides up to cover it. Reference: honeycomb.io home "What Honeycomb helps you do". Each card carries a tone (mint, lavender, terracotta, forest, coral, workspace), a coloured-panel image-side with a hex backdrop, and a white text-side. Scroll the page below.

What Conduction helps you do

Six things, in two minutes.

Each card pins as you reach it; the next card slides up to cover it. No timer, no carousel.

Catalogue

Publish a public catalogue.

OpenCatalogi makes every register, dataset, and API in your organisation searchable from one URL. Federation to data.overheid.nl ships in the box.

See OpenCatalogi
Anonymise

Anonymise documents at scale.

DocuDesk strips names, BSNs, and case numbers from inbound documents before they reach the case file. Woo-ready, GDPR-grade, audit-logged.

See DocuDesk
Connect

Pipe data without writing glue.

OpenConnector pulls from REST, SOAP, GraphQL, file drops, message queues. Pipe it into typed registers, observe every run, retry the failures.

See OpenConnector
Decide

Run meetings, ship decisions.

DeciDesk owns minutes, motions, and action items. Every decision links back to its source register row, every action item lands in the assignee's queue.

See DeciDesk
Process

Track cases end to end.

Procest runs ZGW-shaped case management. Stages, roles, dossiers, archive. Every step is auditable, every status pings the citizen-facing portal.

See Procest
Dashboard

Build dashboards from your own data.

MyDash assembles a personal home from the registers your team already keeps. Pinned apps, recent records, overdue items. No extra BI tool, no extra login.

See MyDash

The component is <RotatingCards eyebrow title cards=[{tone, eyebrow, title, summary, cta, panel}] />. Each card pins via position: sticky with a 24px top-stagger, so card N+1 lands lower than card N when both are pinned. The image-side uses <HexBackground tone="tone-100" position="top" size="lg" density={2} /> behind the AppMock so two corners of a hex crest the panel.