---
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.
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 Figma design: Image Hero](https://www.figma.com/design/YqgNlOMETaJbcI67sv8HUp/Downloadable-Components-File?node-id=124025-694&t=QgbWJ5saYwKrYwyT-1)

## Accessibility

### Built in 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

### Requirements for use

**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 | 
## 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