Refine By

Masthead

  • Contents:
  • A masthead is a header and a hero image or carousel grouped together.
  • The masthead is usually the first thing the user sees when they visit a webpage.

Guidelines

 

  • Use crisp, high-resolution images for the hero images in a masthead.
  • Ensure text and CTAs overlaying a masthead are legible and have at the right contrast ratios per the AA guidelines.
    • 4.5:1 for small text
    • 3:1 for large text (18px and above)
    • Use resources such as this Colour Contrast Checker to verify the contrast ratios.
    • Consider using an image overlay filter to enhance legibility.
  • Ensure the hero image fits within the viewport on page load.

When using a carousel in the masthead, be sure to observe standard carousel best practices.

  • Keep text and CTA positions constant across slides in a masthead carousel.

Accessibility

 

As you use and customize this element, ensure it continues to follow the Accessibility 101 guidelines.

Related Elements

Version History

Date/Time of ChangeWho Made the ChangeChange Details