Card, CardHeader, CardContent, CardFooter, CardControls, and ClickableCard are exported from @prepared911/ui. The docs registry records one primary component per folder; the tables below are the exact slot contracts.
Use semantic Box and FlexBox props for ordinary layout, spacing, background, border, radius, overflow, and elevation. Keep Card SCSS focused on nested surfaces, bleed calculations, interaction pseudo-states, and the action overlay.
Props
Name
Type
Default
Description
area
GridAreaRef<string>
—
The parent area layout's area this card fills, from layout.areas. Replaces rowSpan and columnSpan.
children
ReactNode
—
Slots, usually {@link CardHeader }, {@link CardContent } and {@link CardFooter }.
className
string
—
@deprecated Pass layout through enum props and shipped parts. Request a missing case via find-pattern.
columnSpan
GridSpanValue
—
Parent column tracks the card covers. A GridResponsiveSpan changes the span with the container's width.
elevation
CardElevation
CardElevation.None
Resting shadow.
A Ghost card has no shadow.
ref
Ref<HTMLDivElement>
—
Ref to the card's root element.
rowSpan
GridSpan
—
Parent row tracks the card covers: one per slot it renders.
size
CardSize
CardSize.Default
Interior padding.
subgrid
GridSubgrid.Rows
—
Omitted: the card stacks its slots in its own column.
Join the parent Grid's row tracks.
variant
CardVariant
CardVariant.Surface
Painted fill and edge.
No fill, edge, or shadow; the padding stays.
Storybook
Interactive examples and edge cases for this component are in Storybook.
Visible Subtitle emphasis heading copy from formatMessage.
description
LocalizedMessage
—
Optional supporting copy.
accessory
ReactNode
—
Non-interactive trailing visual.
controls
ReactNode
—
Interactive right-hand group, typically CardControls. Do not compose under ClickableCard.
headingLevel
HeadingLevel
`HeadingLevel.H3`
Semantic heading rank without changing the fixed title typography.
CardControls
Name
Type
Default
Description
segments
CardControlsSegment[]
required
Visible mutually exclusive segments. Development warns above three.
value
string
required
Selected value across segments and overflow radios.
onValueChange
(value: string) => void
required
Fired from a segment or overflow radio.
size
SegmentedControlSize
`Small`
Segment height. Small matches the 24px frames.
menuLabel
LocalizedMessage
—
Required when the kebab menu is present.
overflowItems
CardControlsOverflowItem[]
—
Extra ranges rendered as MenuItemRadio.
menuItems
ReactNode
—
Extra menu content after overflow radios.
The kebab is a sibling of SegmentedControl, not a child. Additional ranges stay single-valued through radioValue / onRadioValueChange. An overflow selection clears the visible segment indicator so the group does not look fully selected.
CardContent
Name
Type
Default
Description
children
ReactNode
required
Body. Ordinary Card may include Scrollable, tables, or named charts. Card fills a parent-set block size so this slot can shrink.
bleed
boolean
`false`
Flush the content against the card's inline edges. Use for charts.
CardFooter
Name
Type
Default
Description
children
ReactNode
required
Footer content.
justify
CardFooterJustify
`Start`
Start, Center, or End.
Row subgrid
subgrid={GridSubgrid.Rows} with rowSpan (one row per slot) makes a Card join its parent Grid's rows, so headers, content and footers line up across a row of cards. The card keeps its surface, radius, padding and the gap between its slots. A card that spans several parent columns takes columnSpan; a card in a defineGridAreas layout takes area (which replaces rowSpan and columnSpan, so the area needs one row per slot). Don't wrap the card in GridItem. AutoFillMinItem adds and drops columns with the available width, so the cards reflow at high zoom.
ClickableCard
Action and navigation are a discriminated union. Both require aria-label: LocalizedMessage. controls is forbidden.
The action target is a sibling overlay (.pr-card__action), not a wrapper around header, content, or footer.