Bento grid

Large cards with a photo as the background and text on top: a headline, a line and up to two buttons. Use it to point to a few big destinations, like a season's range or a service. Choose Bento for one large card with smaller ones around it, Grid for equal cards, or One per row for wide banners.

Where to find it

In the theme editor, Add section › Bento grid. The theme starts with it on: Home page.

Settings

Setting	Choices	Shows when	What it does
Density	Follow theme · Compact · Normal · Spacious	Always	Space, columns and image shape in this section. Follow theme uses Density in Theme settings › Layout.
Text size	Default · Smaller · Standard · Larger	Always	Makes this section's text and title smaller or larger than its Density sets.
Color scheme		Always
Overline		Always
Heading		Always
Text		Always

Layout

Setting	Choices	Shows when	What it does
Layout	Bento · Grid · One per row	Always	Bento makes the first card large and fits up to four around it. More cards follow below.
Card height	Short · Medium · Tall	Always
Section width	Full width · Contained	Always	Contained draws the color scheme as a panel inside the page margins.
Color around the panel	On · Off	Section width is Contained	Off shows the page background around the panel. Color scheme colors the panel itself.
Around the panel		Section width is Contained and Color around the panel is on

Which settings reveal which:

flowchart LR
  section_width["Section width"]
  panel_ground["Color around the panel"]
  ground_color_scheme["Around the panel"]
  section_width -- "is Contained" --> panel_ground
  section_width -- "is Contained  + more " --> ground_color_scheme
  panel_ground -- "on  + more " --> ground_color_scheme

Blocks

Card

Setting	Choices	Shows when	What it does
Text size	Default · Smaller · Standard · Larger	Always	Makes the text on this card alone smaller or larger. Default keeps the section's text size.
Background image		Always
Text color over image	White · Black	Always
Overline		Always
Heading		Always
Text		Always
Link		Always	Makes the whole card clickable. Its buttons keep their own links.

Buttons

Setting	Choices	Shows when	What it does
Button label		Always
Button link		Button label is filled in	A button without a link shows only in the theme editor.
Button style	Primary · Secondary · Link	Button label is filled in	For the first button. The second one is always one step quieter.
Second button label		Button label is filled in
Second button link		Button label is filled in and Second button label is filled in	A button without a link shows only in the theme editor.

Which settings reveal which:

flowchart LR
  button_label["Button label"]
  button_link["Button link"]
  button_style["Button style"]
  secondary_button_label["Second button label"]
  secondary_button_link["Second button link"]
  button_label -- "filled in" --> button_link
  button_label -- "filled in" --> button_style
  button_label -- "filled in" --> secondary_button_label
  button_label -- "filled in  + more " --> secondary_button_link
  secondary_button_label -- "filled in  + more " --> secondary_button_link