Featured Banner

A rounded-corner banner filled with a background image or a looping video. Over it sits a frosted dark card holding whatever content blocks you add — a tag, a heading, body copy, a list and buttons.

You can also turn the content card off entirely and use the section as a plain picture band, in which case you get an Aspect ratio control instead of the fixed heights.

It’s used on the product page template.

Settings

Setting	What it does
Section ID	Optional anchor, so you can link to this section with #your-id.
Show content blocks	On by default. Turn it off to show only the background image or video, with no text card over it.
Mobile overlay color	An optional colour or gradient laid over the background below 1024px. Use it to darken a busy photo so the text stays readable.
Desktop overlay color	The same, from 1024px up.
Aspect ratio	The shape of the banner — 21:9, 16:9, 4:3, 1:1, 3:4, 9:16, 9:21, Natural or Custom. Default Natural. Only appears when “Show content blocks” is off.
Background Type	Image (default) or Video. Switching this changes which media pickers appear below.
Background image	The desktop background. Only shown when Background Type is Image.
Mobile background image	An optional separate image below 1024px. Only shown when Background Type is Image.
Background video	The desktop video. Only shown when Background Type is Video.
Mobile background video	An optional separate video below 1024px. Only shown when Background Type is Video.
Desktop height (px)	Minimum banner height from 1024px up. Default 500.
Mobile height (px)	Minimum banner height below 1024px. Default 400.
Top / bottom padding (mobile)	0–10 rem, default 2 rem each.
Top / bottom padding (tablet)	0–10 rem, default 3 rem each.
Top / bottom padding (desktop)	0–10 rem, default 4 rem each.

Aspect ratio and the heights are mutually exclusive

When the content card is showing, the banner is sized by Desktop height and Mobile height, and the Aspect ratio setting is hidden. Turn the content card off and the Aspect ratio setting appears — but the heights are still there and still act as a minimum. If a ratio isn’t taking effect, check the height values aren’t larger than the ratio would produce.

Blocks

The section accepts:

• Tag — a small label above the heading.
• Title — the heading. The preset uses h2 at the extra-large size.
• Rich text — body copy.
• Buttons — one or more Button blocks.
• List — a bulleted list of points.

The preset gives you Title, Rich text, List and Buttons in that order.

Blocks stack down the card, and the last block in the list is pushed to the bottom edge of the card on desktop. That’s designed around Buttons being last, so the call-to-action sits on the card’s lower edge with the copy above it.

Keep Buttons last

If you drag another block below the Buttons block, that block gets pinned to the bottom instead and the buttons float in the middle of the card. Whatever is last takes the bottom position.

The content card is always dark

The card over the background is a dark frosted panel regardless of the page’s colour scheme, and the text and buttons inside it are automatically switched to their light-on-dark styling. You don’t need to configure anything for that, and you can’t make the card light.

This is why the overlay colours matter: if your background image is pale, the dark card will still read, but a pale image with a light-coloured overlay can wash the card out. Darken the overlay rather than trying to change the card.

Videos

Background videos are muted, loop, and do not autoplay for visitors who have reduced motion turned on in their operating system. Those visitors get a paused video with a play control in the bottom-right corner of the banner. Everyone gets that control — it’s there so the motion can be stopped.

If you upload a desktop video and no mobile video, the desktop one is used at all widths and its preview frame is used as the poster image.

The section hides itself when it’s empty

With no image, no video, and “Show content blocks” off, the section renders nothing at all rather than an empty box. That’s intentional — but it also means a banner that has silently disappeared usually just needs its media re-picked after a Background Type switch.

Tips

• Switching Background Type doesn’t clear the other media. Flip from Image to Video and your image is still saved — flip back and it returns. Handy for swapping seasonally.
• Upload a mobile image. A wide desktop hero cropped to a phone screen usually loses the subject. The mobile picker exists so you can crop it yourself.
• Set an overlay before you fight the text colour. The card’s text is fixed to light. If it’s hard to read, the fix is a darker overlay, not different copy styling.
• Keep the copy short. The card is a fixed 568px column on desktop. Long body copy pushes the buttons off the bottom of a 500px banner — raise Desktop height if that happens.