Skip to Content

HERO VARIANT 3

Communicates the content of the page

This simplest hero variant, created to present a singular content piece rather than an overview of items. Its simplicity succinctly communicates the content that is on the page, and allows the customer to dive right in.

Desktop

Mobile

Design specs

This module has only a Headline, and doesn’t have Body copy or CTA below it.

Header

Character limit: 38

Max 2 lines of text, on 360px screens

Colorways

This module can only have a white background and the font color has to be dark (#3B3B3B).

When to use

This variant is designed to be used on lower level (L3 and below) detail pages and pages with more informative function, e.g. PLP, as a headline to forms, FAQ, Search Results. These types of pages present a singular content piece rather than an overview of items.

This module should be used at the top of the page as a headline, and should not be used for content that requires long-form, paragraphic text. Instead, consider using the Tabbed content + text or Full width image + text modules below it.

Examples of use

Do's and Don'ts

DO: Use maximum advised character limit and correct text styling. Read more about typography.

DON’T: Use too long text. The headline should work as a short title. 

DON’T: Change the styling of the text. The text should always be in reduced styling and in black.