About this block
A features section laid out as a bento grid: one large card that tells your main story with an image, and smaller tiles around it for supporting points. Uneven card sizes make it easy to show which feature matters most, instead of giving every point the same weight in a plain three-column row.
When to use it
- You have one headline feature and three or four smaller ones.
- Your product is visual and you want a screenshot or photo in the features section.
- A plain icon grid feels flat and you want more layout variety on the page.
What's inside
- An intro block with an eyebrow, an h2 heading, and a short paragraph.
- A large highlight card spanning two columns, with an h3, a paragraph, and an image.
- Two smaller tiles, each with an icon, an h4, and one line of copy.
- A footer strip with a checkmark line and a button linking to more detail.
- Cards stack in one column on phones and tablets, and switch to the bento layout on desktop.
How to customize it
- Put your most important feature in the big card and use a real product screenshot, not a stock photo.
- Keep tile copy to one sentence. The tiles are meant to be scanned.
- Change the icons to match each feature, and point the button at your features or pricing page.
- Duplicate a small tile to add another point. Check the layout at desktop width after you do.
Questions
- What's a bento grid?
- A layout of cards in different sizes that fit together into one block, like compartments in a bento box. It shows a clear order of importance without extra headings.
- How does it look on mobile?
- Below desktop width the cards stack into a single column in reading order: intro, big card, then the small tiles.
- Can I use a video instead of the image?
- Yes. Delete the image in the big card and add a Video block in the same spot.