BentoGrid
Asymmetric grid layout for home pages
Preview
Clickable cell 2×2
Body hidden by default; it appears on hover (always visible on mobile). The whole surface is the link.
See moreSurface variant 2×1
--color-surface-raised background: a fill instead of an outline.
See moreInert 1×1: neither link nor container.
Container 1×1: holds other components.
The real canon component: real 24px gap, dual radius and hover. Here the grid spans the docs column; in real use it fills --site-max-width. For case study cells (cover + video on hover) there is BentoCaseCell, a canon component of its own.
Grid
| Viewport | Columns | Gap |
|---|---|---|
| Desktop (≥768px) | 4 | 24px (--space-lg) |
| Mobile | 1 (stack) | 24px |
Dual border-radius
| Corner | Radius | Token |
|---|---|---|
| Outer (grid edges) | 24px | --radius-xl |
| Inner (where cells meet) | 4px | --radius-inner |
By default, first-child rounds top-left and last-child bottom-right. The per-corner utilities (.bento-cell--round-tl/tr/bl/br) compose the outer radius corner by corner, independent of DOM order: each page rounds the real corners of its own composition. Desktop only; on mobile every cell rounds to xl.
Cell types
| Type | Class | Behavior |
|---|---|---|
| Clickable | .bento-cell--clickable | <a> surface. Title visible, body on hover. |
| Container | .bento-cell--container | Holds other components. Not a link. |
| Inert | .bento-cell--inert | No link, no container. |
| Surface (modifier) | .bento-cell--surface | Filled with --color-surface-raised instead of an outline. In dark, a 4% lift over the background (the value lives in tokens.css). |
Hover (desktop)
Clickable cells show only the title by default. The body (opacity 0) appears on hover with a 0.3s ease-out fade. On mobile, the body is always visible.
Constraints
- 5-8 cells per page. More than 8 is a curation failure.
- Collapses to 1 column on mobile.
- No nested grids.
Decisions
| Decision | Why |
|---|---|
| 4 base columns | Enough asymmetry, simple to maintain |
| Dual radius 24px/4px | The grid as one cohesive surface |
| Title only by default | Clean first impression, depth on exploration |
| Staggered entrance | An organic sense of "settling in" |
| Surface via --color-surface-raised | In dark, the --color-surface token (near black) would invert the lift; the value lives once in tokens.css |
| Per-corner utilities | The real outer corners depend on each page's composition, not on DOM order |