Breakout Grid
Usage
Breakout Grid puts a main idea in a circular bubble at the top, then breaks it out into a row of supporting cards below. Use it for numbered steps, key points, or services that roll up to one theme.
The layout has three parts:
- Top bubble: a circle holding your Icon and Headline.
- Transition image (optional): a full-width image between the bubble and the cards, shown on large screens only.
- Cards: one to five cards in a row. The number of columns matches the number of cards.
Select the block to edit everything in the sidebar, including the Cards list.
Top bubble
- Icon: the image inside the bubble.
- Icon Size: the icon's height (default 2).
- Headline: a short title under the icon.
- Headline Style: which heading look to use (default h4). This changes the look only; the headline's place in the page outline doesn't change.
- Bubble Size: how wide the circle is (default 6).
Transition image
Transition Image is optional. On large screens it spans the full width between the bubble and the cards. On smaller screens it's hidden, and the bubble leads straight into the cards.
Cards
Add one to five cards with Add Card. Each card has:
- Label: short text on a colored badge (default
1). Use it for step numbers, letters, or short tags. - Headline: the card title.
- Body: the card text, with basic formatting.
Card Title Style and Card Label Style set the heading look for every card's title and label. Titles default to h4 and labels to h2.
Block width
Breakout Grid supports Wide and Full alignment and defaults to Wide.
Tips
- Keep the bubble Headline short, since it shares a circle with the icon.
- For a simpler list without the bubble, try Structured List. For image-led grids, see Overlay Grid or Lookbook.
Screenshots
Front-end
-
The bubble, transition image, and card row on the live page.
Editor
-
Icon Size sets how tall the icon is inside the bubble. -
Headline Style picks the heading look for the bubble headline. -
Each card has a Label, Headline, and Body.
Settings
Breakout Grid
The image shown inside the circle at the top.
The main idea, shown inside the circle under the icon.
The heading look for the bubble headline. Changes the look only, not the page outline.
How wide the circle at the top is. Make it bigger if the icon and headline feel cramped.
Optional full-width image between the circle and the cards. Shown on large screens only.
The heading look used for every card title. Changes the look only, not the page outline.
The heading look used for every card's label badge.
Add one to five cards, each with a Label, Headline, and Body.
The main idea, shown inside the circle under the icon.