Hero styles

The hero patterns provide typographic style for a big main page heading.

They are mainly used with a picture or color in the background.

Usage

Hero styles are patterns meant to help you use consistent typographic hierarchy with the context and across responsive viewports. It's mainly reserved for users wishing to focus on tasks with added value and user experience. Text classes are families of several font-sizes and help create a hierarchy of contents.

Hero styles define three properties of a text :

• Font-size (that may vary depending on the viewport)
• Line-height (that are optimised for readability and accessibility)
• Font-weight (regular or semi-bold)

Weight and line-height variations :

Each body pattern comes with a modifier to set the font-weight to 'semi bold' and a modifier to use an alternative line-height.

Font sizes Viewport < M (680) : 34px (2.125mu ) Viewport >= M (680) : 41px (2.5625mu) Viewport >= L (1024px) : 49px (3.0625mu) Viewport >= XL-MEDIUM (1440px) : 59px (3.6875mu)

Do's and don'ts