The Thumbnail component allows us to present thumbnails of images.
$ yarn add @nimbus-ds/thumbnail
# or
$ npm install @nimbus-ds/thumbnail
The component consists of a container with rounded corners.
We use the Thumbnail component when we need to display images in galleries, product descriptions or order details.
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
The component has example images for building prototypes, as well as a placeholder variant.
- View product images
- View image galleries
- View order detail pictures
- File uploader - Can be used when we need to upload files or images.
View docs here.