Card

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.

<Cluster spacing={3}>
  <Card href="#" prompt="Read more">
    <Text bold component="h4">Title</Text>
    <Text>This is sample body text.</Text>
  </Card>
  <Card primary href="#" prompt="Read more">
    <Text bold component="h4">Title</Text>
    <Text>This is sample body text.</Text>
  </Card>
</Cluster>

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.

<Card
  href="https://nerdwallet.com"
  prompt="Sign up"
  aria-labelledby="accessible-card-title"
>
  <Text bold component="h3" id="accessible-card-title">
    Get your free credit score
  </Text>
  <Text>
    It only takes a few minutes to unlock your credit score and other valuable
    financial insights.
  </Text>
</Card>

<Card
  href="https://nerdwallet.com"
  prompt="Sign up"
  aria-labelledby="accessible-card-title"
>
  <Text bold component="h3" id="accessible-card-title">
    Get your free credit score
  </Text>
  <Text>
    It only takes a few minutes to unlock your credit score and other valuable
    financial insights.
  </Text>
</Card>