@nimbus-ds/thumbnail
The Thumbnail component allows us to present thumbnails of images.
Installation
$ yarn add @nimbus-ds/thumbnail
# or
$ npm install @nimbus-ds/thumbnailComponent Anatomy
The component consists of a container with rounded corners.
Guidelines
We use the Thumbnail component when we need to display images in galleries, product descriptions or order details.
Proportions and sizes
The component does not have fixed sizes, that is, its height or width can be freely defined, however there are proportions that must be respected in order to avoid distortions and inconsistencies.
- Square - 1:1
- Rectangular - 4:3 and 3:4
- Rectangular Wide - 16:9 and 9:16
- Extra Wide Rectangular - 2:1 and 1:2
Example images and placeholder
The component has example images for building prototypes, as well as a placeholder variant.
Usage recommendation
- View product images
- View image galleries
- View order detail pictures
Related components
- File uploader - Can be used when we need to upload files or images.
Usage
View docs here.
