Card
Container for grouping related content
Category: display · WCAG 2.2-AA · container, layout, surface
Variants
- default
- outlined
- elevated
Props
| Prop | Type | Default | Description |
|---|---|---|---|
actions | ReactNode | — | CardHeader only — trailing content pinned to the inline-end (overflow menu, badge, link). The header is a column by default, so `justify-content: space-between` alone does nothing; this is how you get the title-left / action-right dashboard card. |
variant | 'default' | 'outlined' | 'elevated' | default | Selects the visual style variant. |
padding | 'none' | 'sm' | 'md' | 'lg' | md | Inner padding of the component. |
Design tokens
--cascivo-color-surface--cascivo-color-border--cascivo-radius-card--cascivo-shadow-md
When to use
- Grouping related content into a visually distinct surface with border/shadow
- Creating scannable units in a grid or list (dashboard tiles, item summaries)
- Giving a content cluster elevation to separate it from the page background
When not to use
- Pure semantic/structural grouping with no surface — use a <section>
- Wrapping every element in a card — nesting surfaces flattens visual hierarchy
How to build an accessible Card in React →
Examples
Basic card
<Card>
<CardHeader><CardTitle>Title</CardTitle></CardHeader>
<CardContent>Content here</CardContent>
</Card>Related components
- Separator — Use a Separator to divide regions inside a card