HERO - HOMEPAGE

Exudes the brand identity and invites customers to dive in

This hero module is designed for use on Home page only. It includes a Tab menu with automatic progression.

Desktop

Mobile

Design specs

This module looks slightly different on Desktop and Mobile view. On Desktop, it has a full-width image with text and a CTA on top. On Mobile, the content is placed on a colored background below the Tab menu. The background color can’t be edited. 

Images

As the hero banner will be the first thing the user sees when they land on the website, it’s important to use inviting and high-quality images. 

While choosing the image, be mindful of the text that will be placed on top of it (Desktop). The text should be visible, therefore the Image should not be too dark, or too “busy” visually on the left hand side.

Headline

Character limit: 40

Max 3 lines of text, on 360px screens

Intro text

Body: 250 - Preferably written in one paragraph

Colorways

When to use

This module should only be used as the hero module on the home page. The purpose of this variant is to guide the users to the most important pages of the website.

Examples of use

Do's and Don'ts

DO: Use images that don’t interfere with the text on the left side - the text should be legible. 

DO: Respect maximum advised character limit. 

DON’T: Use too dark or too “busy” visually  images - they can make the text not visible. 

DON’T: Use headlines and body copy that are too long.