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.


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

A hero can't be used in combination with a heading Large because they share same sizes on some viewports.