Card
Container for grouping related content
Category: display · WCAG 2.2-AA · container, layout, surface, ai
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 | `default` draws a 1px border, `outlined` a heavier one, `elevated` drops the border for a shadow. |
padding | 'none' | 'sm' | 'md' | 'lg' | md | Inner padding of the CARD BOX. ⚠ `padding="none"` deliberately does NOT strip the padding from CardHeader/CardContent/CardFooter — those keep their own. It means "let a flush child (a LogViewer, an image, an edge-to-edge table) reach the card's edge"; zeroing both put the title flush against the border and made the mode unusable with the composition it exists for. For an edge-to-edge table, skip CardContent and pass the table as a direct child. |
ai | boolean | 'generating' | false | AI presence: `true` gives the surface an AI-tinted edge and a soft aura, marking AI-generated content; `'generating'` adds a pulsing inner glow while AI is still producing it (stops under reduced motion). Visual only — pair it with an AiBadge so the provenance is also text. |
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>AI-generated content
<Card ai>
<CardHeader actions={<AiBadge />}><CardTitle>Summary</CardTitle></CardHeader>
<CardContent>Revenue grew 12% quarter over quarter.</CardContent>
</Card>Related components
- Separator — Use a Separator to divide regions inside a card