Examples of hero banners

Banner with max content width has to be in column wrapper

Full width banner/sliders

Worked examples

These are complete, copy-paste-ready Hero blocks — paste one into the document in da.live and it works out of the box. Each is a two-column table whose first row spans both columns and is the block name (Hero, or Hero (center) / Hero (right) / Hero (center, light) …). Every row below it starts with a recognized field name in the left cell — Background Image, Background Image Tablet, Background Image Mobile, Background Image Alt, Banner Content, Hero Value Prop, Text Color, Hero Category Link, Full Width — and its value in the right cell. (Any other left-cell text is ignored, so the names must match exactly.)

Example A — Hero with three rotating banners (slider)

Three Background Image rows = three banners that auto-rotate as a slider. Each banner has its own rows beneath it (optional tablet/mobile crops, alt text, Banner Content, and — here — its own value-prop line). The category links follow at the end and are shared below the slider. This example also turns on two style modifiers — Hero (center, light).

Result: the three banners rotate automatically with dot controls; banner 1 shows its value-prop line under the copy; the four category links fill one row as equal columns on desktop (two per row on tablet, stacked on mobile). It is contained to the page width — add full-width (or a Full Width row) to make it span edge to edge.

Example B — Hero with a single banner

Just one Background Image row → a single static banner (no slider, nothing to switch off). Default styling, so the block name is simply Hero. The Hero Value Prop line shows under the banner copy.

Example C — Buttons (a complete Hero you can paste)

Buttons are not separate rows — they live inside the single Banner Content cell, as links. You don't choose a button style; the link formatting decides it: a bold link → primary (filled), an italic link → secondary (outline), a normal link → default. This whole block pastes in and works:

The first line (End-of-season clearance) is the headline, the second line is the copy, and the three links become buttons in order: Shop clearance (bold) is the primary, View all categories (italic) is the secondary, and Contact us (normal link) is a default button. Author the primary CTA first.

In da.live, make the headline's first line a real heading so it renders large. It's shown bold here only because Confluence tables can't contain headings — the rest of the cell (copy + the three formatted links) pastes across as-is.

Example D — Value-prop line (a complete Hero you can paste)

A Hero Value Prop row adds one extra line under that banner's copy. It's rich text — here a short title with a line of subtext — and there's no Icon row (the block doesn't read one). Remember it's one value-prop line per banner; a second on the same banner is ignored. This whole block pastes in and works:

To show a value-prop line on more than one slide of a slider, add a separate Hero Value Prop row under each banner (as in Example A).

Example E — Per-slide light/dark text (slider)

A three-banner slider where each slide sets its own text color with a Text Color row, so white text sits on the dark photos and dark text on the bright one. The Text Color row attaches to the banner directly above it and overrides the block default for that slide only. This whole block pastes in and works:

Result: slide 2 (the bright sky photo) renders dark text; slides 1 and 3 (darker photos) render white text. Omit a slide's Text Color row to fall back to the block default — white, or dark if the block uses Hero (light). If every slide is light/bright, it's simpler to set Hero (light) once on the block instead of a row per slide.