Components

Card

Three style variants for grouping related content. Cards are purely structural — they provide the container; content composition is up to the consumer.

Variants

Default

card/style=default

Default Card

White background with a 1px subtle border. The standard surface for most content grouping scenarios.

Elevated

card/style=elevated

Elevated Card

No border. A layered shadow lifts it off the page. Use for featured or interactive card patterns.

Flat

card/style=flat

Flat Card

Uses bg/faint for a low-contrast surface that blends into the page background. Good for secondary content.

Tokens used

bg/baseDefault and Elevated background
bg/faintFlat variant background
border/subtleDefault variant border color
border-width/baseDefault variant border width
radius/xlContainer border radius (16px)
space/6Internal padding (24px)