---
title: Image Hero
date: 2023-12-17T12:29:00-08:00
author: Zaida Jocson
canonical_url: "https://designsystem.umd.edu/components/image-hero"
section: Components
---
# 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.
A simple image option when all information can be conveyed in a single image.
## 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

[View component playground: Image Hero](https://playground.designsystem.umd.edu/?path=/story/components-heroes-image-hero--standard)

## Accessibility Requirements for Use

Page title: Include a page-level <h1>. If the title only appears inside the image, provide an equivalent visually hidden headingAlternative text: Describe the image’s purpose and any meaningful text that is not otherwise available on the pageResponsive testing: Verify that text embedded in the image remains readable on mobile and at 200% zoom; text inside an image cannot reflow independentlyContrast: Ensure text included in the image maintains sufficient contrast against its background

## Content

Recommended media sizes
| Hero image | 2000px × 720px** | 
| Max file size | 15MB | 
## Layout

Images use intrinsic sizing and aspect ratios.

[View Figma design: Image Hero - Anatomy](https://www.figma.com/design/YqgNlOMETaJbcI67sv8HUp/Downloadable-Components-File?node-id=124025-694&t=QgbWJ5saYwKrYwyT-1)

## 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 sizeImages max width is to the containerAny calls to action or additional text should be included in another component below the hero