@leafygreen-ui/expandable-card NPM

Expandable Card

npm (scoped)

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