Bolt prompt for a bento grid section
This Bolt prompt splits a bento section into a typed data file and a renderer, so cell copy stays editable without layout risk — a structure Bolt scaffolds cleanly and hot-reloads instantly. Six cells on a 12-column grid: showcase, two stats, two features, one action row. Customizer tokens supply the style, palette, type, and motion.
Last updated
Build a bento features section for {{product}} in Bolt, structured as data plus renderer so I can edit content without touching layout: create src/data/bento.ts exporting a typed array of cell objects (title, body, span, kind, href) and src/components/BentoSection.tsx that maps over it. Import the section into App.tsx after the hero. No other files change.
Six cells on a 12-column desktop grid, 16px gaps — spans in column units:
1. kind "showcase", span 6, double row height: the headline capability of {{product}} with a large media placeholder; body copy of two lines maximum.
2. kind "stat", span 3: one number that matters to {{audience}}, set huge, with a six-word caption.
3. kind "feature", span 3: icon, four-word title, one sentence.
4. kind "feature", span 3: same shape, different feature — no overlapping claims between cells.
5. kind "stat", span 3: a second metric in a different unit than cell 2.
6. kind "action", span 6, short row: a horizontal card with a one-line invitation and a button labelled "{{cta}}" — the only button in the section.
Section chrome: an eyebrow and an H2 of seven words maximum above the grid, then 40px down to the first row. Section padding: 112px top, 96px bottom.
Visual direction:
{{style}}
Palette: {{palette}}
Typography: {{type}}
Motion: {{motion}}
Responsive: spans re-map at 768px to a 6-column grid (showcase full width, everything else half), and to a single column under 480px with the action cell kept last.
Check in the instant preview at all three widths: (1) no cell wraps its span into an orphan row that leaves a gap, (2) editing a title in bento.ts hot-reloads the content with zero layout change, (3) the two stat units differ, (4) the action button is the section's only button. Finally confirm only the three named files changed.Customize it
Runs in your browser. Nothing you type here is sent anywhere.
Build a bento features section for a project management SaaS in Bolt, structured as data plus renderer so I can edit content without touching layout: create src/data/bento.ts exporting a typed array of cell objects (title, body, span, kind, href) and src/components/BentoSection.tsx that maps over it. Import the section into App.tsx after the hero. No other files change. Six cells on a 12-column desktop grid, 16px gaps — spans in column units: 1. kind "showcase", span 6, double row height: the headline capability of a project management SaaS with a large media placeholder; body copy of two lines maximum. 2. kind "stat", span 3: one number that matters to engineering managers at startups, set huge, with a six-word caption. 3. kind "feature", span 3: icon, four-word title, one sentence. 4. kind "feature", span 3: same shape, different feature — no overlapping claims between cells. 5. kind "stat", span 3: a second metric in a different unit than cell 2. 6. kind "action", span 6, short row: a horizontal card with a one-line invitation and a button labelled "start a free trial" — the only button in the section. Section chrome: an eyebrow and an H2 of seven words maximum above the grid, then 40px down to the first row. Section padding: 112px top, 96px bottom. Visual direction: Minimal dark style. Near-black canvas (#0A0A0B) with one elevated surface tone (#141416) for cards — never more than two surface steps. Hairline borders (1px, white at 8% opacity) instead of shadows; if a shadow is unavoidable use 0 1px 2px rgba(0,0,0,0.4) and nothing softer. Text in exactly three steps: white at 92% for headings, 60% for body, 40% for captions. Generous negative space — section padding at least 120px on desktop, 64px on mobile. The accent color appears only on interactive elements and one hero highlight, nowhere else. Palette: a strict neutral ramp (white, #F5F5F5, #E5E5E5, #737373, #171717) carries the entire interface; pick one accent and use it only for primary CTAs, active states, and a single hero highlight. If the accent appears more than five times per viewport it stops being an accent. Keep semantic colors (success, error) desaturated so the accent stays in charge. Typography: one geometric sans (a Futura/Poppins-class face) at three weights maximum (400/500/700). Scale: 64-88px hero, 32px section heads, 18px lede, 16px body, 13px caps labels with 0.08em tracking. Tight headline leading (1.05-1.1), relaxed body (1.6). Let the geometry carry the personality — no italics; weight and size do all hierarchy. Motion: none. Zero scroll animations, zero entrance effects — the page is fully composed the instant it paints. Spend the motion budget on input feedback instead: 120-150ms ease-out color and transform transitions on hover and press states only. Hold this constraint absolutely; it is a statement, not an omission. Responsive: spans re-map at 768px to a 6-column grid (showcase full width, everything else half), and to a single column under 480px with the action cell kept last. Check in the instant preview at all three widths: (1) no cell wraps its span into an orphan row that leaves a gap, (2) editing a title in bento.ts hot-reloads the content with zero layout change, (3) the two stat units differ, (4) the action button is the section's only button. Finally confirm only the three named files changed.
Same task in other tools
Questions about this prompt
Why the data-file split instead of writing cells inline?
In Bolt you iterate on copy far more often than on layout, and every inline edit risks the AI reflowing the grid. With cells in bento.ts you edit strings and spans by hand, watch the hot reload, and never re-prompt for content tweaks. It also makes adding a seventh cell a one-object change.
Can I plug real metrics into the stat cells from an API?
Yes — ask Bolt to fetch into the same cell shape at load time and fall back to the static values in bento.ts on error. Keep captions static either way; a live number over a stable so-what line stays readable when the value changes.
How does this combine with the Bolt landing-page prompt?
Run the page prompt first, then this one — it imports after the hero and pushes existing sections down without editing them. Both use compatible section padding, so the rhythm holds. If the page already had a features grid, tell Bolt to replace that section's import instead of adding a second grid.
Don't have Bolt yet? This link may be an affiliate link; it never changes what you pay.
Try BoltPart of the Bolt landing-page cluster — start from the main Bolt landing page prompt.