Bento Grid
Centered intro above a bento of one large dashboard card and five smaller icon tiles.
Centered intro above a bento of one large dashboard card and five smaller icon tiles.
The Marketing Pro Collection unlocks the source for every Marketing Pro block. All Access unlocks every Collection.
Already purchased? Log in
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.
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
After
One practical frame for the large card is your product's primary reporting or status view. A few other ways to fill the grid:
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.