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

Inspect component