Image Hero
The Image Hero tops home and landing pages. Use sparingly, and only when brand specific typography and layout are essential to the meaning being conveyed.
Unlike the other hero options, Image Hero is a recommended standard HTML pattern rather than a packaged UMD web component.
Dos
Use appropriate alternative “alt” text that describes the image and repeats the text displayed on the image
Use a high-resolution, large, horizontally formatted image
Be mindful of the image crop. The aspect ratio of the uploaded image will appear across all screen sizes
Test uploaded images on mobile devices to verify text size is readable when scaled
Don'ts
Avoid small text in the hero. The image will size to the device, so small text on desktop display will be unreadable on mobile
Don’t use large amounts of text
Don’t use low-resolution or small images. The images will not stretch to fit the display
Variations
Accessibility Requirements for Use
- Page title: Include a page-level <h1>. If the title only appears inside the image, provide an equivalent visually hidden heading
- Alternative text: Describe the image’s purpose and any meaningful text that is not otherwise available on the page
- Responsive testing: Verify that text embedded in the image remains readable on mobile and at 200% zoom; text inside an image cannot reflow independently
- Contrast: Ensure text included in the image maintains sufficient contrast against its background
Content
Recommended media sizes
Hero image
2000px × 720px**
Max file size
15MB
** Recommended minimum dimensions
Layout
Images use intrinsic sizing and aspect ratios.
Animation
Animated gifs are not supported in this hero style.
Guidelines
- Images do not stretch to width of window; maximum width is determined by intrinsic image size
- Images max width is to the container
- Any calls to action or additional text should be included in another component below the hero
