@leafygreen-ui/expandable-card

Expandable Card

View on MongoDB.design

Installation

PNPM

pnpm add @leafygreen-ui/expandable-card

Yarn

yarn add @leafygreen-ui/expandable-card

NPM

npm install @leafygreen-ui/expandable-card

Example

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

Properties

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