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 GuidelinesAnatomy
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.
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.
The caption truncates after 2 lines, but it will not use special truncation to show file extension.
Types
Image Thumbnail
If an image preview can be generated from the file (in the case of images) then display that image.
File Icon 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.
Variations
States (Image)
States (File Icon)
Specifications
Padding
Styling
