Thumbnail

A thumbnail is a smaller version of an image or media content, used as a preview or summary of the full-sized item.

Overview

pie-thumbnail is a Web Component built using Lit. It offers a simple and accessible thumbnail component for web applications.

This component can be easily integrated into various frontend frameworks and customised through a set of properties.

To install pie-thumbnail in your application, run the following on your command line:

npm i @justeattakeaway/pie-webc

yarn add @justeattakeaway/pie-webc

Prop	Options	Description	Default
src		The `src` attribute for the underlying image tag.	`""`
alt		The `alt` attribute for the underlying image tag.	`""`
variant	`"default"` `"outline"`	Sets the variant of the thumbnail.	`"default"`
backgroundColor	`"default"` `"subtle"` `"strong"` `"dark"` `"inverse"` `"inverse-alternative"`	Sets the background color of the thumbnail container.	`"default"`
size	A number between 24 and 128, in multiples of 8.	Sets the size of the thumbnail.	`48`
aspectRatio	`"1by1"` `"4by3"` `"16by9"`	Sets the aspect-ratio of the thumbnail image.	`"1by1"`
disabled	`true` `false`	When true, the disabled styles are applied.	`false`
hasPadding	`true` `false`	When true, extra spacing around the thumbnail container is applied.	`false`
hideDefaultPlaceholder	`true` `false`	When true, hides the component default placeholder on image load failure.	`false`
placeholder	`{ src?: string, alt?: string }`	Overrides the component default placeholder with a custom one on image load failure.	`{}`

For HTML:

// import as module into a js file e.g. main.js
import '@justeattakeaway/pie-webc/components/thumbnail.js'

<!-- pass js file into <script> tag -->
<pie-thumbnail src="" alt=""></pie-thumbnail>
<script type="module" src="/main.js"></script>

For Native JS Applications, Vue, Angular, Svelte etc.:

// Vue templates (using Nuxt 3)
import '@justeattakeaway/pie-webc/components/thumbnail.js';

<pie-thumbnail src="" alt=""></pie-thumbnail>

For React Applications:

import { PieThumbnail } from '@justeattakeaway/pie-webc/react/thumbnail.js';

<PieThumbnail src="" alt=""></PieThumbnail>