---
title: Media Stack
date: 2025-09-02T11:25:00-07:00
author: Zaida Jocson
canonical_url: "https://designsystem.umd.edu/components/image-stack"
section: Components
---
# Media Stack

Developed for the FORWARD campaign, the Image Stack is an interactive component used to layer images or video media.
An interactive component used to layer images or video.
## Dos
- Use high-quality images and video
- Use between 5-6 images for optimum results
- Use texture, motion blur images along with normal photos, and use these photos for the image slots that animate out of view more quickly
## Don'ts
- Don't use captions or photo credits
- Don't use low-quality images and video
- Don't use too few or too many media slots
## Variations

This component is built to allow a video feature as a main slot, which expands to take over as a user scrolls. All other media slots should be still images.

[View Figma design: Media Stack](https://www.figma.com/proto/YqgNlOMETaJbcI67sv8HUp/Downloadable-Components-File?page-id=100291%3A2332&node-id=100291-2351&p=f&viewport=3319%2C923%2C0.5&t=7hC3lPY9p8mu02K8-1&scaling=min-zoom&content-scaling=fixed)

## Accessibility

### Built in accessibility

**Responsive**
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 AlternativesDo not use an image to present text. True text should be used whenever possible, as it supports translation, is searchable, and is easier to maintain and customize. WCAG 1.4.5: Images of Text

**Video**
If you are using a video, ensure that it does not flash more than 3 times per second. Avoid large, flashing images that are bright with significant contrast between flashes. WCAG 2.3: Seizures and Physical Reactions

## Content

Recommended image dimensions
| Image/Video | 1640px × 1090px* | 
## Layout

[View Figma design: Media Stack Anatomy](https://www.figma.com/design/YqgNlOMETaJbcI67sv8HUp/Downloadable-Components-File?node-id=100291-2332&t=zgfaglBIxFTBQrBc-1)

## Animation

Animation maps to scroll - images spread out and expand as user scrolls.Full screen expand animation can be disabled with data-image-expand="false". In this case, media spread will occur, but not the full-screen takeover.

## Guidelines

Component takes between 4 and 8 images, but the recommendation is 5-6