Banner
The Banner block is used to create full-width sections with a strong visual presence. It’s often used at the top of a page, but can also appear further down to separate sections or highlight key content.
The first setting in the Banner block is the Type — this determines how the block behaves and which fields are shown.
If you're not sure how to add an Banner block to your page, start with the Managing Building Blocks guide. It covers how to create a new block or add an existing one from your collection, as well as how to reorder and remove blocks within a page.
Banner Only
This option creates a visual banner only, with no text or button. It’s great when you want the image to speak for itself.
Use it for:
- A decorative or atmospheric image at the top of a page
- Section dividers that don’t need text
- A full-width image to break up content
Fields
Image
Upload a high-quality, wide-format image (ideally 2000px+). The banner is responsive and will crop differently on various screen sizes — test how your image looks at different heights.
Height
Choose how tall the banner should be:
- Small – a short strip, good for dividers
- Medium – a balanced option for most uses
- Large – more dramatic visual impact
Some images look better at different heights depending on their subject and composition — try a few to see what works best.
Padding (Toggle: Enabled / Disabled)
If enabled, padding is added above, below, left and right of the banner.
- This is useful when you want to place the banner inside a section with a background colour.
- You’ll then choose a Background colour:
default, primary, secondary, or muted — based on your site’s colour palette.
It gives the block breathing room and works well when the banner is part of a wider layout.
Left: Banner with no padding. Right: Padding enabled with secondary background.
Banner and Content
This option creates a full-width banner with text and an optional button overlaid. It’s ideal for introducing a section, highlighting a message, or adding visual interest with supporting content.
Use it for:
- Section intros with a headline and call to action
- Promotional banners (e.g. “Upcoming Litters” with a button)
- Highlighting key information with a visual
This block is not designed for homepage hero sections.
Fields
Type
Select Banner and Content.
Image
Upload a high-quality, wide-format image. This will appear behind the text and button. Make sure there’s enough contrast, or use the overlay to help with text readability.
Height
Choose how tall the banner should be:
- Small – subtle section intro
- Medium – balanced for most use cases
- Large – dramatic visual impact
Padding (Toggle: Enabled / Disabled)
Adds spacing around the banner.
If enabled, you can also apply a background colour (see next field).
Background
Even if padding is disabled, you’ll still need to select a background colour here — it’s used to calculate the overlay colour. Choose one that keeps your text easy to read over the image:
default, primary, secondary, or muted (based on your site’s colour palette).
The overlay is automatically applied with 40% opacity to help make the text readable.
Content Position
Choose where the text sits on the banner:
Center, Bottom Left, Bottom Right, Top Left, or Top Right.
Headline
The main heading that appears over the banner.
Content
An optional short paragraph under the headline — keep it concise.
Call to Action
Choose the type of content you want the button to link to:
- Page
- Breedings
- Individuals
- Articles
Based on your selection, an additional field will appear:
- CTA Page
- CTA Breeding
- CTA Individual
- CTA Article
Use this to select the specific item to link to.
Button Label
The text that appears on the button — for example, View Litter or Apply Now.
Example of a Banner and Content block with a secondary background, top right content alignment, and a CTA button linking to an internal page. The content position was chosen to complement the composition of the image. See it live on the demo site →.