HERO MODULES

Convey the value of a page and guide customers to engage

Hero modules act as the primary, attention-grabbing element at the top of every page. Each variant of the hero module is designed to engage visitors, concisely communicate the main value proposition or theme of the page, and lead them towards a primary action or deeper engagement with the site.

Variant 1

Desktop

Mobile

When to use

This variant is designed to be used only on Level 1 pages, which sit directly under Home in the sitemap, e.g. About us, 1st level of Industries, Brands. The expressive text styling paired with an equally prominent image demand that this module be reserved only for those highest level category pages.

Variant 2

Desktop

Mobile

Desktop

Mobile

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

Variant 3

Desktop

Mobile

When to use

This variant is designed to be used on lower level detail pages, where the page presents a singular content piece rather than an overview of items. The variant’s simplicity succinctly communicates the content that is on the page, and allows the customer to dive right in.

Homepage

Desktop

Mobile

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.

Hero - Events and webinars

Desktop

Mobile

When to use

This variant is designed to be used on events and webinar pages. The hero variant can include a number of details specific to events and webinars - such as date and time, location and number of participants.

Hero - Gated resources

Desktop

Mobile

When to use

This module can be used for the gated content pages such as White papers, Case studies and Webinars. For the ungated views, please refer to one of the following guides:

Hero - Article and publication (ungated)

Desktop

Mobile

Desktop

Mobile

When to use

Use an Article hero when you want to create a visually striking and informative introduction at the top of an article or ungated document page, effectively engaging readers by showcasing essential information such as tags, information about the author and read time.