This hero module is designed for use on Level 1 pages only. Some pages on this level include Products, Equipment, and Industries. The expressive text style and balanced composition communicates to the customer that they are viewing a high level page.
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
While choosing the image, be mindful of the image ratio and how the image will be cropped to the designated area.
Image ratio: 1:1
Headline
The campaign headline is divided onto two lines (line 1 with regular font and line 2 with expressive font)
Line 1 - character limit: 23
Line 2 - character limit: 14
Intro text
Body: 250 - Preferably written in one paragraph
Colorways
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.
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 and text or Full width text + image modules below it.
Examples of use
The expressive font styles makes for interesting compositions and strong brand presence, but implementing it takes manual effort. The pitfall of the expressive styles are its varying widths and space consuming attributes. The expressive style can be implemented on certain modules that needs visual prominence. Read more about typography.
DO: Use narrow styling for long headlines with many words (the text should fit in 3 lines)
DO: Be careful when using long words.
DO: Use bold styling of the expressive typeface when the header is only one word
DON’T: Break the words in two lines. Try using in these cases the condensed styling.
DON’T: Use only one style of expressive typeface for the entire header when it includes more than one word.
DON’T: Use condensed styling of the expressive typeface when the header is only one word. Use bold instead.
DON’T: Use the same pre-header and header.