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

A thumbnail that displays placeholder image.

Dos and Don’ts

Do
  • Use to give visibility to content on other pages.
  • Use to show logos and photography.
Don't
  • Don’t insert images of users, if this is needed, use an Avatar instead.
  • Don’t use illustrations.

Anatomy

Thumbnail with two numbers specifying different parts of thumbnail anatomy.
  1. Container: To align the image in the center and highlight the white-space around the image.
  2. Image: The fill can be an image, placeholder icon or a fill color.

Variations

Default

Use it for logos or as previews for images that lead to primary content.

A thumbnail component with a centred, small transparent image preview.

Outline

A border can be applied to ensure the container of the thumbnail is visible.

A thumbnail placeholder with a thin border and a centred, small transparent image preview.

Modifiers

Padding

Adds extra space around the thumbnail, useful to center and add space around logos.

A thumbnail placeholder with additional space around an image preview.

Container fill

The fill behind the image is set to $container-default by default, it can be changed as needed to any container colour token.

A thumbnail placeholder with a filled background behind image preview.

Sizes

The Thumbnail component can be easily resized along the aspect ratio constraints and always in 8px increments.

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.

Thumbnail variationMin size (px)Max size (px)Corner radiusUse cases
Medium64px width and height128px width and height12pxImages and pictures on a card that will expand once the user taps on an option
Small48px width and height56px width and height8pxAs part of a list or primary logo preview
XSmall24px width and height40px width and height4pxOn top of images, corner placements
Do
An example of a correctly used thumbnail displaying a burger meal. The image is clear, properly sized, and fits within the designated thumbnail area.
Don't
An example of incorrect thumbnail usage, displaying an illustration. This is discouraged because thumbnails should contain real images, not illustrations.

Aspect ratio

1:1

The default most common ratio is 1:1. Ideal for logos and item previews.

A thumbnail (1:1 ratio) featuring a burger image.

4:3

4:3 ratio is also allowed but recommended in Medium size.

A thumbnail (4:3 ratio) displaying a burger with a side dish.

16:9

16:9 is also ideal for in card placement and reserved for high quality on brand photos.

A wide thumbnail (16:9 ratio) showing a chef assembling a burger in a kitchen.

Content

Imagery

Use always logos, product pictures or on brand photos.

Xsmall

Use for logos in information dense cases

A very small thumbnail displaying a logo of the Burgermeister franchise.

Small

Preview of items within lists or cards

A small thumbnail showing a package of Shreddies cereal.

Medium

Aimed for brand photography

A medium-sized thumbnail featuring two smiling people in a kitchen setting.

Placeholder

If an image is unavailable, a placeholder can be used to ensure there is always something visible to users.

A thumbnail placeholder with a centred small Just Eat Takeaway.com logo, indicating a missing or unavailable image.

Interactive states

Default

A thumbnail with a transparent placeholder image. Represents the default thumbnail state.

Disabled

A thumbnail with a transparent placeholder image in a faded appearance.

Examples

LTR examples

Here are some examples of Thumbnail in left to right context:

A 'Burgermeister' restaurant listing card follows a left-to-right layout, where a thumbnail of the brand logo on the left. Next to it, the restaurant name, rating, food category, delivery time, and pricing details are displayed, ensuring the thumbnail serves as a visual entry point before the textual details.
A 'Burger King' order history card, a left-aligned thumbnail of the Burger King logo is followed by order details on the right, including the delivery date, number of items, total cost, and a 'View order' link. Below the text.
A 'Double Cheeseburger' menu item card follows a left-to-right structure, where the product name, description, and price appear first. A small placeholder thumbnail is positioned on the right.

RTL examples

Resources

Figma Component
 Stable
Figma Documentation
 Stable
Web Components
 Beta
Vue [Fozzie]
 N/A
React [Snacks]
 Stable
iOS JustUI [UI Kit]
 N/A
iOS PIE [SwiftUI]
 N/A
Android PIE [Compose & Views]
 TBC