Card

A card is a container element that visually represents a distinct unit of content within a user interface.

Overview

pie-card is a Web Component built using Lit. It offers a simple, functional and reusable card component for use in web applications.

This component can be easily integrated into a variety of frontend frameworks (or simply plain JavaScript and HTML). Its appearance and functionality can be customised with props.

Installation

To install pie-card in your application, run one of the following on your command line:

yarn add @justeattakeaway/pie-webc

npm i @justeattakeaway/pie-webc

Props

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.

Examples

You will need to import the component module in JavaScript, this registers the web component as a custom element within the browser so that you can use it in your HTML.

You can do this by using a standalone script which is referenced by an HTML file, or split across the <script> and <template> sections if you are using single-file components in a framework like Vue, for example.

main.js

import '@justeattakeaway/pie-webc/components/card.js';

index.html

<html>
    <body>
        <script type="module" src="/main.js"></script>
        <pie-card
            tag="a"
            href="https://www.example.com"
            target="_blank"
            padding="d">
            Take me to example.com!
        </pie-card>
    </body>
</html>

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>

// React templates (using Next 13 and SSR)
import { PieCard } from '@justeattakeaway/pie-card/dist/react';

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