Skip to main content

​
Bento features

Bento Features is the flexible grid you reach for when a page needs to communicate a list of capabilities without a rigid grid. Cards can span different column widths, and the layout responds to a handful of layout modes.
Bento features section

Bento feature grid with varied card sizes

​
Layouts

The layout mode is set in the section’s Style tab. Changing it never changes your content — the same cards re-flow.

​
The Sonic Void card

A distinctive full-width callout card with its own gradient treatment, used to break up the grid and create visual rhythm. It has its own settings — heading, body, an optional image and a link.
Sonic Void is a supporting card. If you use it, keep it to one per section. Two competing gradient cards in the same viewport cancel each other out and the page stops having a focal point.

​
Card behaviour

The hover treatment is desktop only. On touch devices there is no hover state, so the card is static — which is correct, since a hover that can never be triggered is wasted CSS.

​
Writing good feature cards

A feature card answers one question: “Why is this better than the alternative?”
The good version is specific, quantified, and says what the shopper can do with it. The bad version could describe any product on the shelf.

​
When to use this section

Use it for

Feature parity lists, capability overviews, “what’s in the box” style breakdowns, and the section between the hero and a deep-dive section.

Don't use it for

Reviews (use Product Reviews), spec comparisons (use Comparison Table), and long-form storytelling (use Rich Text or Image with Text).

Product reviews

Social proof, laid out cinematically.

Content sections

FAQ, rich text, image with text, video and more.