Card
Do not nest cards.
A card takes the width its container gives it and shrinks with it: nothing in a card sets a minimum width. The header wraps, and a badge or button that does not fit beside the title drops to a second row, with a gap between them. A long identifier in the title or the body breaks instead of running out of the card, and footer actions wrap onto further rows, right-aligned.
Basic
STATUS
All systems nominal. Last update 12s ago.
With footer actions
CONFIRM
Deploy auth.gateway to production?
With Badge in header
SERVICEONLINE
Latency 23ms · 99.99% uptime
Composition rules
The manifest permits these direct children:
| Parent | Children |
|---|---|
Card | CardHeader, CardBody, CardFooter |
CardHeader | Text, Badge, Button |
CardBody | Any |
CardFooter | Button, ButtonGroup |
Props
Card
| PROP | TYPE | DEFAULT | REQUIRED |
|---|
CardHeader
| PROP | TYPE | DEFAULT | REQUIRED |
|---|
CardBody
| PROP | TYPE | DEFAULT | REQUIRED |
|---|
CardFooter
| PROP | TYPE | DEFAULT | REQUIRED |
|---|
Accessibility
Card has no inherent ARIA role. For a semantic section, wrap it in
<section aria-labelledby> referencing the header's id. Subcomponents can also stand alone.
Manifest entries
<Card>
<CardHeader>STATUS</CardHeader>
<CardBody>All systems nominal.</CardBody>
</Card>View agent manifest
{
"description": "Bordered surface container. Use with CardHeader, CardBody, CardFooter.",
"props": {},
"slots": {
"children": {
"type": "CardHeader | CardBody | CardFooter",
"required": true
}
},
"composable_with": [
"DataTable",
"Sidebar"
],
"never_inside": [
"Card"
],
"example": "<Card>\n <CardHeader>STATUS</CardHeader>\n <CardBody>All systems nominal.</CardBody>\n</Card>"
}<CardHeader>STATUS</CardHeader>View agent manifest
{
"description": "Uppercase card title row, allows text + Badge + small buttons. Code and kbd retain their casing; wrap other names, IDs, or supporting text in a child with normal-case tracking-normal.",
"props": {},
"slots": {
"children": {
"type": "text | Badge | Button(size=sm)",
"required": false
}
},
"composable_with": [
"Card"
],
"never_inside": [
"CardHeader",
"CardBody",
"CardFooter"
],
"example": "<CardHeader>STATUS</CardHeader>"
}<CardBody>All systems nominal.</CardBody>View agent manifest
{
"description": "Card body slot — arbitrary content, preserving original casing.",
"props": {},
"slots": {
"children": {
"type": "any",
"required": false
}
},
"composable_with": [
"Card"
],
"never_inside": [
"CardHeader",
"CardBody",
"CardFooter"
],
"example": "<CardBody>All systems nominal.</CardBody>"
}<CardFooter><Button variant="primary">DEPLOY</Button></CardFooter>View agent manifest
{
"description": "Card footer slot — action row, allows Button and ButtonGroup.",
"props": {},
"slots": {
"children": {
"type": "Button | ButtonGroup",
"required": false
}
},
"composable_with": [
"Card"
],
"never_inside": [
"CardHeader",
"CardBody",
"CardFooter"
],
"example": "<CardFooter><Button variant=\"primary\">DEPLOY</Button></CardFooter>"
}