Under Construction: The content on this site draft material. It is not the official content of this site and should not be followed at this time.

Not Legal Advice: The content on this site is provided for informational purposes only and does not constitute legal advice. Consult a qualified attorney for advice specific to your situation.

Design System Component

Card

Flexible content containers that group related information. Accessible card patterns depend on context and whether the card itself is a link.

Purpose

Cards group related content visually. They may be purely presentational, interactive (the whole card is a link), or contain multiple interactive elements.

Usage Guidance

  • Purely informational cards: No special ARIA needed; use semantic HTML within the card.
  • Linked cards (whole card is clickable): Use a single <a> wrapping meaningful content, with a descriptive aria-label if the visible text alone is ambiguous.
  • Cards with multiple actions: List all links/buttons within the card; avoid the “cover link” pattern that creates duplicate links.

Accessibility Considerations

  • A card with multiple links must have distinct, descriptive link text
  • Images within cards must have appropriate alt text
  • Avoid “Read more” links without context; use aria-label="Read more about [topic]" or wrap meaningful text in the <a>
  • Interactive cards using <a> as the entire card should contain only one primary link

Keyboard Support

Standard link/button keyboard behavior applies. Avoid designs requiring focus to move between an image and a heading as separate links to the same destination.

Screen Reader Behavior

Card content is announced in DOM order. Screen reader users in “browse mode” navigate heading-by-heading through card grids, so card headings must be meaningful out of context.

ARIA Requirements

Minimal ARIA needed for most cards. If using a custom linked card pattern, aria-label on the <a> element provides context for screen reader users who only hear the link text.

Common Mistakes

  • Multiple links with identical text (“Read more”) in a card grid
  • Using onclick on a <div> for linked cards instead of <a>
  • Missing alt text on card images
  • Decorative images with non-empty alt text

Live Examples

Informational Card

This card contains only informational content with no interactive elements. No special ARIA is required.

Linked Card

The entire card is a single link to the Prevention section. The link text is the card heading text.

Card with Actions

This card contains multiple distinct actions. Each link is descriptive on its own.

View Prevention Guide View Preparation Guide

Code Examples

<!-- Informational card -->
<div class="card">
  <h3 class="card__title">Card Title</h3>
  <p class="card__body">Card description text.</p>
</div>

<!-- Linked card (entire card is one link) -->
<a href="/destination/" class="card card--link">
  <h3 class="card__title">Card Title</h3>
  <p class="card__body">Card description.</p>
</a>

<!-- Card with multiple actions -->
<div class="card">
  <h3 class="card__title">Card Title</h3>
  <p class="card__body">Card description.</p>
  <div class="card__footer">
    <a href="/primary-action/">Primary Action</a>
    <a href="/secondary-action/">Secondary Action</a>
  </div>
</div>