Bento grid that ranks features by size
A dark bento-grid feature section that shows 6 capabilities at different sizes — KPI, badges, and abstract decorations mix in one scroll to tell a story of what's primary and what's supporting. Tuned for B2B SaaS marketing pages.
Open preview
Overview
Bento Features is the anti-thesis of the “equal grid.” By making the hero cell visibly larger and the supporting cells smaller, the product’s story becomes the layout itself — visitors see which capabilities matter most before they read any text.
Why it works
A classic 3-column feature grid treats every capability as equal, which is rarely true. Bento grids translate the internal importance hierarchy into actual area on the page. Apple and Linear popularized the pattern, and it’s become something close to a B2B SaaS standard for product-page storytelling.
Structure
- 6-cell / 6-column grid: wide × 2, tall × 1, medium × 2, small × 1. Vary on purpose.
- Cell tag: every cell carries a numbered uppercase label top-left so the scanning rhythm is consistent.
- KPI cell: huge number + green delta — numbers-as-information, not numbers-as-decoration.
- Pill clusters: useful when “how many of these exist” is part of the message (integrations, automations).
- Radial orb decoration: a cheap way to add motion to a cell that doesn’t have a real screenshot yet.
- Responsive three-step collapse: 6 → 4 → 1 column. The tags and KPIs survive even on mobile.
When to use
- When 6–9 features need to be shown side-by-side with a clear primary/secondary hierarchy
- When real screenshots aren't ready yet but you still need the cells to feel alive
- B2B SaaS marketing pages that want the Apple/Linear product-page tone
Recommended stack
- Category
- Feature
- Styles
- Bento / SaaS / Dark / Gradient / Bold
- Audience
- for SaaS
- SPA
- No
- Hosting
- any
- Notes
- Pure CSS Grid. Works in any modern browser that supports `grid-column: span`. No JS.
AI prompt
Build a bento-grid feature section for a B2B SaaS marketing page.
Canvas:
- Dark background (#0b0b12) with two soft radial accents:
top-right in lavender rgba(139,124,255,0.15),
bottom-left in mint rgba(84,224,196,0.10).
- Inter / system sans, line-height 1.55, text color #ebeaf4, muted #95939d.
Header above the grid:
- Eyebrow pill "Product · Capabilities" in lavender on a tinted pill.
- H2 (clamp 2.1/5.5/3.2rem) max 22ch: "Every piece of the workflow, in one board."
- 1 sentence lede explaining the bento metaphor.
Bento grid:
- 6-column CSS Grid, 200px auto-rows, 0.85rem gap, max-width 1180px.
- 6 cells with different spans. Each cell: 20px radius, 1px border
rgba(255,255,255,0.08), dark panel background (#141421), 1.4rem padding.
- Each cell has a tiny uppercase tracked tag in the top-left ("01 · Realtime sync", etc.),
an H3 title at the bottom, and — depending on the cell — a decorative visual.
Cells, in order:
1. Wide (span 4x2, "Realtime sync"): conic-gradient blur "orb" decoration, H3 + lede.
2. Tall (span 2x2, "Uptime"): big KPI "99.99%" with a green delta below; H3.
3. Medium (span 3x1, "Integrations"): a row of rounded pills with some colored
(Slack=lavender, Notion=mint, +42=pink); H3 under.
4. Small (span 2x1, "Audit"): a row of 6 small chips; 2 are highlighted pink;
H3 below: "SOC 2 II from day one."
5. Medium (span 3x1, "Automations"): rule-style pills (if X then Y, schedule…); H3.
6. Wide (span 3x2, "Migration"): radial pink accent glow in the top-right; H3 + lede.
Responsive:
- ≤900px: switch to 4-column grid; wide cells become full-width.
- ≤560px: single-column stack, every cell min-height 200px.
Pure HTML/CSS. No JS.
Variations
Light theme
Background #f7f6fb with identical structure. Cell background white with a 1px #e6e4ee border and subtle shadow (0 10px 30px -20px rgba(25,30,80,0.15)). Accent pills keep their colors but desaturated 30%.
Denser grid
Expand to 9 cells on an 8-column grid. Add "Versioning", "Roles & SSO", and "Analytics dashboard". Keep the wide/tall/small rhythm — don't stack three same-size cells in a row.
FAQ
How many cells is right?
Six to nine works best. Past ten, the layout stops reading as "bento" and starts reading as a regular grid. Always give one or two cells visibly more canvas than the rest — that's the contrast.
Does it hold up without screenshots?
Yes. This prompt assumes zero screenshots — conic-gradient orbs, pill rows, and small chip strips do the decorating. Swap them for real screenshots as soon as they're available.
Does "bento" survive on mobile?
Strictly no — the grid collapses to a single column. But the tags, KPIs, and pill rows persist, so the visual rhythm doesn't die. Consider alternating subtle background tints per cell to keep the stack from feeling flat.