Hero - Image sizes

Basic image requirements guidelines

Each Hero Section must adhere to a specific image requirement depending on the type of Hero. See the detailed breakdown for each section option below.

Standard Hero image requirements

The Standard Hero requires two images, one for desktop (21:9 ratio) and one for mobile (16:9 ratio). You must be mindful of contrast requirements, and make sure that your image has suitable gradient overlay for the side that has content.

Desktop recommended minimum image size - 1044 x 522px
Mobile recommended minimum image size - 799 x 1420px

Split Hero image requirements

The Split Hero requires just one image for both for desktop and mobile (4:3 ratio).

Recommended minimum image size - 800 x 600px

Immersive Hero image requirements

The Immersive Hero requires two images, one for desktop (16:9 ratio) and one for mobile (9:16 ratio). You must be mindful of contrast requirements, and make sure that your image has suitable gradient overlay for the side that has content.

Designers should ensure the focal point of each image is centred, as the image will scale to fill the entire viewport. This means the full image is rarely visible, but centring the key visual element guarantees it remains in view across different screen sizes and aspect ratios.

Desktop recommended minimum image size - 1600 x 900px
Mobile recommended minimum image size - 799 x 1420px

Carousel Hero image requirements

Please see the Carousel Component for full requirements.

Desktop recommended minimum image size per slide - 1248 x 742px (Ratio 21:9)
Mobile recommended minimum image size per slide - 967 x 1720 px (Ratio 9:16)