Components

Hero

sketch:Readyscss:Ready

A hero is an element that you can use on the top of your pages to add a visual or draw the attention of the user on a specific message.

Variations

The hero pattern is provided with three different versions to cover many cases.

Title only hero

This is the most minimal hero case. This version is best used when you need to introduce a page with just an image and a title on top of it. There are two versions of the case that are left aligned or centered.

Left aligned

Centered

Title with text hero

This is the most common hero case we recommend to use. This version is made of a headline, a text content and a background image. There are also two versions of the case that are left aligned or centered.

Left aligned

Centered

Title with text and boxed content

In specific cases, you need to take some content apart of the overall page layout, to put a feature forward, for example. That is why we provide a hero version with a boxed content either centered under the text content or aligned to the right.

Good to know

This following case with a boxed content in the hero can become hard to understand for your user if the content in the box is too important. Remind that this boxed content must be clear and add a real value for the user.

Be aware

Please note that a hero must not be based on the image but on the text content.

Do's and don'ts

Don't use less than G800 for the overlay grey value to have better readable content.
Don't use white backgrounds for your heroes.