Page hero

On this page

Anatomy

Designer guidance

Developer guidance

Content editor guidance

Accessibility 

Support

Anatomy

Designer Guidance

When to use

Use the Page hero component when you need to:

• Introduce a page with a clear and prominent message.
• Help users quickly understand the purpose of the page.
• Provide supporting context that encourages further exploration.
• Create hierarchy at the top of landing or key entry pages.

When not to use

• Do not use the Page hero for content that does not require prominent display.
• Do not use more than one Page hero per page.
• Avoid using the hero for low-priority or supporting information.
• Do not use the hero in place of clear page structure or navigation.

How to use

Headline

• Must clearly communicate the page purpose.
• Keep short, direct, and impactful.
• Use sentence case.
• Avoid jargon or overly complex phrasing.

Subheadline

• Optional but recommended.
• Should support and expand on the headline.
• Keep concise and easy to scan.
• Avoid repetition of the headline.

Variant selection

• Choose a variant that reflects the tone and importance of the content.
• Use the confetti variant only for positive or celebratory messaging.
• Ensure sufficient contrast between text and background.

Behaviours


• Displayed at the top of the page.
• Does not repeat within the same page.
• Must scale responsively across screen sizes.
• Content should remain readable and well spaced on all devices.
• Any interactive elements (if included) must have:
  • Clear focus states
  • Consistent behaviour

Options

Default

• White background.
• Suitable for most standard page types.

Red

• Red background.
• Used to add emphasis or highlight important content.

Dark

• Navy blue background.
• Used to add emphasis or highlight important content.

Confetti

• White background with decorative confetti.
• Use for positively framed or celebratory content only (e.g. success stories, achievements).

Developer Guidance

Best practices

• Use semantic HTML and appropriate landmark structure.
• Ensure:
  • Logical content order.
  • Proper heading hierarchy (e.g. <h1> for the main page title).
• Maintain responsive layout across breakpoints.

Content Editor Guidance

Best practices

• Aim to make the title and subtitle short and easy to understand
• Write clear, user-focused headlines.
• Keep headline and supporting text concise.
• Ensure the hero reflects the overall page content accurately.
• Maintain consistency in tone across the page.
• Headline is required and should not exceed a reasonable length.
• Choose the confetti variant only for appropriate content.

Accessibility

Page hero components must:

• Use semantic landmarks to define the region.
• Ensure the main heading is correctly structured (typically <h1>).
• Meet colour contrast requirements across all variants.
• Provide clear focus indicators for any interactive elements.
• Ensure content remains readable when zoomed or resized.

WCAG Success Criteria

• 1.3.1 Info and Relationships (Level A)
  Structure and hierarchy are conveyed programmatically.
• 1.4.3 Contrast (Minimum) (Level AA)
  Text meets minimum contrast requirements across all background variants.
• 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.

Related components

Decorative hero

Homepage hero