API and Development
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.
| Name | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | Slots, usually {@link CardHeader }, {@link CardContent } and {@link CardFooter }. |
className | string | — | Classes appended after the generated classes. Put overrides in @layer chroma.overrides. |
elevation | CardElevation | CardElevation.None | Resting shadow. A Ghost card has no shadow. |
ref | Ref<HTMLDivElement> | — | Ref to the card's root element. |
size | CardSize | CardSize.Default | Interior padding. |
variant | CardVariant | CardVariant.Surface | Painted fill and edge. No fill, edge, or shadow; the padding stays. |
| Name | Type | Default | Description |
|---|---|---|---|
title | LocalizedMessage | required | Visible BodyLarge strong 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. |
| 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. |
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.
| 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. |
| Name | Type | Default | Description |
|---|---|---|---|
children | ReactNode | required | Footer content. |
justify | CardFooterJustify | `Start` | Start, Center, or End. |
aria-label: LocalizedMessage. controls is forbidden.
The action target is a sibling overlay (.pr-card__action), not a wrapper around header, content, or footer.
| Name | Type | Default | Description |
|---|---|---|---|
Action | `onClick` required | — | Forbidden: href, external, controls. |
Navigation | `href` required | — | Forbidden: onClick, disabled, aria-pressed, controls. |
external is navigation-only. It emits target="_blank" and rel="noopener noreferrer". Public target and rel props do not exist.
Omitted aria-pressed produces no attribute. false and true emit those values.
Card fills that height. CardContent shrinks. Scrollable owns the viewport.