Skip to content

Card

Card is a container used to create visible separation between pieces of content. It is often used in multiples to improve scannability.
Figma logo
A Card with a Header, Body text, and a Button in the Footer
Card and its sub-components
Anatomy of the Card component
ElementPurpose
HeaderHeader is the only required section of Card. Header must contain Heading text but can include multiple other elements such as a “more actions” Menu, an illustration, Progress, and Tag. Header is pinned to the top of a Card.
ActionsThe Actions element is optional and can contain a “more actions” Menu or an IconButton.
BodyThis is the main content area of the card and most commonly consists of text. Custom content should be placed in the Body.
FooterFooter is an optional container pinned to the bottom of the card often used to display a Link or Button CTA depending on the use case.
  • Cards occupy the full width of their parent by default
    • Contain their width by placing them in a container with set dimensions, e.g. Grid
  • Do not alter base Card styles
    • Limit customizations to the content inside Card Body
    • Consider Panel if greater customization is needed
  • Cards are not meant to be used as clickable regions
    • Use Card Footer for a call to action
    • When the entire card is clickable, actions within the card become inaccessible and users on mobile devices may be unable to distinguish between clickable and static cards

This example demonstrates a complex Header containing an illustration, Tag, and Actions. A “more actions” Menu provides a mechanism for users to interact with the Card.

This example demonstrates how cards can be laid out using a Grid. This technique will display Cards at the same height.

This example demonstrates a basic Card using the Header, Body and Footer content regions.

This example demonstrates a Card without Footer content. Body and Footer content is considered optional and can be omitted if necessary.

This example demonstrates the inclusion of an IconButton using the Close icon to create the controls to dismiss a Card.

This example demonstrates a Tag in the Header. Adding Tags using the tags prop will ensure proper alignment when Tags are used in conjunction with illustrations or Actions.

Cards occupy the full width of their container. However, most of the examples on this page are contained using Box or Grid to more accurately illustrate their typical usage.

This example adds a convenience label to the screen reader rotor when navigating by Landmarks. Instead of reading “banner” when reaching the heading, it will read the name of the heading followed by “banner”, enabling screen reader users to more quickly navigate page content.

React props
NameTypeDefaultDescription
children  ReactNodeThe individual Card content areas: CardHeader, CardBody, CardFooter
component  ElementTypedivAlternate element to render
React props
NameTypeDefaultDescription
action  ReactNodeInteractive element to trigger an action, i.e. Menu or an IconButton.
children  RequiredReactNodeThe text content of the Header, typically using Heading.
illustration  ReactNodeA single small illustration that sits above the Header text.
tags  ReactNodeOne (or more) instance of Tag that sits above the Header text, aligned with illustrations (if used).
React props
NameTypeDefaultDescription
children  ReactNodePrimary Body content.
React props
NameTypeDefaultDescription
children  ReactNodePrimary Footer content, typically a CTA in the form of Link or Button.
  • Follow our standard guidelines on creating accessible content for the individual content areas
  • Card itself is simply a container for content and doesn’t require special consideration for accessibility
  • It is possible to improve screen reader experience by providing labels to Card Header

The following testing snippet(s) offer suggestions for testing the component using React Testing Library with occasional help from Jest.

render(
<Card>
<CardHeader>
<Heading level={3}>Get started with payroll</Heading>
</CardHeader>
<CardBody>
<p>This is a paragraph</p>
</CardBody>
<CardFooter>
<Link href="https://gusto.com" after={<ChevronRight />}>
Add option
</Link>
</CardFooter>
</Card>,
);
expect(screen.getByRole('heading', { name: 'Get started with payroll' })).toBeInTheDocument();
expect(screen.getByText('This is a paragraph')).toBeInTheDocument();
expect(screen.getByRole('link', { name: 'Add option' })).toBeInTheDocument();