Docs Components
Cardexperimental
A plate of paper that groups related content. Standard cards have a visible edge, quiet cards nest inside other cards with a softer one, and interactive cards lift slightly under the cursor.
Variants
variant enumBorder treatment.
plate— Hairline strong frame. The default card.quiet— Lighter hairline (color.border.hairline) for nested or secondary containers.
interactive flagHover elevation + pointer; whole surface is the click target.
States
rest— No shadow. Depth at rest comes from the border and surface step.hover— interactive only: elevation-plate-sm appears.box-shadow: elevation-plate-sm
API
| Prop | Type | Description |
|---|---|---|
variant | string | Border treatment. |
interactive | boolean | Hover elevation + pointer. The card's click affordance must cover the whole card. |
padded | boolean | space-5 inner padding. |
Design specifications
- background
color-bg-surface - border
color-border-strong / border-width-hairline - quiet-border
color-border-hairline / border-width-hairline - radius
radius-md - padding
space-5
Guidelines
- mustNested content inside a plate card steps its radius down (radius-sm or smaller).
- mustInteractive cards make the entire surface the click target — no pencil-icon-only affordances.