Skip to main content Red Hat Design System logo Contribute on Github

Video thumbnail


A Video thumbnail is a graphical preview of a video overlayed with a play button. When it’s selected, a video player modal will be displayed so a user can watch the video at a larger size.

Sample pattern

Video thumbnail


A video thumbnail is a combination of a graphic with a slightly transparent play button on top. A video thumbnail can also include an optional caption underneath that explains what the video is.

Video thumbnail specs


Video thumbnail light theme Video thumbnail dark theme


A video thumbnail can include either a light or a dark play button, depending on the image underneath. If an image is lighter, use a dark play button for accessibility and vice versa.

Play button on light theme Play button on dark theme


A video thumbnail can be used to indicate that a video can be played and using a caption underneath isn’t required.


A video thumbnail can be used in most layouts that have enough space to accommodate a small image with a play button on top. A video thumbnail used in a card is a good example of a minimum size.

Specs of video button thumbnail


An optional descriptor caption can be placed underneath the video thumbnail, it can be left- or center-aligned, depending on how the video is oriented.

Character counts

A caption should be limited to 150 characters.

Best practices

Don't reposition the play button.

Don't reposition play button

Don't change the aspect ratio of a video thumbnail.

Don't change aspect ratio


When a video thumbnail is smaller than six columns, selecting the play button triggers a Video player modal where a larger version of the video will play on top of a background overlay.


When a video thumbnail is larger than six columns, the video will play inline on the page.

Responsive design

A video thumbnail changes size, but it should maintain its aspect ratio across all screen sizes. The caption also maintains the same text size, but changes alignment to match the video thumbnail.

Desktop, centered

Video thumbnail centered

When centered, the video thumbnail and caption should span six grid columns

Video thumbnail sides

When aligned on the left or right edge of the grid, the video thumbnail and caption should span five grid columns


Video thumbnail on mobile

Interaction states

The only interactive element in a video thumbnail is the play button. For more information about modal interaction states, see Video player modal.


Video thumbnail default state


Video thumbnail focus state


Video thumbnail hover state


Video thumbnail active state
Video thumbnail hover state light
The dark play button background becomes 25% darker on hover
Video thumbnail hover state dark
The light play button background becomes 25% lighter on hover


A video thumbnail uses space tokens to define spacing values between elements.

Video thumbnail spacing specs
Example Token Description
24 --rh-space-xl 24px spacer

© 2021-2024 Red Hat, Inc. Deploys by Netlify