With Bento Grid
A hero with a bento grid of feature tiles below a headline and CTA. Summarizes several capabilities at a glance on a modern SaaS landing page.
A hero with a bento grid of feature tiles below a headline and CTA. Summarizes several capabilities at a glance on a modern SaaS landing page.
Search blocks by description or jump to a page.
With Bento Grid opens with a centered badge, a large bold headline, a short subtext paragraph, and two stacked call to action buttons. Below that sits a four column bento grid of feature cards. The first card spans two columns and two rows and holds an icon, a title, a description, and a placeholder image at the bottom. Two standard cards occupy the top right cells with an icon, title, and one line of copy each. A fourth card spans two columns at the bottom right and lays its icon and text out in a horizontal row.
The headline, subtext, and button labels are all plain copy you can replace directly. The grid accepts any number of cards as long as you keep the column spans consistent; the tall left card and the wide bottom card are independent of each other, so you can swap, remove, or reorder them without touching the header section.
Reach for this block when you want a landing page opener that doubles as a feature summary. The bento grid lets a creative agency or studio present several distinct capabilities in a single above the fold view, which is more expressive than a plain headline and screenshot but less demanding than a tabbed or animated section. It works especially well when each service or capability is genuinely distinct and worth a dedicated tile.
A natural flow around it on a Marketing (Legacy) page:
Before
After
Each card in the grid is an independent slot for a capability, service, or selling point. A few ways to fill them:
Tip: keep the tall left card's image tightly cropped to the subject so it reads clearly at the smaller rendered size inside the tile.