---
title: Video Card
date: 2025-09-12T11:48:00-07:00
author: Zaida Jocson
canonical_url: "https://designsystem.umd.edu/components/video-cards-shorts"
section: Components
---
# Video Card

The Video Card supports "shorts," a common content type on social media and editorial sites. It leverages the browser's built-in video player.
Supports video "shorts," a common content type on social media and editorial sites. 
## Dos
- Format videos for vertical use
- Keep file size under 15MB
- Use in groups of at least 2
- Provide captioning for video sound
## Don'ts
- Don't span a vertical video full width on a page
## Variations

An uncomplicated component meant to support groupings of vertical video and use the default browser video player.Video plays without sound on hover (desktop).

[View Figma design: Video Card](https://www.figma.com/design/YqgNlOMETaJbcI67sv8HUp/Downloadable-Components-File?node-id=100810-5557&t=jxrutlJjNszjRKxe-1)

## Accessibility

### Built in accessibility

**Video**
A pause button is added for users when a video is used. WCAG 2.2.2: Pause, Stop, Hide

**Hover and Focus State - Video Card**
The actionable items each have distinctive styling on hover/focus to provide a visual cue to the user that the element is focused and there is an action that can be taken. WCAG 1.4.13: Content on hover or focus

**Color Contrast - Video Card**
A contrast ratio of at least 4:5:1 between text and background color is ensured to enhance readability.  WCAG 1.4.3: Contrast (minimum)

**Keyboard Accessible**
Users are able to use the keyboard to navigate through the menu using the ‘Tab’ key to navigate/focus and ‘Enter’ or ‘Spacebar’ to activate.WCAG 2.1.1: Keyboard This navigation is done in sequential and logical order WCAG 2.4.3: Focus Order and focus can move away from the component as needed. WCAG 2.1.2: No Keyboard Trap

**Enhanced Tap Targets - Video Card**
Play/Pause buttons and scrubber have adequate space around and in between each icon to ensure clear tap targets and prevent users from missing or accidentally clicking other social targets. WCAG 2.5.5: Tap Targets

### Requirements for use

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

**Audio description - Video Card**
Audio description is provided for all prerecorded video content in synchronized media.

## Content

Recommended media sizing
| Dimensions | 1080px × 1920px | 
| File size | 15MB | 
## Layout

Use in groups of at least 2, but a 4-column grid is recommended when placed in a full-page-width section so video doesn't size up too much.

[View Figma design: Video Card - anatomy](https://www.figma.com/design/YqgNlOMETaJbcI67sv8HUp/Downloadable-Components-File?node-id=100810-5557&t=jxrutlJjNszjRKxe-1)