@spectrum-web-components/thumbnail

Description

An sp-thumbnail can be used in a variety of locations as a way to display a preview of an image, layer, or effect. sp-thumbnail elements are not keyboard-focusable since they're intended to be used inside of a component that a user sets focus to (such as select lists or tree items).

Usage

yarn add @spectrum-web-components/thumbnail

Import the side effectful registration of <sp-thumbnail> via:

import '@spectrum-web-components/thumbnail/sp-thumbnail.js';

When looking to leverage the Thumbnail base class as a type and/or for extension purposes, do so via:

import { Thumbnail } from '@spectrum-web-components/thumbnail';

Sizes

Extra Extra Small <sp-thumbnail size="xxs"> <img src="https://place.dog/100/100" alt="Demo Image" /> </sp-thumbnail> Extra Small <sp-thumbnail size="xs"> <img src="https://place.dog/100/100" alt="Demo Image" /> </sp-thumbnail> Small <sp-thumbnail size="s"> <img src="https://place.dog/100/100" alt="Demo Image" /> </sp-thumbnail> Medium <sp-thumbnail size="m"> <img src="https://place.dog/100/100" alt="Demo Image" /> </sp-thumbnail> Large <sp-thumbnail size="l"> <img src="https://place.dog/100/100" alt="Demo Image" /> </sp-thumbnail>

Focused or selected

When focused or selected the sp-thumbnail element will be displayed as follows:

<div style="display: flex; gap: var(--spectrum-global-dimension-size-100);"> <sp-thumbnail focused> <img src="https://place.dog/100/100" alt="Demo Image" /> </sp-thumbnail> <sp-thumbnail selected> <img src="https://place.dog/100/100" alt="Demo Image" /> </sp-thumbnail> </div>

Representing non-square content

By default, an sp-thumbnail will ensure that the entirety of the content that it respresents is visible by letterboxing that content with a checkerboard background when its aspect ratio is not square.

<div style="display: flex; gap: var(--spectrum-global-dimension-size-100);"> <sp-thumbnail> <img src="https://place.dog/300/400" alt="Eiffel Tower at night" /> </sp-thumbnail> <sp-thumbnail> <img src="https://place.dog/500/100" alt="Landscape with mountains and lake" /> </sp-thumbnail> </div>

The background attribute takes a string value of the CSS "background" property in order to customize the letterboxing.

<div style="display: flex; gap: var(--spectrum-global-dimension-size-100);"> <sp-thumbnail background="red"> <img src="https://place.dog/300/400" alt="Eiffel Tower at night" /> </sp-thumbnail> <sp-thumbnail background="#00ff00"> <img src="https://place.dog/500/100" alt="Landscape with mountains and lake" /> </sp-thumbnail> </div>

The cover attribute will cause the content to fill the space provided by the sp-thumbnail element:

<div style="display: flex; gap: var(--spectrum-global-dimension-size-100);"> <sp-thumbnail cover> <img src="https://place.dog/300/400" alt="Eiffel Tower at night" /> </sp-thumbnail> <sp-thumbnail cover> <img src="https://place.dog/500/100" alt="Landscape with mountains and lake" /> </sp-thumbnail> </div>