Half Block (Promo Banner)

The Half Block is used to display promotional or informational content alongside an media (video / image), with optional actions and multiple visual variants.

Anatomy

Anatomy of the Half Block

#	Element type	Element name	Element description
1	Media	Hero image	The visual area on one side of the block. Adds context and supports the promo message. Square aspect ratio. Position follows Align media (left or right).
2	Text	Eyebrow	Optional short label above the title. Use for offer type, category, or urgency. Toggle with Show pretitle.
3	Text	Title	The main headline for the promo. Sets the message and hierarchy. Keep it short: one idea, one action.
4	Text	Description	Supporting body copy below the title. Gives extra context or detail. Toggle with Show body.
5	Action	Primary button	The main call to action. Uses Global Button. Toggle with Show primary button.
6	Action	Link	Optional second action. Uses Global Link. Toggle with Show secondary button.

Placement

Use the Promo Banner as a mid-page block, not as the opening component at the top of a page. Place it under a Hero, or between content blocks in the middle of the page.
It works well as a mid-page promo break, but also for storytelling when you want to combine strong media with a focused message and a clear next step.

Types

The Promo Banner has three configuration areas: overlap, media positioning, and background variant.

The media extends into the text container and overlaps its background. This creates a tighter connection between image and copy.

The media and text sit in separate areas with a clear boundary between them.
Choose overlap when you want a more integrated layout. Choose non-overlap when you want a cleaner, more structured split.

Media positioning

Media can sit on the left or right of the text block. Use this to balance the layout with surrounding content or to align the image with the page reading direction.

Left
Right

Background variants

Four background treatments are available.

Media

The Promo Banner uses 1:1 media (square aspect ratio). The image or video sits in a fixed square frame on one side of the block, with text and actions on the other.

Use photography or illustration that works at square crop. Keep the main subject centred or positioned so it remains clear when the media is aligned left or right.

The media supports the message; it should not replace it. Key information belongs in the title and description, not only in the image.