Scale — Bento

Install

Thousands of combinations.

Semantic color and type.

Feather + status icons.

Hero, Pricing, FAQ and more.

feature showcases, product highlights, and visual grid layouts. Slot a fill-variant card into each of card-1…card-4.

Fill all four card slots — the Z-pattern reads as broken with gaps.
Use variant="fill" cards so each one stretches to its cell.
Keep card headings parallel in length and structure — the grid invites comparison.

Don’t rely on the wide-vs-narrow cells to signal importance — the layout collapses to a single column on mobile.
Don’t slot long-form content into the cards; this is a showcase, not a reading surface.
Don’t use it for fewer than four items — use Section Feature or a row of Cards instead.

Headings: the section imposes no heading levels — slot a heading that fits the page outline (e.g. h2 in the heading slot, h3/h4 in the cards).
Images: give every slotted Card Image an image-alt; the section adds no text alternatives itself.
Order: reading and tab order follow slot order (card-1→card-4), matching the visual Z-pattern on desktop and the stacked order on mobile.
Responsive: the grid reflows (5-column Z-pattern → single column ≤ 402px) without content changes.