@nimbus-ds/thumbnail
TypeScript icon, indicating that this package has built-in type declarations

2.3.0 • Public • Published

@nimbus-ds/thumbnail

@nimbus-ds/thumbnail

The Thumbnail component allows us to present thumbnails of images.

Installation

$ yarn add @nimbus-ds/thumbnail
# or
$ npm install @nimbus-ds/thumbnail

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

Nimbus

Readme

Keywords

none

Package Sidebar

Install

npm i @nimbus-ds/thumbnail

Weekly Downloads

0

Version

2.3.0

License

MIT

Unpacked Size

20.8 kB

Total Files

5

Last publish

Collaborators

  • nimbus-design-system
  • tiendanube