Bento Grid
An asymmetric bento feature grid with a custom SVG illustration in every cell: analytics, collaboration, automation, security, and integrations. A clean, minimal overview.
An asymmetric bento feature grid with a custom SVG illustration in every cell: analytics, collaboration, automation, security, and integrations. A clean, minimal overview.
Search blocks by description or jump to a page.
The source for every Modern SaaS block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Bento Grid opens with a left-aligned heading and subheading, then fills the space below with an asymmetric six-column grid of five feature cells. On wider screens the layout tiles precisely: a wide analytics cell sits beside a tall collaboration cell that spans two rows, two smaller cells for automation and security fill the gap beneath, and a full-width integrations cell anchors the bottom. Each cell carries an icon badge with an uppercase label, a title, a short description, and a self- contained inline SVG illustration. The wide and full-width cells place the illustration beside the text; the stacked cells place it above.
Every cell is independent, so you can rewrite the heading, swap the five feature titles and descriptions, or remove a cell without disturbing the others. The illustrations are plain SVG markup with no external dependencies, so they adapt to light and dark themes automatically.
Reach for this block on a features or capabilities page where you need to show five distinct areas at once without a flat list feeling sparse. For a project management workspace it works especially well as the section that maps the core pillars of the product, since the varied cell sizes give each capability its own visual weight while the grid keeps everything organized. It has more density than a three-column benefits row and more structure than a free-form alternating layout.
A natural flow around it on a Modern SaaS page:
Before
After
The grid covers five feature categories out of the box, but the same frame works for many kinds of content:
Tip: keep each description to two short sentences so the cells stay balanced and no single feature dominates the visual weight of the grid.