'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Layout
BentoGrid
A bento layout: cards of different sizes on an even grid, with spans per breakpoint, an optional visual and whole-card links. Pairs with the Graphite preset.
import { BentoGrid, BentoCard } from '@alea/ui';
Examples
Bento grid
Cards of different sizes on an even grid: spans per breakpoint, one column on phones.
Analytics that read well
Charts with a table view, keyboard focus on every point and live tooltips.
Your brand
Accent, radius and density.
Accessible
Keyboard and screen readers, built in.
Motion built in
Fourteen patterns and a motion prop on every overlay.
Fast
CSS first; JavaScript only where it helps.
Graphite bento
The monochrome preset on a wrapper: near-black surfaces, white accent, sans titles.
Ship faster, quietly.
99.99% uptime
Global by default
Every region, one deploy.
Secure
Keys never leave your account.
Edge compute
Runs close to people.
Tokens
The design tokens this component reads, with their value in the current theme. Override any of them to restyle it.
Component
--alea-bento-row…--alea-cols-base…--alea-cols-lg…--alea-cols-md…--alea-cols-sm…--alea-cols-xl…--alea-gap-base…--alea-gap-lg…--alea-gap-md…--alea-gap-sm…--alea-gap-xl…
Props
BentoGrid props
A bento layout: cards of different sizes on an even grid that fills the gaps. On phones it is one column.
| Prop | Type | Default | Description |
|---|---|---|---|
as | ElementType | - | |
columns | Responsive<number> | - | Columns per breakpoint. Default { base: 1, sm: 2, lg: 4 }. |
gap | Responsive<Space> | - | Space between cards. Default 4 (16 px). |
rowHeight | number | - | Height of one row in px; cards span rows with rowSpan. Default 200. |
BentoCard props
A cell of a BentoGrid: an optional visual on top, then the title and text.
| Prop | Type | Default | Description |
|---|---|---|---|
as | ElementType | 'article' | |
colSpan | Responsive<number> | - | Columns it spans, per breakpoint: { base: 1, lg: 2 }. |
description | ReactNode | - | |
eyebrow | ReactNode | - | A small label above the title. |
headingLevel | 2 | 3 | 4 | 3 | Heading level of the title. Default 3. |
href | string | - | Makes the whole card a link (one tab stop, named by the title). |
icon | ReactNode | - | An icon by the title. |
padding | "none" | "tight" | "normal" | "loose" | 'normal' | Inner space, like Card. Default normal. |
rowSpan | Responsive<number> | - | Rows it spans, per breakpoint. |
title | ReactNode | - | |
variant | "default" | "deep" | "outline" | "glass" | 'default' | default: the surface; deep: darker; glass: frosted; outline: border only. |
visual | ReactNode | - | A picture, chart or live component that fills the card above the text. |
Specs
Generated from the source: the variants in the types, the states and tokens in the CSS, and the motion patterns that apply. The grids render the real component in both themes; the numbers are measured from the page.
BentoGrid
- Dark and light
- Every color comes from theme tokens, so it follows data-theme (and presets like Graphite) on the page or any wrapper. Contrast is checked in both themes.
- Styling hooks
.alea-bento.alea-r-gap.alea-r-cols.alea-gap.alea-cols
BentoCard
- Variants
paddingnonetightnormalloosevariantdefaultdeepoutlineglass- Motion
- liftpress
- Dark and light
- Every color comes from theme tokens, so it follows data-theme (and presets like Graphite) on the page or any wrapper. Contrast is checked in both themes.
- Styling hooks
.alea-card.alea-bento-card.alea-r-span.alea-r-rspan.alea-span.alea-rspan.alea-bento-visual.alea-bento-text.alea-bento-eyebrow.alea-bento-title.alea-bento-icon.alea-card-link- Data attributes
data-variant=glass
Accessibility
- Each card is an article with a heading (level 3 by default; set headingLevel to fit the page).
- With href, the title is the one link and the whole card is clickable, so there is one tab stop with a clear name.
- Order in the markup is the reading order; dense packing can move cards visually, so keep related cards next to each other in code.
Do and don't
Do
- Give the biggest cell to the most important thing.
- Keep text short: a title and one line.
- Use visuals that show the feature (a chart, a component), not decoration.
Don't
- Don't put more than 6 to 8 cards in one grid.
- Don't rely on the layout to explain order; the text should stand alone on phones.
In Figma
Bento templates in the Graphite theme, built from Card with auto layout.