Breakout Grid

Usage

Breakout Grid presents a central theme at the top, then breaks out into a row of supporting cards below. Use it to supplement existing page content, highlight numbered points, or turn a single idea into a scannable list.

The layout has three layers:

1. Top bubble — a circular panel with your Icon, Headline, and sizing controls (Bubble Size, Icon Size).
2. Transition image (optional) — a full-width image between the bubble and the card grid. Hidden below the extra-large breakpoint so mobile layouts stay compact.
3. Cards grid — one to five cards in a responsive grid. Column count follows the number of cards you add.

All fields live in the block sidebar. Select the Breakout Grid block in the editor to edit parent settings and manage cards in the Cards repeater.

Top bubble

• Icon — image shown inside the circular bubble at the top.
• Icon Size — height of the icon in rem (0–20, default 2).
• Headline — short title under the icon inside the bubble. Rendered as an h2 with your chosen Headline Style.
• Headline Style — Customizer typography preset (h1–h6, default h4). Changes appearance only; the semantic tag stays h2.
• Bubble Size — diameter of the circular bubble in rem (0–30, default 6).

Transition image

Transition Image is optional. When set, it spans the full width between the bubble and cards on large screens. On smaller viewports the image is hidden so the bubble flows directly into the card grid.

Cards

Add between one and five cards with Add Card. Each card includes:

• Label — short badge text (default 1). Shown on a primary-colored pill. Use numbers, letters, or short tags.
• Headline — card title, rendered as an h3 with Card Title Style (default h4).
• Body — rich text with the Dirigible toolbar. Media upload is disabled; use inline formatting only.

Card Title Style and Card Label Style set Customizer typography presets for card titles and labels (h1–h6 or strong). Defaults are h4 for titles and h2 for labels.

The grid uses a {count}-per-row class based on how many cards you have, so one card is a single column and five cards spread across five columns at appropriate breakpoints.

Block width

Breakout Grid supports Wide and Full alignment from the block toolbar and defaults to Wide.

• Wide — uses more horizontal space than default content width.
• Full — spans the full page width; adjacent full-width blocks sit flush with no gap between them.

Tips

• Keep the bubble Headline short — it sits inside a circle and shares space with the icon.
• Use Label for step numbers or short category tags; put the main point in each card Headline.
• Add a Transition Image when you want a visual bridge between the theme bubble and the card row on desktop.
• For a simpler list without the bubble motif, consider Structured List. For image-forward grids, see Overlay Grid or Lookbook.