- 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.
Style
Accessibility
As you use and customize this element, ensure it continues to follow the Accessibility 101 guidelines.
See Also
Further Reading
Related Components
Version History
| Date/Time of Change | Who Made the Change | Change Details |
|---|