Bento Grid

Bento Grid arranges cards in rows. Each row has two or three columns, and a card can span two columns, which gives the grid its mixed “bento box” layout.

The grid is built in three levels: Bento Grid holds Rows, each Grid Row holds Items, and an item is usually a Card.

Set it up

1. Add Bento Grid to the page. Optionally enter an Eyebrow, a Title and a short text in text above the bento box.
2. Under Rows, add a Grid Row and choose its Columns: 2 Columns or 3 Columns.
3. Under the row’s Items, add Card blocks. Rows can also hold an Industry Group or a Call To Action.
4. Optionally add Buttons below the grid.

The heading needs a title

Eyebrow and text above the bento box only appear when a Title is set.

Cards

A card has a Title and a Text, and optionally an eyebrow, a link and an image or video.

Width

Width (desktop) makes a card span 1 Column or 2 Columns of its row on large screens. In a 3-column row, a 2-column card and a 1-column card fill the row. On phones every card is full width.

Eyebrow

Eyebrow style controls what appears above the title:

Option	Shows
Tag	The Eyebrow text as a small tag.
Icon Only	The Eyebrow icon.
None	Nothing.

Link

The link appears below the text when both Link and Link label are set.

Image or video

Upload an image or a video in Image or video, in the Media group.

• Image position (desktop): Top, Bottom, Left or Right of the text. The default is Top.
• Image position (mobile): Top, Bottom or Hidden. Hidden removes the image on phones.
• Image padding adds space around the image and rounds its corners. Without it, the image runs to the card’s edges.
• For a video: Loop video (on by default) repeats it. Play when in view starts it only once half of it is visible, instead of on page load. Video poster is the still image shown before it plays.

Rows

Field	Default	What it does
Columns	2 Columns	Number of columns on large screens.
Items	required	Cards, Industry Groups or Call To Actions.
Spacing	Default	Large adds more space between items, used for the industry selection.

Items with Visible in region set are hidden outside those regions.

Field reference

Bento Grid

Field	Default	What it does
Eyebrow	empty	Small label above the title.
Title	empty	Heading. Required for the eyebrow and text to appear.
text above the bento box	empty	Short text below the title.
Anchor	empty	ID for linking to this section.
Rows	empty	The Grid Row blocks.
Buttons	empty	Link blocks centred below the grid.
Show loop	off	Decorative brand loop behind the grid.
Visible in region, Visible for languages	empty	Limit where the grid is shown. The region is checked first.
Background, Top Transition, Top Padding, Bottom Transition, Bottom Padding	Surface, Large padding	Section appearance, in the Section style group.

Card

Field	Default	What it does
Eyebrow style	Tag	What appears above the title.
Eyebrow text	empty	Text of the tag.
Eyebrow icon	empty	Icon for Icon Only.
Title	required	Card heading.
Text	required	Card text.
Link, Link label	empty	Link below the text, in the Call to action group.
Image or video	empty	Card media.
Image position (desktop)	Top	Media position on large screens.
Image position (mobile)	Top	Media position on phones, or hidden.
Image padding	off	Space and rounded corners around the media.
Loop video	on	Repeats a video.
Play when in view	off	Starts a video when it scrolls into view.
Video poster	empty	Still image before the video plays.
Width (desktop)	1 Column	Columns the card spans on large screens.
Visible in region	empty	Hide the card outside these regions.

Industry Group

An Industry Group has a Title and a list of Industry Link items. Each has an icon, a label, an optional short description and a link. Like cards, groups and links can be limited with Visible in region.