CB-HRO-001

Hero Banner

CB-HRO-001 is our foundational 🦸 hero banner, typically used on landing pages to create strong, visually impactful headers.

It’s designed to set the tone, establish hierarchy and guide users towards primary actions from the very top of the page.

Flexible by design, not every field needs to be populated. Different combinations of content and settings create distinct variants — from bold, conversion-led headers to more editorial introductions — all built from the same structured foundation.

Content Block Fields:

  • Eyebrow
  • Heading
  • Body Copy
  • Primary Button
  • Secondary Button
  • Image

Content Block Settings:

  • Background Colours
  • Fluid Height

💪 This block flexes ↓

With image

Hero Banner with BG Image.

This variant has all the bells and whistles, the eyebrow, the headline, a background image and both the primary and secondary buttons in use. 

And yes. That's a gradient fading from left to right, opaque to transparent, to make sure your text is always super legible on your image, making it accessible too.

Primary Button Secondary Button
Without image

Hero banner without image, supplementary background

This variant has all the bells and whistles, but we've (🎤) dropped the background image for a BG colour.

Primary Button Secondary Button
Without image

Hero banner without image, light background

This variant has all the bells and whistles, but we've (🎤) dropped the background image for a BG colour.

Primary Button Secondary Button
Without image

Hero banner without image, dark background

This variant has all the bells and whistles, but we've (🎤) dropped the background image for a BG colour.

Primary Button Secondary button
Without image

Hero banner without image, bright background

This variant has all the bells and whistles, but we've (🎤) dropped the background image for a BG colour.

Primary Button Secondary Button
Be like water 💧

Fluid height hero with image.

Same content block with the 'fluid-height' setting switched on so it resizes to the height of the content.

So fluid 💧

Fluid height. No Image. Light BG Colour.

Same content block with the 'fluid-height' setting switched on so it resizes to the height of the content. Mo image but a BG colour instead.

So fluid 💧

Fluid height. No Image. Dark BG Colour.

This is the same content block again, with the 'fluid-height' setting switched on so it resizes to the height of the content inside ... and this time with no image just a BG colour. 

So fluid 💧

Fluid height. No Image. Bright BG Colour.

This is the same content block again, with the 'fluid-height' setting switched on so it resizes to the height of the content inside ... and this time with no image just a BG colour.