Sizes

Extra small

<Thumbnail size={Thumbnail.Sizes.XS} src="http://media.comicbook.com/2016/05/ig88-181139.jpg" />

Small

<Thumbnail size={Thumbnail.Sizes.S} src="http://media.comicbook.com/2016/05/ig88-181139.jpg" />

Medium

<Thumbnail size={Thumbnail.Sizes.M} src="http://media.comicbook.com/2016/05/ig88-181139.jpg" />

Large

<Thumbnail size={Thumbnail.Sizes.L} src="http://media.comicbook.com/2016/05/ig88-181139.jpg" />

Extra large

<Thumbnail size={Thumbnail.Sizes.XL} src="http://media.comicbook.com/2016/05/ig88-181139.jpg" />

Fit

Contain

<Thumbnail size={Thumbnail.Sizes.L} fit="contain" src="http://media.comicbook.com/2016/05/ig88-181139.jpg" />

Cover

<Thumbnail size={Thumbnail.Sizes.L} fit="cover" src="http://media.comicbook.com/2016/05/ig88-181139.jpg" />

Fill

<Thumbnail size={Thumbnail.Sizes.L} fit="fill" src="http://media.comicbook.com/2016/05/ig88-181139.jpg" />

None

<Thumbnail size={Thumbnail.Sizes.L} fit="none" src="http://media.comicbook.com/2016/05/ig88-181139.jpg" />

Overlay

Thumbnail can have overlay, which can include any ReactNode which will be passed by overlay property

Overlay usually contains Icons from Anvil Icons and text

<Thumbnail
    size={Thumbnail.Sizes.L}
    src="http://media.comicbook.com/2016/05/ig88-181139.jpg"
    overlay={<Icon name="view_module" />}
/>

Action

Thumbnail component can call callback function which can be passed by onClick property.

When onClick property passed cursor will be pointer when hovering thumbnail.

const handleOnClick = () => alert('clicked');
<Thumbnail
    onClick={handleOnClick}
    size={Thumbnail.Sizes.L}
    src="http://media.comicbook.com/2016/05/ig88-181139.jpg"
/>

Importing

import { Thumbnail } from '@servicetitan/design-system'