Loading navigation…
User
API and Development
Card, CardHeader, CardContent, CardFooter, CardControls, and ClickableCard are exported from @prepared911/ui-core. 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 |
|---|---|---|---|
|
| — | — |
|
| — | — |
|
| — | — |
Interactive examples and edge cases for this component are in Storybook.
Name | Type | Default | Description |
|---|---|---|---|
|
|
| Visible BodyLarge strong heading copy from |
|
|
| Optional supporting copy. |
|
|
| Non-interactive trailing visual. |
|
|
| Interactive right-hand group, typically |
|
|
| Semantic heading rank without changing the fixed title typography. |
Name | Type | Default | Description |
|---|---|---|---|
|
|
| Visible mutually exclusive segments. Development warns above three. |
|
|
| Selected value across segments and overflow radios. |
|
|
| Fired from a segment or overflow radio. |
|
|
| Segment height. Small matches the 24px frames. |
|
|
| Required when the kebab menu is present. |
|
|
| Extra ranges rendered as |
|
|
| 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.
Name | Type | Default | Description |
|---|---|---|---|
|
|
| Body. Ordinary Card may include |
|
|
| Flush the content against the card's inline edges. Use for charts. |
Name | Type | Default | Description |
|---|---|---|---|
|
|
| Footer content. |
|
|
|
|
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.
Name | Type | Default | Description |
|---|---|---|---|
|
|
| Forbidden: |
|
|
| Forbidden: |
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.
Not a component. Ordinary Card with header controls and bled chart content. Live Chart.js demos live on the visualization charts page.
Not a component. Ordinary Card with header controls, a table body, and a centered footer action.
The parent sets block size. Card fills that height. CardContent shrinks. Scrollable owns the viewport.