Card
A bordered container that groups related content into one unit. Cards carry their structure with a border rather than a shadow, so a page of them stays calm.
Added in v1.0.0 · import from "@borneo/react"
Interactive previewPermalink to this section
Three variants and four padding steps. Elevated is deliberately subtle — it is for cards that genuinely sit above the page.
Q3 marketing site
Twelve pages, four contributors. Last deployed two hours ago.
<Card
variant="outlined"
padding="md"
>
<CardHeader>
<CardTitle>Q3 marketing site</CardTitle>
<CardDescription>
Twelve pages, four contributors.
</CardDescription>
</CardHeader>
</Card>AnatomyPermalink to this section
Q3 marketing site
Twelve pages, four contributors.
VariantsPermalink to this section
Outlined for almost everything. Elevated when the card floats over content. Filled when it should recede into the page.
Outlined
Border carries the structure.
Outlined
The default
Elevated
A very small shadow.
Elevated
Floating surfaces
Filled
Tinted, borderless.
Filled
Recedes into the page
CompositionPermalink to this section
A realistic card: status, metadata, body and a single primary action.
Q3 marketing site
Twelve pages, four contributors.