imitationnew
BentoGrid
A six-column grid of uneven cards that stacks on a phone. Pair it with BentoCard.
Projects at a glanceTwo wide cards, then three narrow
Harbour rebrand
Identity, site and launch kit for the harbour trust.
Tideline mobile
Offline tasks and a quiet inbox for the crew.
Crew interviews
Twelve calls, one clear pattern.
Rota export
Shifts out to payroll without the spreadsheet.
Depot signage
Wayfinding for the three northern depots.
Harbour rebrand
Identity, site and launch kit for the harbour trust.
Depot signage
Wayfinding for the three northern depots.
In context
Studio homeEach card carries its owner and status
Harbour rebrand
Identity, site and launch kit for the harbour trust.
MC
Maya Chen
On trackTideline mobile
Offline tasks and a quiet inbox for the crew.
JW
Jonas Weber
ReviewCrew interviews
Twelve calls, one clear pattern.
PN
Priya Nair
LateRota export
Shifts out to payroll without the spreadsheet.
LS
Leo Santos
DoneProps
| Prop | Type | Required | Default |
|---|---|---|---|
children | ReactNode | Yes | — |
Layout
Six columns from 960px up, one column below. Rows size to their cards and the grid never sets overflow, so card media is not clipped. Cards pick span 2, 3 or 6 (see BentoCard).
data-rebar-* attributes
data-rebar-component="bento-grid" on the root.
Migrating to Ant Design
Not codemod-covered. The nearest Ant Design shape is a Row with Col span values on a 24-column grid.