Thumbnail

We use thumbnails to display previews for images or files as either a smaller version of an uploaded image, or an icon representing the file type. If an image preview can be generated from the file (in the case of images) then display that image.
Demo and Developer GuidelinesFigma Component

Anatomy

Thumbnail

Large thumbnails are 104px. They can either be a smaller preview of an uploaded image, or it can be an icon representing the file type.

Label

You may choose to put a label over the top of a large thumbnail with a white scrim.

The label is a 24px container with an 85% opacity white background. The label sits on top of the thumbnail, and is removed at small sizes. All hover states etc. are unchanged when the label property is supplied.

The label truncates after 1 line. When the label is not inputted by the user, labels are sentence case without punctuation.

Character count limit: 18

Caption

You may choose to put a caption under the thumbnail either underneath the thumbnail (default) or pinned to the right. Captions are typically used to display a filename.

The caption truncates after 2 lines, but it will not use special truncation to show file extension.

Character count limit: 36

Types

Image Thumbnail

If an image preview can be generated from the file (in the case of images) then display that image.

Document Thumbnail

If a preview is not available, (for example a PDF) refer to the document icons pack and load an icon for the corresponding file type. If the file is undetermined, use the fallback icon-file-unknown.

States

States

Specifications

Padding

Standard Padding

Styling