- Use to make it easier and faster to look at or manage a group of larger images.
- Use to show logos and photography.
Thumbnail
A thumbnail is a smaller version of an image or media content, used as a preview or summary of the full-sized item.
Overview
The purpose of thumbnails is to improve the user experience by offering a visual preview of the content without the need to load or display the full-sized version immediately. Thumbnails help users quickly identify items of interest, making it easier for them to choose which items they want to view in more detail.
Thumbnails are commonly used in cards, image grids, file managers, and various other scenarios to provide users with a quick overview of multiple items.
Dos and Don’ts
- Don’t insert images of users, if this is needed, use an Avatar instead.
- Don’t use illustrations.
Anatomy
- Container: To align the image in the center and highlight white-space around the image.
- Image: Placeholder for the image to be inserted.
- Background color: Defaults to white, update it based on PNG needs or themes.
Variations
Default
Use it for logos or previews of bigger images.
Outline
A border can be applied to ensure the container of the thumbnail is visible.
Modifiers
Padding
Adds extra space around the thumbnail, useful to center and add space around logos.
Container fill
The fill behind the image is set to $container-default by default.
Sizes
Thumbnails have 3 main sizes to account for corner radius readability. XSmall, Small, and Medium, each of them with maximum and minimum widths and heights to signal where it’s necessary to change into the variant with a different corner radius.
The following table outlines the available Thumbnail sizes, and where they should be used across our products.
| Thumbnail size | Min size (px) | Max size (px) | Corner radius | Use cases |
|---|---|---|---|---|
| Medium | 64px width and height | 128px width and height | 12px | Images and pictures on a card that will expand once the user taps on an option |
| Small | 48px width and height | 56px width and height | 8px | As part of a list or primary logo preview |
| XSmall | 24px width and height | 40px width and height | 4px | On top of images, corner placements |
Aspect ratio
1:1
The default most common ratio is 1:1. Ideal for logos and item previews. Stick to 8px increments when resizing the component.
4:3
4:3 ratio is also allowed but recommended in Medium size. Stick to 8px increments for the width.
16:9
16:9 is also ideal for in card placement and reserved for high quality on brand photos. Stick to 8px increments for the width.
Content
Imagery
Use always logos, product pictures or on brand photos.
Placeholder
If an image is unavailable, a placeholder can be used to ensure there is always something visible to users.
Interactive states
Examples
LTR examples
Here are some examples of Thumbnail in left to right context:
RTL examples
Resources
| Stable | |
| Stable | |
 Web Components | Planned |
 Vue [Fozzie] | N/A |
| Stable | |
 iOS JustUI [UI Kit] | N/A |
 iOS PIE [SwiftUI] | N/A |
 Android PIE [Compose & Views] | TBC |
