Layout and highlight blocks
These blocks build the visual structure of a page — hero-style promo sections, highlight strips and card layouts. Most of them share the same small set of header fields, so it's worth knowing that pattern once rather than per block:
- Subtitle — a small label above the heading.
- Title — the heading itself. Bold text inside it renders in your site's accent color (select the text and press Ctrl+B / ⌘+B; Shift+Enter for a line break within it).
- Description — a short block of body text under the heading.
- Decoration Color — Blue, Red or Cream. A small design accent, not the whole block's background.
- Layout — Horizontal, Vertical or Center, when the block offers a choice. This controls how the heading and any image are arranged, not the content itself.
Below, "the usual header fields" means this set. Only the differences are called out per block.
Banner
A full-width promotional section: a background image (or a looping muted background video) with the usual header fields and up to 2 buttons laid over a dark overlay. This is the block to reach for when a page needs a large, photo-led opening statement — a top-of-page hero or a mid-page call-out.
Fields that matter: background Image or Video (video autoplays, muted, looped — keep it short and under the stated size limit), the usual header fields, up to 2 buttons.
Use Banner when the section is a single, static statement. Use Slider instead when you have several images or messages to rotate through in the same spot.
Slider
A row of full-width slides that visitors can page through — arrows and dots appear once there's more than one slide. Each slide is its own background image plus the usual header fields (Layout is fixed to Vertical per slide), so every slide can carry its own heading, subtitle, description and buttons.
Fields that matter: Slides (array) — each slide needs a Background Image; the rest of a slide's fields are optional.
Use Slider when you want to rotate through more than one hero-style message in the same spot. For a single message, use Banner instead — it's simpler and doesn't ask a visitor to page through anything.
Feature Section
A half-image, half-text section: a required Image fills one side, the usual header fields (with up to 2 buttons) fill the other. Theme switches the section between Light and Dark background styling.
Fields that matter: Theme (Light/Dark), Image (required), the usual header fields, up to 2 buttons.
Use Feature Section when you want one photo paired with a paragraph and a call to action — a single "why this matters" moment. For a photo with a longer, freely-formatted write-up instead of a short header/description pair, use Image & Text (see Text, media and embed blocks).
Color Cards
A row of 2–4 accent-colored cards, each with an icon, a title, a description and a link. The usual header fields sit above the row (Layout defaults to Horizontal).
Fields that matter: the usual header fields, Cards (2–4 required) — each card is an icon, a title, a description and a link.
Use Color Cards when you want a small set of short, equally-weighted options side by side — for example, "ways to get involved" or a handful of programme highlights.
Split
Exactly two side-by-side panels, each with its own Background color (Blue, Dark Blue, Red or Cream), a bold title, a description and up to 2 buttons. There's no header row above the panels — the two panels are the whole block.
Fields that matter: Panels (exactly 2) — each panel is a Background color, Title, Description and up to 2 buttons.
Use Split when you want two contrasting messages or calls to action set directly against each other — for example, "Join" next to "Renew." For more than two options, use Color Cards instead.
Icon Grid
Up to 4 items in a row, each shown as either an icon (choose from the built-in icon set, or upload your own to override it) or a number — set with Item Style. Optionally set a Background Image, which adds a dark overlay behind the whole block.
Fields that matter: Item Style (Icons or Numbered), optional Background Image, the usual header fields, Items (1–4) — each with an icon/number, a title and a description.
Use Icon Grid when you're listing a short set of steps, benefits or features that each need a small visual plus a line or two of text. Use Statistics instead if what you're showing is actually numbers (member counts, years, dollar figures) rather than steps or benefits.
Statistics
Up to 4 big numbers on a red band, each with an optional icon and a short label underneath the number — for example "150,000+ / Members." No heading row; the numbers are the whole block.
Fields that matter: Items (1–4) — each is an icon (optional), a Number (as text, so you can write "150,000+" or "1920" exactly as you want it shown) and a Description.
Design note: this block is built to sit directly above another section, which may visually overlap its bottom edge on desktop. If a Statistics block looks like it's running into the block below it, that's expected — it isn't a rendering fault.
Feature Cards
Exactly two large cards side by side, each with a required background image, a title (use line breaks for a multi-line headline), a description, up to 2 buttons, and — only if the card links to a mobile app — optional App Store URL / Google Play URL fields under App Store Links.
Fields that matter: Cards (exactly 2) — background image (required), title, description, buttons, optional app store links.
Use Feature Cards when you have exactly two big, photo-led promotions to put side by side — it won't add a third. For more than two, or smaller cards, use Color Cards.
Related
- Pages and the page builder
- Text, media and embed blocks
- Images and files