Bento Grid Features

About this block

Bento Grid Features arranges five capabilities in mixed cell sizes, a wide lead with an SVG sparkline, a tall cell with a stacked inbox preview motif, and three compact text cells with links. The size hierarchy is the editorial, cells are sized by how often users touch the feature, and the lede says so.

The visuals are a polyline and three offset divs, illustrative garnish rather than data, so no chart dependency is taken per the collection chart rule.

When to use

Reach for this block as the primary feature overview on a home page, where five features need one section and equal sized grids would flatten their importance. Two visual cells is the ceiling, more and the bento reads as clutter.

A natural flow around it on a Marketing Pro page:

Before

• Hero making the one surface claim this grid itemizes

After

• Product tours going deep on the lead cell
• Stats for outcomes

What you can display

One strong use is your five features ranked by usage data. Other bentos:

• Use case grid. Lead cell for the primary persona, compact cells for the others.
• Platform grid. The API as the wide cell, surfaces around it.
• Content hub. A flagship guide large, supporting posts small.

Tip: resist filling every cell with a visual, the two graphics work because three cells stay quiet.