Hero - Usage
Basic Guidelines
The Hero Section is a prominent, visually engaging component used to introduce key content or messaging at the top of a page. Maintaining consistent hero sections across the site helps reinforce brand identity and ensures a cohesive user experience.
Content Guidance
Please refer to the Section Heading documentation for detailed guidance.
Character limits
There are no character limits on the Hero section, but we recommend being mindful when writing text over images and ensuring there is always sufficient contrast for readability.
Image ratio
Please see the image sizes page for more information on what image formats need to be provided.
Alignment
Sections are always placed at full width of the view port.
Please note: The Immersive section sits at both full width and height of the viewport.
Mobile
Desktop
The below example has been downsized proportionally to fit into this documentation.
Colour Usage
No alternative font colours may be used in this section, except in the specific case mentioned below where contrast adjustments are necessary for the Section Headline layered over the background images.
Background colour
The background of all Discovery sections must remain white as per brand guidelines. However, the Section Headline that appears over the Heros with image background (Standard, Carousel and Immersive) within the section may be changed to the light variant if needed, to ensure sufficient contrast against the background image.
The Hero Section Headline may be changed to the light variant if needed.
The background of all Discovery sections must remain white.
Optional Scrim
Both the Standard and Immersive Hero components include an optional scrim that can be enabled to enhance contrast, this is particularly useful when the image itself doesn’t provide sufficient contrast through its design.
Scrim adds contrast, keeping text readable and the focal point clear.
Lack of scrim reduces contrast, making text harder to read.