Card
Composable React card surface with image, icon, header, content, footer, and expandable sections. Selectable and interactive variants for dashboards and portals.
Card is a set of parts. Combine a header, content, and footer as needed.
When to use
Use Card to group related content into one surface: a service summary, a request in a list, or a dashboard tile. Compose only the parts you need. Make a card interactive when the whole card leads to one destination, and selectable when users pick among cards.
Avoid nesting cards; use Divider or spacing inside instead.
Examples
Props
Props declared by Card. Native attributes of the underlying element pass through.
<Card>
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "outline" | "ghost" | "default" | "elevated" | "plain" | "filled" | "gradient" | ||
padding | "sm" | "md" | "lg" | ||
orientation | "vertical" | "horizontal" | ||
interactive | boolean | ||
align | "center" | "start" | ||
asChild | boolean | Render as the single child element instead of a <div> (see Button). | |
disabled | boolean | DGA Disabled state - mutes the surface (gray-200 bg / gray-400 text + icon)
and marks the card aria-disabled. Suppresses Selectable toggling. | |
selectable | boolean | DGA Type=Selectable - the whole card becomes a checkbox (role="checkbox",
Space toggles) with a checkbox indicator at the top inline-end. Controlled
via selected or uncontrolled via defaultSelected. Ignores asChild. | |
selected | boolean | Controlled selected state (Selectable). | |
defaultSelected | boolean | Uncontrolled initial selected state (Selectable). | |
onSelectedChange | (selected: boolean) => void | Fires with the next selected value when the user toggles a Selectable card. | |
expandable | boolean | DGA Type=Expandable - renders a chevron toggle (icon-only Subtle button) at
the bottom inline-end that shows/hides a <CardExpandableContent> region.
Controlled via expanded or uncontrolled via defaultExpanded. | |
expanded | boolean | Controlled expanded state (Expandable). | |
defaultExpanded | boolean | Uncontrolled initial expanded state (Expandable). | |
onExpandedChange | (expanded: boolean) => void | Fires with the next expanded value when the user toggles an Expandable card. | |
expandLabel | string | Accessible label for the expand/collapse toggle. Default 'Toggle details'. |
<CardIcon>
| Prop | Type | Default | Description |
|---|---|---|---|
asChild | boolean | ||
featured | boolean | Render the DGA Platforms Code "Featured Icon" treatment - a 48px brand-light circle around the glyph (vs the bare inline icon). Pair with the SDGA Card pattern (featured icon → title → content → footer). | |
size | "md" | "lg" | Featured circle size: md 48px / 24px glyph (default) · lg 56px / 28px glyph (stat tiles). |
<CardTitle>
| Prop | Type | Default | Description |
|---|---|---|---|
asChild | boolean | Override the heading element (e.g. render an <h2> or <a>). |
<CardDescription>
| Prop | Type | Default | Description |
|---|---|---|---|
asChild | boolean | ||
minLines | number | Reserve room for at least this many 24px lines so cards in a row keep one height (the SDGA mobile News card draws four). | |
clamp | number | Truncate after this many lines with an ellipsis. |
<CardImage>
| Prop | Type | Default | Description |
|---|---|---|---|
aspectRatio | string | Aspect ratio of the image in vertical orientation (e.g. '16/9', '4/3',
'1/1'). Default '16/9', or 'auto' when blockSize is set. Ignored in
horizontal orientation, where the image fills the card's full height. | |
blockSize | string | number | Fixed height in px or any CSS length (the SDGA image slot is 250 tall). |
Accessibility
A plain Card is a generic container with no role. Interactive cards expose role="button" and respond to Enter, and selectable cards expose role="checkbox" with aria-checked. Expandable content links its trigger with aria-expanded and aria-controls.
Give the card a heading through CardTitle so screen reader users can navigate by headings.