Card

Releasedshipped in 0.1.0ClearedStorybookFigma node 65:230Source

Usage

When to use it

Use a card to group related content into one surface a user can scan or act on. The card owns the surface, border, radius and padding; everything inside comes from a card layout placed in ↳Layout.

From the Lumo.Web.Component.V1.0.Complete library — the card description, read 2026-10-19.

Where it goes

• as a page-level surface holding a card layout in its Layout slot

When not to use it

• Don’t nest a card inside another card.
  • No alternative named. The source states the prohibition without saying what to reach for instead.

What each variant is for

Property	Value	What it is for
padding	none	not stated in the source
padding	md	not stated in the source
padding	lg	not stated in the source
padding	xl	not stated in the source
state	default	not stated in the source
state	hovered	not stated in the source
state	focused	not stated in the source
state	disabled	not stated in the source

Variant meanings are not stated

The component description says what the component is for, never what an individual value means. Every value above is implemented and tested; what each one is for is a design decision nobody has written down.

Owner: human:designer

Accessibility

• becomes operable only when given an onClick and not disabled: it then takes role=“button” and tabIndex 0, so it is never a focusable element with nothing to do
  src/components/card/card.jsx:70
• when interactive, Enter activates on key down and Space on key up, which is how a real button behaves
  src/components/card/card.jsx:49
• aria-disabled marks a disabled card without removing it from the accessibility tree
  src/components/card/card.jsx:72

Composition

• Used with CardLayoutVertical

What this version promises

See Versioning. At 0.1.0 the public surface is the named exports of src/index.ts; this component is one of them. This component’s release verdict is Cleared and its Development status reads Released. A Cleared verdict is a recommendation with reasons, recorded in its release review — a human decides whether a release happens, and no agent approves its own work.

Examples

The README’s own example

import { Badge, Button, Card, CardLayoutVertical } from '@ds-house/lumo-design-system';

export function ReleaseRow({ onPublish }) {
  return (
    <Card padding="lg">
      <CardLayoutVertical
        headerProps={{ title: 'Release 0.2.0', subtitle: false }}
        body={<Badge tone="success" label="Cleared" />}
        footer
        footerContent={
          <Button label="Publish" iconLeft={false} iconRight={false} onClick={onPublish} />
        }
      />
    </Card>
  );
}

Every story that is not a variant-matrix row, embedded live from the deployed Storybook in both themes. The matrix itself is on the Design tab.

Default Padding None

Hovered Padding None

Focused Padding None

Disabled Padding None

Default Padding Md

Hovered Padding Md

Focused Padding Md

Disabled Padding Md

Default Padding Lg

Hovered Padding Lg

Focused Padding Lg

Disabled Padding Lg

Default Padding Xl

Hovered Padding Xl

Focused Padding Xl

Disabled Padding Xl

Header — with action

Header — no subtitle

Header — action, no subtitle

Layout — with footer

Layout — no header

Layout — footer, no header

Interactive

Interactive — disabled

Long Title

Code

Import

import { Card } from '@ds-house/lumo-design-system';

Props

Prop	Type	Default	Notes
state	`‘default’	‘hovered’	‘focused’
padding	`‘none’	‘md’	‘lg’
children	React.ReactNode	null	The ↳Layout slot.
onClick	() => void	—	Supplying this makes the card an activatable surface: it takes focus, it answers Enter and Space, and hover and focus-visible drive the states the design draws. Without it the card is a plain, inert surface.
className	string	''

Union types

• state: 'default'|'hovered'|'focused'|'disabled'
• padding: 'none'|'md'|'lg'|'xl'

Tokens it needs

Token	Light	Dark
--body-body3	not in the build	—
--border-radius-card	not in the build	—
--border-width-default	not in the build	—
--border-width-focused	not in the build	—
--color-bg-base	not in the build	—
--color-bg-disabled	not in the build	—
--color-border-primary-default	not in the build	—
--color-border-primary-disabled	not in the build	—
--color-border-primary-focused	not in the build	—
--color-border-primary-hovered	not in the build	—
--color-text-primary	not in the build	—
--color-text-secondary	not in the build	—
--heading-h5	not in the build	—
--motion-duration-fast	not in the build	—
--spacing-gap-horizontal-md	not in the build	—
--spacing-gap-horizontal-sm	not in the build	—
--spacing-gap-md	not in the build	—
--spacing-gap-sm	not in the build	—
--spacing-gap-xs	not in the build	—
--spacing-padding-lg	not in the build	—
--spacing-padding-md	not in the build	—
--spacing-padding-sm	not in the build	—
--spacing-padding-xl	not in the build	—

A dash under Dark means the token does not change between themes.

Storybook’s own props table

Design

The Figma node

The embed may not load

The Figma file is team-only. If the frame above is blank, open the node directly from the header link — a 403 from a team-only file is expected, not a broken link.

The variant matrix

Each row as the set draws it, in both themes.

All Variants

Open in Storybook

What Figma never bound, and the gaps recorded against it

— reported, not filled in

1. border/style/* and motion/easing/* have no values in the export. The token build warns that border-style-{solid,dashed,dotted} and motion-easing-{standard,decelerate,accelerate,emphasized,linear} “have no real value anywhere in the export and were skipped”. Checked against the Figma source over the MCP: border/style/solid and border/style/dashed do exist, in both the lumo.core and lumo.semantic.border collections of Lumo.Token.V1.0.Complete. So this is an export-scope problem, not missing design work — the collections holding those values were left out of the export, and a re-export with them selected should fix it without a designer authoring anything. Until then the component writes solid / dashed as plain CSS keywords and leaves the transition’s easing at the CSS default. This is pre-existing and affects the whole repo, not just Card.

2. Disabled text is not dimmed. The State=disabled variants bind title and subtitle to color/text/primary and color/text/secondary, the same as every other state, while the surface moves to color/bg/disabled (#dadce7). color/text/disabled exists and is unused here. The code follows the design as drawn. Worth a designer’s eye: the intent may have been to dim the content too, and the subtitle on the disabled surface is the weakest pairing in the set.

3. The placeholder’s fallback colour disagrees with its variable. In _Slot/Content the text is bound to color/text/secondary (#636679) but carries a fallback of #bfc2cf, which is color/border/primary/default. Cosmetic, and only affects a placeholder, but it suggests the binding was changed without the fallback following.

4. A token description is stale. color/border/primary/disabled is described as lumo.semantic.color.border.disabled — an older path. The variable itself is correct and correctly exported; only the description text is out of date.

From the build report, docs/card.md.

Where Figma and this repo disagree across the system, see the disagreements record.

Changelog

Every commit touching this component and its subcomponents — a change to a subcomponent changes the component, and a log that reads only the parent file misses it.

Commit	Date	Shipped in	Subject
2b94809	2026-10-19	unknown	Write the ten component intent files
c8bc699	2026-10-18	unknown	Add the test suite, and retire the deliberate stop
9525e0f	2026-10-17	unknown	Make the repo a publishable npm package
5c7687c	2026-10-10	unknown	Close the two uncovered boolean pairs on Card’s subcomponents
cd47fe6	2026-10-03	unknown	Add Card component, built from Figma node 64:113

Generated from commit 7ccfbbb53757.