Bento Cards
A responsive card grid for showing several related capabilities with deliberate visual hierarchy.
Added in v2.5.0 · import from "@borneo/react"
Live previewPermalink to this section
This is the production component using the active theme and component contracts.
Automation
Move work forward
Turn repeated handoffs into reliable workflows.
- Handoff reviewEvery Monday
- Release checklistOn merge
Shared context
Keep decisions beside the work.
Clear ownership
Know who moves next.
Instant report
Every run, its owner and its outcome in one place.
AnatomyPermalink to this section
Every visible part has one job and a clear requirement.
| Part | Requirement | Purpose |
|---|---|---|
| Grid | Required | Controls responsive columns, gaps and row rhythm. |
| Card heading | Required | Names one capability or outcome. |
| Description | Optional | Explains why that capability matters. |
| Visual and footer | Optional | Supports the message without replacing it. |
Variants and statesPermalink to this section
Choose a variant for meaning or layout need, never decoration alone.
| Variant | Use |
|---|---|
| Outlined | The default surface. A stroke carries the structure and nothing is spent on depth. |
| Elevated | Borderless, lifted by the resting bento shadow. Use for a whole grid, not one card in an outlined set. |
| Spotlight | The brand gradient fill with light text. At most one per grid, for the capability that leads. |
| Default span | One grid cell for supporting information. |
| Wide | Two columns for comparisons or horizontal visuals. |
| Tall | Two rows for a longer vertical story. |
| Feature | Two columns and rows for the primary capability. |