Bento layouts &
adaptive text

Cells share a grid · text adapts to the space it gets.

The grid

A 2×2 grid, four equal cells

One Two Three Four

Spans · cells of different sizes

span="2x1" · two columns, one row span="1x2" 1×1 1×1

Asymmetric tracks + per-axis override

row="2" · this cell spans both rows of the narrow column wide · top wide · bottom

Cell styling

Status tones

info

Neutral highlight.

ok

Success / positive.

warn

Caution.

danger

Problem / risk.

Card chrome, or plain

Default cell

Surface, border, radius and padding · the bento "card" look.

plain cell

No chrome · still a size container, so child cqw/cqh type and fit keep working. Use it to group content without a box.

Content placement inside a cell

start / start

center / center

end / end

stretch · between

Top and bottom pushed apart.

 centered fit

bottom-aligned

Adaptive text

Two ways to scale text

size="display" · pure CSS (cqw) Scales with the cell width, may clip if too long fit · JS measure Shrinks until it fits · never overflows, whatever the length

Same cell, different lengths

Hi A medium line here A much longer sentence that has to shrink a lot to fit the very same box

Clamp the fit range

fit-max="3" · capped small Short text, but capped at 3rem so it never gets huge fit-min="2" · floored A long line that would shrink below 2rem is clamped to the floor and clipped instead

Fit any content, not just a punch

A fitted list

  • Wrap any markup in deck-fit
  • It shrinks to fit the cell
  • Lists, paragraphs, tables…
  • Bounded by min / max rem

A block of prose that auto-sizes to whatever room the cell offers, growing on a wide slide and shrinking on a tight one.

Media & data

SVG and images fit their cell

Inline SVG

Raster image · object-fit: contain

demo

Drop CSV, get a table

Header row + body

Metric, Q2, Q3 p95 latency, 1.8s, 1.2s error rate, 0.5%, 0.3% uptime, 99.9%, 99.98%

A dense table · deck-csv fit shrinks it

Region; Users; Growth; Plan; Owner EMEA; 12 040; +8%; Pro; A. Dupont APAC; 9 310; +14%; Pro; L. Chen AMER; 18 220; +5%; Ent; J. Smith LATAM; 4 105; +22%; Pro; M. Rossi MENA; 2 870; +31%; Starter; K. Haddad SSA; 1 560; +44%; Starter; N. Okoro OCE; 3 240; +6%; Ent; P. Walker # You won't write it all yourself A real project pulls in a window lib, a formatter, a test framework. The question is **how** they arrive · every answer is a trade-off: ::: cards cols=3 :: warn | Reproducibility same versions on every machine, every CI run :: warn | Build cost source you compile vs prebuilt you link :: warn | Control who owns the version, the flags, the patches :::

Real content

Cells hold any component

Markdown

Cells accept **rich** content: - `deck-md` - `deck-stat` - `deck-code` and they all share the grid.

faster

cold start Bento

Code

<deck-cell span="2x1">…</deck-cell>

A metrics dashboard

Q3 release health

p95

latency

error

rate

Uptime

99.98% this quarter.

Backlog

14 open · 3 blocking.

 All green · ship it

Revealed cells refit when shown

Step one appears… …then a longer step two that fits on reveal… …and three

Real layouts. Text that fits.

deck-bento · deck-cell · deck-fit · deck-punch fit