
pnpm add @leafygreen-ui/expandable-card
yarn add @leafygreen-ui/expandable-card
npm install @leafygreen-ui/expandable-card
import ExpandableCard from '@leafygreen-ui/expandable-card';
<ExpandableCard
title="Lorem Ipsum"
description="Donec id elit non mi porta gravida at eget metus"
flagText="optional"
darkMode={false}
>
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut
fermentum massa justo sit amet risus.
</ExpandableCard>;
| Prop |
Type |
Description |
Default |
| title |
React.ReactNode |
The title of the card (Required) |
|
| description |
string |
Description text below the title |
|
| flagText |
string |
Text in parentheses immediately following the title. Typically 'optional' or 'required' |
|
| darkMode |
boolean |
Toggles dark mode |
false |
| defaultOpen |
boolean |
Defines the default state of the card |
false |
| isOpen |
boolean |
Forces the card state |
undefined |
| onClick |
(event: React.SyntheticEvent) => void |
Callback fired when a user clicks the card header |
|
| id |
string |
Unique id for the card |
|
| className |
string |
Styling prop |
|
| contentClassName |
string |
Styling prop for children |
|