Components
BentoCard
A cell in a BentoGrid that declares its own column and row span.
BentoCard is a single tile inside a BentoGrid.
Each card claims grid space with colSpan (1–4) and rowSpan (1–3), letting
you build asymmetric, magazine-style layouts where some tiles are larger than
others. It ships with a bordered surface and, when interactive (the default),
a subtle hover lift and accent border. Compose cards directly as children of a
BentoGrid.
Example
Preview
Bento card
A single tile in a bento grid.
import { BentoGrid, BentoCard } from '@officina/ui';
<BentoGrid columns={3}>
<BentoCard colSpan={2} rowSpan={2}>
Featured
</BentoCard>
<BentoCard>Stat</BentoCard>
<BentoCard>Stat</BentoCard>
</BentoGrid>;API
| Prop | Type | Default | Description |
|---|---|---|---|
| colSpan | enum | 1 | |
| interactive | boolean | true | Subtle lift + accent border on hover. |
| rowSpan | enum | 1 |