@justeattakeaway/pie-thumbnail

Source Code | Design Documentation | NPM

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

Table of Contents

- Installation
- Documentation
- Properties
- Slots
- CSS Variables
- Events
- Usage Examples
- Questions and Support
- Contributing

Installation

> To install any of our web components in your application, we would suggest following the getting started guide to set up your project.

Ideally, you should install the component using the @justeattakeaway/pie-webc package, which includes all of the components. Or you can install the individual component package.

Documentation

$3

| 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. | {} |

$3

This component does not have any slots. All content is controlled through properties.

$3

This component does not expose any CSS variables for style overrides.

$3

This component does not emit any custom events. In order to add event listening to this component, you can treat it like a native HTML element in your application.

Usage Examples

For HTML:

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

`html



`

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

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


`

For React Applications:

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


``

Questions and Support

If you work at Just Eat Takeaway.com, please contact us on #help-designsystem. Otherwise, please raise an issue on Github.

Contributing

Check out our contributing guide for more information on local development and how to run specific component tests.