sp-thumbnail

Examples API

Attributes and Properties #

Property Attribute Type Default Description
background background string | undefined
cover cover boolean false
dir dir 'ltr' | 'rtl' 'ltr'
size size ElementSize

Slots #

Name Description
default slot image element to present in the 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 #

See it on NPM! How big is this package in your project? Try it on webcomponents.dev

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>