You're in the Library

Card

A flat plate with a hairline edge that groups related content: a release, a component summary, a settings section. It does not cast a shadow unless the whole card is one link.
Stable
Edit

Preview appears after the next Storybook update.

Card example
<Card />
Rendered with the real componentFrom the code
Light
Dark

When to use

Use it for

  • A self-contained unit the user scans or compares: a release, a component, a token group, an owner.
  • interactive when the whole card goes to one place (a component page): mark its title link with data-card-primary.
  • padding none for a full-bleed Table or media inside the card; compact in dense dashboards.

Not for

  • As the page structure: rows of identical cards are a lazy layout. Use headings, lists and tables first.
  • Inside another card: nested plates blur hierarchy. Use a Divider or a heading.
  • Floating content (menus, popovers): those are overlays with elevation, not cards.

Do and don't

Every example is rendered with the real component, so it always matches what ships.

Owners
Design: Florian G. Tech: platform team.
Do

One primary action in the footer

The footer is for the decision; secondary actions step down to ghost.

No changes.
Don't

A card around a single sentence

A box with one line adds noise. Let the text sit on the page.

Accessibility

  • A card is a plain div. Pass aria-labelledby pointing at its title when it should be a navigable group.
  • Interactive cards keep a real link (data-card-primary) whose text names the destination; its click area is stretched over the card and its focus ring moves to the card edge.
  • Other buttons inside an interactive card stay on top and remain separately focusable.
  • The hover lift is skipped when the user prefers reduced motion.

Content guidelines

  • Titles are short nouns in sentence case: "Release 1.4.0", "Color tokens".
  • Body text in one or two sentences; numbers as digits.

From the code Generated from the component, not editable here.

Anatomy and tokens

Read from packages/react/src/components/Card/Card.module.css at build time. Every value is a token: open one to see its alias chain in both themes.

26 tokens13 semantic or component, change with theme and brand1 density, change with comfortable or compact12 from the shared scales

Motion and interaction

Card has motion in code that this page cannot list yet: try it in the preview.

With reduced motion turned on, its changes happen at once.

From the code Generated from the component, not editable here.

Props

Parsed from the TypeScript types in packages/react/src/components/Card/Card.tsx, so this table cannot drift from the code. It also accepts every native <div> attribute.

PropTypeDefaultDescription
interactivebooleanfalseThe whole card is one link or action: it lifts on hover, and the element marked `data-card-primary` (a link or button whose text names the destination, usually the title) covers the card and moves its focus ring to the card. Other buttons inside stay clickable on top.
padding'none' | 'compact' | 'default''default'Inner spacing of header, body and footer. `none` for full-bleed tables and media. Default `default`.

Playground

Change the props and see the real Card update. Controls are generated from the TypeScript props; nothing here changes the system.

Code for these props
<Card />

padding

Workbench

For contributors: every state with the accessibility panel, in the component workbench (Storybook). The stories double as visual test fixtures; the guidance on this page is the user documentation (open Card in Storybook).

Embed Storybook stories here (3)

Loads from https://bridge-storybook.floriangouloubi.com (set STORYBOOK_URL at build time). If Storybook is not running, the frames stay empty.

Default

Interactive

AllStates

From the code Generated from the component, not editable here.

