Skip to content

role container

Card draft v0.1.0

A surface that groups a title and related content as one unit.

A card gathers what belongs together, a title and its content, on a raised surface with its own edge, so a page of many things reads as a grid of units: a project in a list of projects, a plan in a pricing page, a setting group. It is a surface, not a control: a card that opens something holds a link or a button; a card is never itself clickable. Its surface level follows the Color foundation.

Decisions

From decisions in packages/components/specs/components/card.spec.json, newest first. Every active decision is implemented by the spec, the tokens, the web implementation and the guidelines.

Color

  • A card is a surface of the Color foundation: level 1 by default (fill global.bg.level.1.default, edge global.border.level.edge.level.1) or level 2; it never defines a color of its own. The title is primary text, the content secondary text.

    surface-levels · 2026-10-03 · v0.1.0

    card.container.background.*card.container.border-color.*card.title.colorcard.description.color

Dimension

  • The surface has 16 px of padding, 8 px between title and content, a 0.6 px edge and 8 px corners; the title is the 16 px semi-bold heading style, the content 14 px body.

    box · 2026-10-03 · v0.1.0

    card.container.paddingcard.container.gapcard.container.border-widthcard.container.border-radiuscard.title.typographycard.description.typography

Behaviour