@leafygreen-ui/card

Card

View on MongoDB.design

Installation

PNPM

pnpm add @leafygreen-ui/card

Yarn

yarn add @leafygreen-ui/card

NPM

npm install @leafygreen-ui/card

Example

import Card from '@leafygreen-ui/card';

<Card className="card-styles" as="article">
  This is my card component
</Card>;

Properties

Card is a styled wrapper for the Box component. Any properties you would pass to Box can also be passed to Card.

Prop	Type	Description	Default
children	React.ReactNode	Content rendered inside of the <Card /> component
className	string	Adds a className to the class attribute
darkMode	boolean	Determines whether or not the component will appear in dark mode.	false

Any other properties will be spread on the Box element.

Usage and Interactivity

This component is designed to be a container for other elements and content. We discourage onClick or href directly to the Card component. Instead, we recommend adding interactive elements inside the component.

DO ✅

<Card>
  <Button onClick={handleOnClick} />
</Card>

DON'T 🚫

<Card onClick={handleOnClick}>This is my card component</Card>