Hero Module - Short
Use a shorter hero when scrolling to the content below is the primary goal. Consider not using a hero module at all in this case.
Image sizes for small hero:
Desktop: 2000 x 400 px
Mobile: 600 x 700 px
Engaging Title
This is a subtitle (optional, but recommended)
Here you can add some additional content. Better used for the larger heros. Ensure to bolden key words or phrases to maximise user engagement. This can also be used for subtitles above.
Hero Module - Medium
Image sizes for medium height hero:
Desktop: 2000 x 700 px
Mobile: 600 x 1000 px
Engaging Title
This is a subtitle (optional, but recommended)
Here you can add some additional content. Better used for the larger heros. Ensure to bolden key words or phrases to maximise user engagement. This can also be used for subtitles above.
Hero Module - Full Screen Height
Full screen height no matter what screen size. Use a full-screen hero when the primary goal of the page is to engage with the hero e.g. play a video within the hero. Only use this option when the content beneath is not important. The user will go to what they can see.
Image sizes for full screen height hero:
Desktop: 2000 x 1333 px
Mobile: 600 x 1000 px
Engaging Title
This is a subtitle (optional, but recommended)
Here you can add some additional content. Better used for the larger heros. Ensure to bolden key words or phrases to maximise user engagement. This can also be used for subtitles above.
Medium height with blue box (To be deprecated)
The blue box was in an older iteration of the site and we look to remove this as we standardize the look.
Use only short titles
When using a blue box
Hero with Video Background
Currently only Vimeo is supported. Large or medium height is recommended. If playing the video is the primary goal of the page, use a button in the hero and use full-screen height.
Video Hero Title
This is a subtitle (optional, but recommended)
Here you can add some additional content. Better used for the larger heros. Ensure to bolden key words or phrases to maximise user engagement. This can also be used for subtitles above.
