Skip to main content

Card

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

Overview

GitHub Workflow Status GitHub Workflow Status

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

PropOptionsDescriptionDefault
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"
hrefThe href attribute to apply when tag is set to "button".undefined
targetThe target attribute to apply when tag is set to "button".undefined
relThe rel attribute to apply when tag is set to "button".undefined
disabledtrue
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
isDraggabletrue
false
Whether the card is draggable or not. Styling and pointer changes only. Implementation is left to the consuming application.false
paddinga-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

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

Changelog