Skip to main content
British Red Cross homepage

Homepage hero

The Homepage hero is a prominent element on the homepage. It features an image or video, an engaging headline, some supporting text and clear call-to-action (CTA) link. It’s primary purpose is to create a strong first impression, and capture users’ attention.

On this page

Anatomy

Designer guidance

Developer guidance

Content editor guidance

Accessibility 

Support

Anatomy

Annotated diagram of a hero component. The hero contains five elements, the first three elements are contained in a red rectangle container: 1 top left, an example of a heading, 2 below heading is a subheading, 3 a link that looks like a button, 4 on the right of the red container there is an example of a hero video, 5 a pause button in the bottom right hand corner.

The homepage hero consists of the following elements:

  1. Title (required)
  2. Supporting text (optional)
  3. Link (required)
  4. Image or video (required)
  5. Play/pause button
Figma component
Storybook component

Designer Guidance

When to use

Use the Homepage hero component when you need to:

  • Introduce the British Red Cross homepage with a clear and impactful message.
  • Communicate key campaigns, priorities, or areas of focus.
  • Inspire users to engage, support, or take action.
  • Create a strong emotional connection through imagery or video.

When not to use

  • Do not use this component outside of the homepage.
  • Do not reuse this component on landing pages or other content pages.

How to use

Image and video selection

  • Choose images that:
    • Are high quality and appropriately sized.
    • Support and reinforce the page content.
  • Video must:
    • Not contain audio.
    • Not distract from text content.
    • Support and not replace written content.

Content

  • The heading should communicate the British Red Cross mission and be short, direct, and impactful.
  • The supporting text should provide additional context to the headline.

Behaviours


  • Displayed directly below the main navigation on the homepage.
  • Only one Homepage hero should exist.
  • Component must scale responsively across screen sizes.
  • Video behaviour:
    • Play/pause control must be present.
    • Pause button shown when video is playing.
    • Play button shown when video is paused.
    • Video should not display on tablet or mobile breakpoints.

Options

  • Uses a static image as the primary visual.
  • Option to use a background video with a default fallback when video does not display.
  • Video should not display on tablet or mobile breakpoints.

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.
  • Implement responsive behaviour:
    • Hide video on tablet and mobile.
    • Serve fallback image when video is not used.

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

Support

If any accessibility issues have been found or for general questions about this component, please contact the digital team.

Send us a message

Page hero

Decorative hero