Surface container for grouped content. Pairs a title, description, optional action, body, and footer — used across this entire library to wrap demos.
Basic
Title + description + body — the most common layout.
Basic
Title + description + body — the most common layout.
Cards are surface-level containers that host related content. Everything in this library uses them to scope a demo.
With action
CardAction slots a secondary control into the top-right of the header.
With action
CardAction slots a secondary control into the top-right of the header.Use this for links that jump to a fuller view or toggles that affect the card's contents.
With footer
Pin primary/secondary actions to the bottom.
With footer
Pin primary/secondary actions to the bottom.
Great for forms, confirmations, or any card whose actions belong alongside a submit/cancel pair.
Small size
size="sm" tightens the paddings and shrinks the title — useful for dense grids.
Small size
size="sm" tightens the paddings and shrinks the title.Useful for dense grids of cards where a lot of surfaces share the viewport.
Pricing grid
Two cards laid out in a responsive two-column grid with per-card footers.
Plan — Team
For growing squads that need more room.
$29/mo
Plan — Business
For larger orgs with advanced needs.
$79/mo