Sidera/Components/Card
Card
Cards group related content and actions into a single, scannable surface. They give structure to dashboards without adding visual noise.
CategoryContainment
StatusStable
Version2.0
01 —Overview
Reach for a card when a set of content belongs together and benefits from a clear boundary — a metric, a record, a piece of media. Keep one primary idea per card; if it needs scrolling, it probably wants its own page.
Portfolio
£2.4M
+6.1% this month
02 —Variants
Outline is the default quiet surface; filled lifts a card off the page; interactive makes the whole card a focusable, hoverable target.
Outline
Default quiet surface
Filled
Lifted off the page
Interactive
Hover or focus me
03 —With media
Open Estate
Real-estate investment platform
04 —Anatomy
- Surface — bordered container at radius lg (18px).
- Media — optional full-bleed header region.
- Body — heading, supporting text and metrics.
- Footer — optional actions row.
05 —Usage
Do
- Keep one clear idea per card.
- Make the whole card the hit target when it links.
- Align cards to the grid for rhythm.
Don't
- Nest cards inside cards.
- Overload with competing actions.
- Lean on heavy drop shadows for depth.
06 —Properties
PropTypeDefault
variantoutline | filledoutline
interactivebooleanfalse
Card.Body paddingsm | md | lgmd
Card.Medianode—
07 —Accessibility
- Interactive cards are a single focusable control with one action.
- Heading text gives the card an accessible name.
- Hover affordances are mirrored on keyboard focus.
- Never bury the only link in non-text media.