MoleculeThumbnail

> Thumbnails are images that appear on cards, highlights or detail pages. They can be shown in different sizes and appearances. There are basically two variants: logos for company logos and avatars for person images.

Installation

``sh
$ npm install @s-ui/react-molecule-thumbnail --save
`

Usage

$3


`js
import MoleculeThumbnail from '@s-ui/react-molecule-thumbnail'

return ( src='https://someImage'
alt='Some alt'
placeholder={placeholder}
/>)
`

$3

#### Shape
It can be 'SQUARED' or 'CIRCLED'. It is recommended to use squared shape for logos and circled shapes for avatars.
`js
src='https://someImage'
alt='Some alt'
placeholder={placeholder}
shape={moleculeThumbnailShape.CIRCLED}
/>
`

#### Ratio
It can have same height and width ('1:1' aspect ratio) or it can be landscape ('16:9' or '4:3' aspect ratio).
`js
src='https://someImage'
alt='Some alt'
placeholder={placeholder}
ratio={moleculeThumbnailRatio['4:3']}
/>
`
#### Size
Thumbnails are available in 4 different sizes. This sizes will be adapted depending on the screen resolution (more on Responsive).

- XSMALL
- SMALL
- MEDIUM
- LARGE

`js
src='https://someImage'
alt='Some alt'
placeholder={placeholder}
size={moleculeThumbnailSize.SMALL}
/>
`

#### CaptionText
If a text is included a background color should appear as well. Enough contrast should be provided to ensure accessibility (more on Accessibility).
`js
src='https://someImage'
alt='Some alt'
placeholder={placeholder}
captionText='Show!'
/>
`

$3

#### Spinner

`js
import Spinner from '@s-ui/react-atom-spinner'
...

src={IMAGES.FINAL}
alt="Some alt"
href="https://someLink"
target="_blank"
spinner={}
placeholder={IMAGES.PLACEHOLDER}
size={moleculeThumbnailSize.MEDIUM}
/>

`

#### Error

`js
const ImageNotFoundIcon = () => {
return (



)
}

const defaultErrorText = 'Image not found'

...

src={IMAGES.BAD}
alt="Some alt"
captionText="Show!"
spinner={}
placeholder={IMAGES.PLACEHOLDER}
errorIcon={}
errorText={defaultErrorText}
size={moleculeThumbnailSize.LARGE}
/>