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.

Play Video