@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

Properties

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

Slots

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

CSS Variables

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

Events

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:

// 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>

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.