---
title: "Thumbnail | GoodBarber's Design System"
description: "# Anatomy\r\n\r\n  \r\n\r\n## Aspect ratio\r\n\r\n### Users selected ratios\r\n\r\nThe user will be able to choose among these 3 predefined ratios for the size of the preview thumbnails:\r\n<span style="
canonical_url: "https://www.goodbarber.com/uxdesign/thumbnail/"
lang: pt
---

# Thumbnail | GoodBarber's Design System

[Design System](https://pt.goodbarber.com/uxdesign/)

![](https://portal.ww-cdn.com/portal_static/svg/fapro/solid/grid.b60a521defb3.svg)

[https://pt.goodbarber.com/uxdesign/](https://pt.goodbarber.com/uxdesign/)

![](https://portal.ww-cdn.com/portal_static/svg/fapro/regular/chevron-up.4b0a6b4e88c8.svg)

![](https://portal.ww-cdn.com/portal_static/svg/fapro/regular/chevron-down.e16b9408a703.svg)

![](https://portal.ww-cdn.com/portal_static/svg/fapro/solid/grid.b60a521defb3.svg)

[Overview](https://pt.goodbarber.com/uxdesign/)

- [Foundations](/uxdesign/foundations/)
* Layout
+ [Grid](/uxdesign/grid/)
+ [Spacing](/uxdesign/spacing/)
+ [Breakpoints](/uxdesign/breakpoints/)
+ [Layers](/uxdesign/layers/)
* Graphic elements
+ [Color](/uxdesign/color/)
+ [Typography](/uxdesign/typography/)
+ [Images Aspect Ratios](/uxdesign/images-aspect-ratios/)
+ [Icons](/uxdesign/icons/)
- [Atomic Components](/uxdesign/atomic-components/)
* [Color atom](/uxdesign/atom-color/)
* [Font atom](/uxdesign/atom-font/)
* [Image atom](/uxdesign/atom-image/)
* [Gradient atom](/uxdesign/atom-gradient/)
* [Shape atom](/uxdesign/atom-shape/)
* [Shadow atom](/uxdesign/atom-shadow/)
* [Size atom](/uxdesign/atom-size/)
* [Border atom](/uxdesign/atom-border/)
* [Blur atom](/uxdesign/atom-blur/)
* [Overlay atom](/uxdesign/atom-overlay/)
* [Immersive feedback atom](/uxdesign/atom-immersive-feedback/)
- [UI Components](/uxdesign/ui-components/)
* [Background](/uxdesign/background/)
* [Text Field](/uxdesign/textfield/)
* [Dropdown](/uxdesign/dropdown/)
* [Date & Time Picker](/uxdesign/date-time-picker/)
* [Checkboxes & Radio Button](/uxdesign/checkboxes-radio-button/)
* [Button](/uxdesign/button/)
* [Thumbnail](/uxdesign/thumbnail/)
* [Form](/uxdesign/form/)

# Thumbnail

UI Components

Thumbnails are images that provide a preview of media content, such as articles, pictures, and videos. The ratio and style options can be customized.

[https://portal.ww-cdn.com/portal_static/images/designsystem/videos/thumbnail.5d4855c7ebb9.mp4](https://portal.ww-cdn.com/portal_static/images/designsystem/videos/thumbnail.5d4855c7ebb9.mp4)

## Introduction

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](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Thumbnail-Anatomy-AspectRatio-User.c49e3e596527.png)

*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](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Thumbnail-Anatomy-AspectRatio-System.eb7d50b6fc83.png)

*Specific ratio*

#### Split thumbnails

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

![Split ratio](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Thumbnail-Anatomy-Splitted.af28cfbccb6e.png)

*Split ratio*

Some aspects of this component are covered in the section Foundations / Images Aspect Ratio / [Thumbnails](/uxdesign/images-aspect-ratios/#thumbnail)

## Properties

### Shape

Below, the [Shape atom](/uxdesign/atom-shape/) applied to the button with the types **Sharp** / **Rounded** / **Round**:

![Shape on thumbnail](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Thumbnail-Properties-Shape.9dadda3ad9e2.png)

*Shape on thumbnail*

### Border, Shadow

The [Border](/uxdesign/atom-border/) and [Shadow](/uxdesign/atom-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](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Thumbnail-Properties-Border-Shadow.839cb7e232c0.png)

*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](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Thumbnail-Layout-NoBackground.501fce016a9d.png)

*Shape rules without background - Specs*

![Shape rules without background - Proto](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Thumbnail-Layout-NoBackground-Example.d903993d2bbe.png)

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

![Shape rules with background - Specs](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Thumbnail-Layout-Background.6f241c5e2c15.png)

*Shape rules with background - Specs*

![Shape rules with background - Proto](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Thumbnail-Layout-Background-Example-1.e0fa20c78f0d.png)

*Shape rules with background - Proto*

![Shape &amp; border rules with background](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Thumbnail-Layout-Background-Example-2.5b2754c49fed.png)

*Shape & border rules with background*

![Shape &amp; shadow rules with background](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Thumbnail-Layout-Background-Example-3.b7523e54cf57.png)

*Shape & shadow rules with background*