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