Opening a page: banners, titles, badges

The components in the Titles category: Grid hero, Full-screen hero, Title / tagline, Badge, and Note. How to highlight a word in a title, and where to set the background photo.

These components open a page or a section: they set out the title, the tagline, and the first button. They are all found in the Titles category of the palette.

Grid hero#

The big page opener, left-aligned and understated: an optional overline, the title, a tagline, buttons, and key figures (“120” + “clients supported”) displayed across three columns. Left alignment is its defining trait: there is no alignment setting.

Full-screen hero#

The centred opener, designed for a full-frame photo: overline, title, tagline, and buttons. The photo itself is not set in the component but in the background of its section (Image background, with effect and overlay): without an image background, the block looks bare. See A section’s background.

Title / tagline#

The standard section title: a title and an optional tagline. This is usually the component that carries the main title of the page (checkbox in the advanced options). See Links and anchors.

Badge#

A small highlight pill to place above a title (“New”, “Since 1987”): a text, an optional icon, and an alignment setting.

Note#

A discreet line beneath a block (“No commitment”, “Prices incl. VAT”): a text with light formatting (bold, italics, link) and an alignment setting.