Skip to main content

Cards

Cards in Storybook

Examples​

Check out the Usage section for details about how to design a card properly, and the different configuration options we provide.

Basic example​

A basic card is a container that will display child components in a box.

<Card>
  <span>Card text</span>
</Card>

Header example​

You can use the title and subtitles properties to add appropriately formatted header text to the card.

<Card
  title={'Card title'}
  subTitle={'Card subtitle'}>
  <span>Card text</span>
</Card>

Header tooltip example​

You can use the tooltips property to add a nested tooltip to the card. This tooltip will be attached to an icon in the header of the card and will render when the icon is clicked.

const cardTooltip = {
    title: "Tooltip title",
    text: "Tooltip text"
}

<Card
title={"Card title"}
subTitle={"Card subtitle"}
tooltip={cardTooltip}>
    <span>Card content</span>
</Card>

Panel example​

You can use the isPanel property to format the card like a legacy panel instead.

<Card
  title={'Card title'}
  subTitle={'Card subtitle'}
  isPanel>
  <span>Card content</span>
</Card>