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
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
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: 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.