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.
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
Responsive Design
The component scales in relation to the to the screen size to prevent truncating content and reflows properly when zoomed up to 200% without horizontal scrolling WCAG 1.4.10: Reflow
Image
Provide effective alt text of the image that is concise and relevant. Avoid phrases like “image of” since screen readers often already announce the type of element. WCAG 1.1: Text Alternatives
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
