About the bento grid features section prompt
A features section laid out as an uneven bento grid: one hero cell, two medium cells and three small ones, each with a CSS-drawn icon.
What you get
- A left-aligned header with a pill eyebrow, a two-line heading and a supporting line
- A four-column bento grid laid out with grid-template-areas so the shape is readable in the CSS
- Six cells: one large inverted hero, two wide and three small
- A dark hero cell with a teal radial glow that anchors the grid by contrast rather than size alone
- A pipeline visual inside the hero: three labelled bars that fill from the left, with a time pill that pops in after
- Rounded icon tiles with inline SVG that rotate slightly on hover
Techniques it uses
Worth knowing whether you run the prompt or write the code yourself.
grid-template-areas as documentation
The layout is written as a picture in the CSS: "hero hero w1 w1" / "hero hero w2 w2" / "s1 s2 s3 s3". Rewriting it at each breakpoint is one string, not six rules.
scaleX for the filling bars
Each bar's ::after animates transform: scaleX from 0 to 1 with transform-origin: left. Transform animates on the compositor, unlike width, so it stays smooth.
Contrast as hierarchy
The hero cell is bigger and inverted. Either alone would work; together they make it unmistakably the anchor without needing a larger heading.
Consistent padding across uneven cells
Every cell keeps the same internal padding regardless of span, so the text edges align across the grid even though the boxes are different sizes.
How to adapt it
Add a seventh cell
Extend the grid-template-areas string with a new name and add a matching grid-area. Because the layout is named rather than numeric, you can read the shape without counting columns.
Make the hero light
Delete the .hero background and border-color overrides. The cell keeps its two-by-two span and simply inherits the standard white card styling.
Change the anchor cell
Move the .hero class to any other cell. The grid areas control position, so the dark treatment travels independently of where the cell sits.
Swap the pipeline visual
The .viz block is self-contained at the bottom of the hero cell. Replace it with anything, or delete it and the cell reflows on its own.
Frequently asked questions
What is a bento grid?
A layout of uneven boxes on one grid, named after bento lunch trays. One large cell anchors the block and smaller cells fill in around it.
How many cells does this prompt produce?
Six: one hero cell, two medium and three small. Ask for more and the model extends the grid template to fit.
Are the icons images?
No. Each icon is drawn with CSS shapes and pseudo elements, so the section makes no extra requests.
Which AI tools does this prompt work with?
Claude, Cursor, Codex, v0 and any other model that returns code.
Where does the name bento come from?
Bento lunch trays, which divide a single box into compartments of different sizes. The layout borrows the idea: one grid, uneven cells, no wasted space.
How do I stop the grid looking random?
Keep one clear anchor and align the rest to shared grid lines. Uneven does not mean arbitrary, and a bento with no dominant cell reads as a mistake.