Decorative hero
The Decorative Hero is used to display a prominent section at the top of a webpage, typically containing a headline, supporting text, an eye-catching image and a link. It serves as an introduction to the page and provides extra flexibility in displaying an image.
Anatomy
Decorative hero default layout
Decorative hero float layout
The decorative hero consists of the following elements:
- Title (required)
- Supporting text (optional)
- Link (optional)
- Image (required)
Designer Guidance
When to use
Use the Decorative hero component when you need to:
- Create an engaging introduction using a prominent image.
- Enhance storytelling or editorial content.
- Set tone and emotion through imagery.
Typical use cases include:
- Stories and case studies.
- Campaign or editorial landing pages.
When not to use
- Do not use for purely functional or informational pages.
- Use the Page hero instead when:
- No strong image is available.
- The focus is primarily on messaging rather than visuals.
- Do not include more than one hero component per page.
How to use
Image selection
- Choose images that:
- Are high quality and appropriately sized.
- Support and reinforce the page content.
- Work well across different screen sizes and cropping behaviours.
- Avoid:
- Overly busy or cluttered imagery.
- Images with important details near edges (may be cropped).
Content
- The heading should clearly communicate the purpose of the page and be short, direct, and impactful.
- The supporting text should support the headline and provide context, but not repeat.
- Avoid placing critical meaning only in the image.
Behaviours
- Displayed at the top of the page under the header.
- Must not be repeated on the same page.
- Scales responsively across screen sizes.
- Any interactive elements must have clear focus states.
Options
Default variant
- Available in:
- Red
- Navy
- Suitable for immersive, full-width imagery.
Float variant
- Available in:
- Red
- Navy
- Creates a more dynamic layout with text and image visually separated.
- Suitable when the image should remain clearly framed and not cropped heavily.
Developer Guidance
Best practices
- Use semantic HTML structure.
- Ensure:
- Logical reading order.
- Proper heading hierarchy using <h1> for the heading.
- Provide visible focus styles for interactive elements.
- Maintain minimum touch target size 44×44px.
Content Editor Guidance
Best practices
- Ensure headline and image work together to tell a clear story.
- Keep headline and supporting text concise.
- Ensure tone of voice matches the style of the image.
Accessibility
Decorative hero components must:
- Ensure the main heading is correctly structured.
- Ensure content is readable when zoomed or resized.
- Provide meaningful alt text for images.
- Not rely on imagery alone to convey essential information.
- Ensure keyboard accessibility for any interactive elements.
WCAG Success Criteria
- 1.1.1 Non-text Content (Level A)
Images have appropriate alt text. - 1.3.1 Info and Relationships (Level A)
Structure and hierarchy are conveyed programmatically. - 1.4.3 Contrast (Minimum) (Level AA)
Text meets contrast requirements over backgrounds. - 1.4.10 Reflow (Level AA)
Content reflows correctly on smaller screens. - 2.4.6 Headings and Labels (Level AA)
Headings clearly describe the page purpose. - 2.4.7 Focus Visible (Level AA)
Interactive elements have clear focus states.
Support
If any accessibility issues have been found or for general questions about this component, please contact the digital team.
Send us a message