Bento Grid

About this block

Bento Grid opens with a centered heading and a short subheading paragraph, both constrained to a narrow column so the intro reads at comfortable width. Below that sits an asymmetric grid: a large card on the left spans two rows and holds an SVG dashboard mockup above a title and description, while two smaller icon tiles fill the right column. A final row of three equal icon tiles runs the full width beneath everything. Each smaller tile follows the same structure: a tinted icon badge, a bold title, and a one-line description.

Every card is independent. You can rewrite the heading, swap any of the five icon tiles in and out, or replace the dashboard mockup with your own SVG without touching the layout. The two side tiles and three bottom tiles are rendered from plain arrays, so adding or removing items is a one-line change in each list.

When to use

Reach for this block when you need to show the breadth of a platform at a glance rather than drilling into any one capability. For a project management workspace, the large card handles the headline view (the live dashboard your team opens every morning) while the smaller tiles call out the surrounding workflow features. It fits naturally in the middle of a product marketing page after a hero that names the problem, and it holds more visual weight than a plain icon grid without needing the depth of a stacked panel layout.

A natural flow around it on a Marketing Pro page:

Before

• A hero section to introduce the product and name the audience
• A How It Works block so readers understand the flow before seeing the full feature set

After

• Cards With Mockups to zoom in on two or three of the features introduced here
• A testimonials section to back up the feature claims with real voices

What you can display

One practical frame for the large card is your product's primary reporting or status view. A few other ways to fill the grid:

• Core workflow stages. Assign each icon tile to one step in your platform's pipeline so visitors map the whole process in a single scan.
• Integration highlights. Use the icon tiles to call out the tools your product connects with, keeping the large card for the unified view that ties them together.
• Team roles and permissions. Show how different members interact with the workspace, with the large card illustrating the shared view everyone works from.

Tip: keep the large card's dashboard mockup simple; three or four metric cells and a bar chart read clearly at the rendered size without crowding.