Thumbnail
Thumbnails are small images, similar to avatars, used inline with text in lists, paragraphs, or just about any layout component.
Usage
Thumbnails are often used to compliment some other content. Refer to the content component guidelines for additional spacing and layout considerations.
Structure
Variations
Size
The size enforces a square container using one of several preset sizes.
Extra small
Small
Medium
Large
Extra large
| Size | Description |
|---|---|
| Extra small | 24 px |
| Small | 36 px |
| Medium | 48 px |
| Large | 72 px |
| Extra large | 96 px |
Note
When two or more thumbnails are placed next to each other, ensure spacing is applied to separate them slightly more than a typical inline block element.
Style
Style specifications are available to inspect via Abstract. The following link will take you to their web-based interface.