1 viewer
Component · Layout
Card
Section-like surface with optional title, badge, and body slots.
- Category
- Layout
- Slots
- 5
- States
- 4
- Writer
- Shared
Preview
Standard Surface Card
Structural surface card with borders and background styling.
<Card title="Standard Surface Card">
<Text
text="Structural surface card with borders and background styling."
/>
</Card>Variants
Standard Surface
Surface container with default background and subtle border.
Accent-backed card for system status notifications.
Anatomy
The named parts of the rendered markup. Recipes style these hooks, and every renderer keeps them stable.
| Slot | DOM class |
|---|---|
| root | .primitive-card |
| header | .primitive-card__header |
| title | .primitive-card__title |
| badge | .primitive-card__badge |
| body | .primitive-card__body |
- Modifier
- primitive-card--{status}
- State attribute
- data-statusfrom the status prop
States and platforms
The states the contract publishes, the platforms it declares, and the style recipes that dress it.
States
Platforms
Recipes
Renderers
Every tag in the example above renders through a shared writer.
Declared adapters. A status is the manifest's declaration, not a measured parity result.
| Target | Renderer | Status |
|---|---|---|
| web | react | experimental |
| runtime-node | view-node | ready |
| ssr | html-semantic | ready |
| terminal | terminal-layout | planned |
| native | native-adapter | experimental |
Accessibility
Named cards expose a labelled region without depending on recipe styling, while empty shells stay inspectable.
- Cards with a visible title or explicit aria-label expose a stable accessible region name.
- Title-less cards should use aria-label or aria-labelledby when they need landmark-style navigation.