Thumbnail

The Thumbnail component in the GoodBarber design system is a tool for displaying images in a visually engaging and user-friendly way. Its main purpose is to provide a preview of media content and drive the user to view it in full. The Thumbnail component is designed to be both visually appealing and intuitive, making it easy for users to identify and interact with media content.

It can be used in a wide range of contexts, such as displaying images in a gallery or previewing videos in a playlist.

Anatomy

Aspect ratio

Users selected ratios

The user will be able to choose among these 3 predefined ratios for the size of the preview thumbnails:
16:9 4:3 1:1

Thumbnails ratio

System Aspect Ratio

Sometimes, thumbnail sizes are not influenced by the user's choice as some layouts do not allow this.

Specific ratio

Split thumbnails

In this particular case, the base of the thumbnail is square and we split at the 3rd third.

Split ratio

Some aspects of this component are covered in the section Foundations / Images Aspect Ratio / Thumbnails

Properties

Shape

Below, the Shape atom applied to the button with the types Sharp / Rounded / Round:

Shape on thumbnail

Border, Shadow

The Border and Shadow atoms are not applied directly to the component, but to the component in which it is integrated, as in the examples below:

Border and shadow on grid cell

Layout

The appearance of the thumbnail can change depending on the component in which it is integrated:

No Background

In the example below, the list item is visually composed of a thumbnail and a text. The atom shape is applied to the 4 corners of the thumbnail.

Shape rules without background - Specs

Shape rules without background - Proto

Background

In the examples below, the list item is visually composed of a thumbnail, a text and a background. This background can have a color, a border or a shadow and in this case, visually, the atom shape does not seem to apply to the 4 corners of the thumbnail.