Skip to content

Components / Thumbnail

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.

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.

Inspect component

© 2020 Jack Henry & Associates, Inc. Trademark notice
Version 2.0.0-beta.5.1. Last updated December 16, 2020.