yarn add @leafygreen-ui/cardnpm install @leafygreen-ui/cardimport Card from '@leafygreen-ui/card';
<Card className="card-styles" as="article">
This is my card component
</Card>;Output HTML
<div class="leafygreen-ui-1lu17q2 card-styles">This is my card component</div>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 |
|---|---|---|---|
className |
string |
Adds a className to the class attribute | |
contentStyle |
'none', 'clickable' |
Whether the card should display as a visually clickable element. | 'clickable' when a valid onClick handler or href link is provided |
darkMode |
boolean |
Determines whether or not the component will appear in dark mode. | false |
Any other properties will be spread on the Box element.