BridgeComfortable

Previews use

Applies to every design system preview on the site. The Bridge app chrome stays the same.

Brand

Density

Card

Stable
Edit in Studio

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.

Updated Oct 16, 2026

Rendered with the real component
Light
Release 1.4.0
Adds a subtle Badge appearance and tightens focus styles.
Dark
Release 1.4.0
Adds a subtle Badge appearance and tightens focus styles.

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.

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.

25 tokens 13 semantic or component, change with theme and brand 1 density, change with comfortable or compact 11 from the shared scales

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.

Prop Type Default Description
interactive boolean false The 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. 

<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

Changelog

  • 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. Adds avatar, tag, kbd, divider and accordion component tokens.

    Unreleased (current version 0.1.0, no release tagged yet) , Oct 17, 2026

  • New

    Bridge token system v1. Adds a brand mapping layer (`bridge` default, `ocean` alternate) between primitives and semantic tokens, a component tier (button, input, checkbox, switch, slider, card, popup, dialog, tooltip, toast, table, tabs, progress, nav), comfortable and compact density, motion durations and easings with a reduced-motion override, layers (z-index), icon sizes, breakpoints, a 1.2 type scale from 14px with tracking tokens, and self-hosted IBM Plex Sans and Mono (`@bridge-ds/tokens/fonts.css`). Primitives are regenerated in OKLCH on one lightness ladder. The build now writes `dist/resolved.json` and fails when any pair in `contrast.checks.json` drops below its WCAG minimum in any brand and theme. Fixes `color.border.strong` against `color.surface.default` (now at least 3:1 in both themes).

    Unreleased (current version 0.1.0, no release tagged yet) , Oct 17, 2026

  • Fix

    Add usage guidance files for Button, Input, Badge and Card, plus the list of color pairs to check for contrast. They feed the new documentation site; no visual or API change.

    Unreleased (current version 0.1.0, no release tagged yet) , Oct 17, 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.

    Unreleased (current version 0.1.0, no release tagged yet) , Oct 17, 2026

All release notes