@leafygreen-ui/expandable-card

Expandable Card

View on MongoDB.design

Installation

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

Output HTML

<div id="expandable-card-1">
  <div
    role="button"
    aria-expanded="true"
    aria-controls="expandable-card-content-1"
    id="expandable-card-summary-1"
    tabindex="0"
  >
    <span>
      <h3>Lorem Ipsum</h3>
      <span>optional</span>
    </span>
    <div>Donec id elit non mi porta gravida at eget metus.</div>
    <svg
      width="16"
      height="16"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 16 16"
      role="img"
      aria-label="Chevron Up Icon"
    >
      ...
    </svg>
  </div>
  <div
    role="region"
    id="expandable-card-content-1"
    aria-labelledby="expandable-card-summary-1"
  >
    <div>
      Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh,
      ut fermentum massa justo sit amet risus.
    </div>
  </div>
</div>

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