@justeattakeaway/pie-card

@justeattakeaway/pie-card

Source Code | Design Documentation | NPM

@justeattakeaway/pie-card is a Web Component built using the Lit library. It offers a simple and accessible interactive card 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
tag	"a", "button"	Which HTML tag to use for the card.	"button"
variant	"default", "outline", "inverse", "outline-inverse"	Which variant of the card to use.	"default"
href	—	The href attribute to apply when tag is set to "button".	undefined
target	—	The target attribute to apply when tag is set to "button".	undefined
rel	—	The rel attribute to apply when tag is set to "button".	undefined
disabled	true, false	Whether or not the card should be disabled. This applies disabled styles and turns off interactivity. If the card is used as a link, the href attribute will be removed so the link can no longer be navigated.	false
aria	{ label?: string }	Aria properties for the card to help with making it accessible.	undefined
isDraggable	true, false	Whether the card is draggable or not. Styling and pointer changes only. Implementation is left to the consuming application.	false
padding	a-g	Which spacing token(s) to use for the card's padding. Pass two (comma-separated) values for different vertical and horizontal padding, or one value to pad all sides evenly, e.g., "a" or "a,b".	undefined

Slots

Slot	Description
default	The default slot is used to pass content into the card component.

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/card.js';

<pie-card
    tag="a"
    href="https://www.example.com"
    target="_blank"
    padding="d">
    Take me to example.com!
</pie-card>
<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/card.js';

<pie-card tag="a" href="https://www.example.com" target="_blank" padding="d">
  Take me to example.com!
</pie-card>

For React Applications:

import { PieCard } from '@justeattakeaway/pie-webc/react/card.js';

<PieCard tag="a" href="https://www.example.com" target="_blank" padding="d">
    Take me to example.com!
</PieCard>

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.