HERO VARIANT 2

Invites customers to dive in deeper from mid-level pages

This variant is designed to be used on mid-level pages, which are usually at Level 2 (e.g. Application Sub-Category pages) and occasionally Level 3. While still attention grabbing, its regular text styling and optional image indicate that the page is of lower hierarchy than those above it.

Desktop

Mobile

Desktop

Mobile

Design specs

This module has multiple colorways. In keeping with the general website color guidelines, the use of red should be judicious and mindful, taking into account its overall presence on the intended page.

Image

The image is optional in the Hero variant 2. While choosing the image, be mindful of the image ratio and how the image will be cropped to the designated area. 

Ratio: 1440: 355 (Desktop), 360:126 (Mobile) 

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 variant is designed to be used on mid-level pages, which are usually at level 2 and occasionally level 3, e.g. Application pages and Application Sub-Category pages. While still attention grabbing, its regular text styling and optional image indicate that the page is of lower hierarchy than those above it.

Use this module to direct customers to higher priority content or actions that complement or expand on the customer's current area of interest.

This module should be used at the top of the page 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 red.

DON’T: Use the same pre-header and header.