sp-thumbnail

Examples API

Attributes and Properties #

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

Slots #

Name Description
default slot image element to present in the Thumbnail

CSS Custom Properties #

Name Default
--spectrum-alias-focus-ring-gap var(--spectrum-global-dimension-static-size-25)
--spectrum-thumbnail-l-border-color var(--spectrum-alias-border-color-translucent)
--spectrum-thumbnail-l-border-color-key-focus var(--spectrum-alias-border-color-key-focus)
--spectrum-thumbnail-l-border-color-selected var(--spectrum-alias-border-color-selected)
--spectrum-thumbnail-l-border-radius var(--spectrum-alias-thumbnail-border-radius-small)
--spectrum-thumbnail-l-border-size var(--spectrum-alias-border-size-thin)
--spectrum-thumbnail-l-border-size-selected-key-focus var(--spectrum-alias-border-size-thick)
--spectrum-thumbnail-l-darksquare-background-color var(--spectrum-alias-thumbnail-darksquare-background-color)
--spectrum-thumbnail-l-height var(--spectrum-global-dimension-size-700)
--spectrum-thumbnail-l-width var(--spectrum-global-dimension-size-700)
--spectrum-thumbnail-m-border-color var(--spectrum-alias-border-color-translucent)
--spectrum-thumbnail-m-border-color-key-focus var(--spectrum-alias-border-color-key-focus)
--spectrum-thumbnail-m-border-color-selected var(--spectrum-alias-border-color-selected)
--spectrum-thumbnail-m-border-radius var(--spectrum-alias-thumbnail-border-radius-small)
--spectrum-thumbnail-m-border-size var(--spectrum-alias-border-size-thin)
--spectrum-thumbnail-m-border-size-selected-key-focus var(--spectrum-alias-border-size-thick)
--spectrum-thumbnail-m-darksquare-background-color var(--spectrum-alias-thumbnail-darksquare-background-color)
--spectrum-thumbnail-m-height var(--spectrum-global-dimension-size-500)
--spectrum-thumbnail-m-width var(--spectrum-global-dimension-size-500)
--spectrum-thumbnail-s-border-color var(--spectrum-alias-border-color-translucent)
--spectrum-thumbnail-s-border-color-key-focus var(--spectrum-alias-border-color-key-focus)
--spectrum-thumbnail-s-border-color-selected var(--spectrum-alias-border-color-selected)
--spectrum-thumbnail-s-border-radius var(--spectrum-alias-thumbnail-border-radius-small)
--spectrum-thumbnail-s-border-size var(--spectrum-alias-border-size-thin)
--spectrum-thumbnail-s-border-size-selected-key-focus var(--spectrum-alias-border-size-thick)
--spectrum-thumbnail-s-darksquare-background-color var(--spectrum-alias-thumbnail-darksquare-background-color)
--spectrum-thumbnail-s-height var(--spectrum-global-dimension-size-400)
--spectrum-thumbnail-s-width var(--spectrum-global-dimension-size-400)
--spectrum-thumbnail-xs-border-color var(--spectrum-alias-border-color-translucent)
--spectrum-thumbnail-xs-border-color-key-focus var(--spectrum-alias-border-color-key-focus)
--spectrum-thumbnail-xs-border-color-selected var(--spectrum-alias-border-color-selected)
--spectrum-thumbnail-xs-border-radius var(--spectrum-alias-thumbnail-border-radius-small)
--spectrum-thumbnail-xs-border-size var(--spectrum-alias-border-size-thin)
--spectrum-thumbnail-xs-border-size-selected-key-focus var(--spectrum-alias-border-size-thick)
--spectrum-thumbnail-xs-darksquare-background-color var(--spectrum-alias-thumbnail-darksquare-background-color)
--spectrum-thumbnail-xs-height var(--spectrum-global-dimension-size-300)
--spectrum-thumbnail-xs-width var(--spectrum-global-dimension-size-300)
--spectrum-thumbnail-xxs-border-color var(--spectrum-alias-border-color-translucent)
--spectrum-thumbnail-xxs-border-color-key-focus var(--spectrum-alias-border-color-key-focus)
--spectrum-thumbnail-xxs-border-color-selected var(--spectrum-alias-border-color-selected)
--spectrum-thumbnail-xxs-border-radius var(--spectrum-alias-thumbnail-border-radius-small)
--spectrum-thumbnail-xxs-border-size var(--spectrum-alias-border-size-thin)
--spectrum-thumbnail-xxs-border-size-selected-key-focus var(--spectrum-alias-border-size-thick)
--spectrum-thumbnail-xxs-darksquare-background-color var(--spectrum-alias-thumbnail-darksquare-background-color)
--spectrum-thumbnail-xxs-height var(--spectrum-global-dimension-size-225)
--spectrum-thumbnail-xxs-width var(--spectrum-global-dimension-size-225)

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>