Changelog

  • New

    Component specs describe swappable parts: swap on icon parts (default icon from the docs preview or the AllStates story) and on full-bleed compound content (Card body: text or media slot), slots per variant, and file-level icons (normalized Lucide SVGs read from lucide-react), iconStyle and slots sections

    v1.0.0, Nov 11, 2026

  • New

    Data display: Card restyled as a flat plate with an interactive option and padding sizes; Badge gains appearance (subtle, now the default, or solid), a dot, icons and sizes (existing solid badges must pass appearance="solid" to keep their look); new Avatar and AvatarGroup, Table (sortable headers with aria-sort, selectable rows, sticky header, focusable scroll region, useTableSort), Accordion, Tag (removable, toggleable), Divider and Kbd

    v1.0.0, Nov 11, 2026

  • New

    Initial foundation: DTCG 2025.10 primitives and light/dark semantic tokens built to CSS variables, plus Button, Input, Badge and Card consuming tokens only

    v1.0.0, Nov 11, 2026

  • New

    Studio: on an exploration page, "What this changes in the library" shows a component several screens change differently as one card: today and each designer's way side by side as small cards, a ring on the way kept

    v1.0.0, Nov 11, 2026

  • Fix

    Add usage guidance files for Button, Input, Badge and Card, plus the list of color pairs to check for contrast

    v1.0.0, Nov 11, 2026

  • Fix

    Adds the generated component-specs.json (run npm run specs) for Button, IconButton, Badge, Tag, Input and Card, read by the DS Bridge Figma plugin to pull them as component sets

    v1.0.0, Nov 11, 2026

  • Fix

    Library block: a new piece keeps Ask for changes and Use an existing piece behind its ⋯; Choose Card padding lands on the piece still waiting

    v1.0.0, Nov 11, 2026

  • Fix

    Exploration page: when a library piece is still open, the lead's primary reads "Choose Card padding" and takes them to the choice, instead of a disabled Send to the developers

    v1.0.0, Nov 11, 2026

  • Fix

    Studio polish: the lead's zone asks the library question first (1 of 2); Library review says its count in words, drops the shortcut hints and the shared-decision line, and shows the list and the piece as two cards with each piece in its own card and a list that scrolls on its own; the home's Oldest tag and the folder tiles' Captured tag keep their size and edge

    v1.0.0, Nov 11, 2026

  • Fix

    The product manager's zone follows their answer at once, and the preview's main action never cuts its words on a narrow card

    v1.0.0, Nov 11, 2026

  • Fix

    A product page card names the person its exploration names, like the Home and the exploration page, not the account that opened it

    v1.0.0, Nov 11, 2026

  • Fix

    Product page, new and empty: "Nothing explored here yet." with the Start an exploration card (the library's empty state, the product preselected), and for admins only, while the product has no previews, "One step before the first preview"

    v1.0.0, Nov 11, 2026

  • Fix

    Studio Home, when nothing needs you: the harbor scene is back behind "What do you want to explore?", with the Start card still the one action under it

    v1.0.0, Nov 11, 2026

  • Fix

    A designer's exploration opened by Bridge's app (email members, and designers who write through Bridge) shows on the Home again: in "Your explorations" with its task stage, in the greeting's count, and in the product card's count

    v1.0.0, Nov 11, 2026

  • Fix

    Home: the whole Start an exploration card opens the start flow, and its title and line read as one block beside the drawing

    v1.0.0, Nov 11, 2026

  • Fix

    Studio Home: an exploration handed to developers reads "Waiting for code" on its card even when its exploration label could not be removed

    v1.0.0, Nov 11, 2026

  • Fix

    Studio Home: an exploration card's preview runs edge to edge under the card's border, so its top edges no longer look twice as thick

    v1.0.0, Nov 11, 2026

  • Fix

    The signed-out (read-only) Studio home now says what a running exploration's page says on its card, "Not started" or "Exploring", like the signed-in home, instead of always "Exploring"

    v1.0.0, Nov 11, 2026

  • Fix

    Homepage closing: the profile card the walkers carry is now a DS Card with a DS Avatar and a full-width "Connect on LinkedIn" button

    v1.0.0, Nov 11, 2026

  • Fix

    Homepage: the step sections' drawing panels sit on a white card (the raised surface, neutral 800 in dark) with the emphasis hairline and the card elevation, instead of a grey fill

    v1.0.0, Nov 11, 2026

  • Fix

    Studio home: the Create branch card comes first in Your branches

    v1.0.0, Nov 11, 2026

  • Fix

    Studio Overview: the greeting drawing grows with the space beside the to-do list and sits on its vertical middle, so the card stays balanced from 1100 px to wide monitors

    v1.0.0, Nov 11, 2026

  • Fix

    Studio Settings is redesigned as a settings page: each section is a band with its title and one sentence on the left and its rows in a card on the right, values next to their labels, and the page stops at 1200px

    v1.0.0, Nov 11, 2026

  • Fix

    Settings, once connected, is one card: the design system by its name and how this computer is connected, with a few actions. - Signed in with Bridge: "Connected with Bridge as <name>", with Open in Studio, Switch design system (reopens the team pick in Studio) and Sign out. - A token pasted before Sign in with Bridge existed: the same card, with one primary action, "Sign in with Bridge" ("Connect through your team's Bridge account

    v1.0.0, Nov 11, 2026

  • Fix

    Plugin: "Copy a prompt" removed; Draft with Claude starts your own Claude directly when no API key is saved; the Claude settings card shows two options as rows with their state; code-only details are no longer listed on Pull and Push

    v1.0.0, Nov 11, 2026

  • Fix

    Idle Pull and Push screens explain the flow in three steps instead of a Source card with a Change link

    v1.0.0, Nov 11, 2026

  • Fix

    Plugin screens in the Field Guide layout: a Harbor intro with a line drawing on every idle, connect and result screen, a Source card, Settings as cards with a link to create a token, Deep Harbor tab indicator

    v1.0.0, Nov 11, 2026

All release notes

Updated Nov 11, 2026
View source

Generated from 4 files