This hero module is designed for use on Home page only. It includes a Tab menu with automatic progression.
Desktop
Mobile
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
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: 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.