Card

Status: Stable

Latest released: February 2020

Current version: v1.4.0

Storybook
GitHub

Cards indicate to a user that a group of content is actionable. Each card contains one destination; if several destinations are required, try using Well instead. Cards are always interactive and should never contain non-actionable content.

  • Cards can contain images, logos, and/or detailed info that enables a user to enter the next path in their journey.
  • Cards are always interactive.
  • Only one action is ever permitted per Card; do not include additional links in the Card.
  • Always visually indicate interactivity with the prompt prop, that visually styles the action text in the blue link style
  • Use the card hierarchy (primary/secondary) to emphasize or de-emphasize actions on the page.
  • A group of cards should all have the same hierarchy.
  • Single cards work best with primary treatment.

Variants

Visual Variants

Development

import Card from '@nerdwallet/react-card';
<Card>Card content</Card>;

Accessibility

Cards are links, which means when one receives focus, the card will be announced by a screen reader. By default, the contents of the card are concatenated and used as the label of the card. If a card contains complex content (e.g. an image, heading, and description), the label read by the screen reader could be overly verbose or hard to understand. If that's the case, consider providing an explicit label with the aria-label or aria-labelledby prop.

Open in Playroom

Props

<Card>

aria-label

string

Can be used to provide a label to screen readers if the card's contents wouldn't otherwise be read appropriately by a screen reader.

Default

null

aria-labelledby

string

Can be used to provide a label to screen readers if the card's contents wouldn't otherwise be read appropriately by a screen reader. This should be the ID of an element containing the label.

Default

null

className

string

Classes to add to the containing element.

Default

null

children

node

Required

The content to render within the Card.

component

elementType

Allows you to provide a React component or other HTML element, overriding the default `a` option.

Default

null

href

string

Required

The URL to visit when clicking / tapping the Card.

primary

boolean

Flag to set the Card to have a shadow. Defaults to false.

Default

false

prompt

string

Required

This is text used to indicate to the user that the Card is actionable. For example, "Read more".

dangerouslyForceFocusStyling

boolean

Force the component to use its focus styles.

Default

false

dangerouslyForceHoverStyling

boolean

Force the component to use its hover styles.

Default

false

dangerouslyForceActiveStyling

boolean

Force the component to use its clicked or pressed styles.

Default

false