Skip to main content

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

A thumbnail that displays placeholder image.

Resources

Figma Component
 Available
Figma Documentation
 Available
Web Components
 Planned
Vue [Fozzie]
 N/A
React [Snacks]
 Available
iOS JustUI [UI Kit]
 N/A
iOS PIE [SwiftUI]
 N/A
Android [XML views]
 TBC
Android [Jetpack compose]
 TBC