Examples

Accessibility

Accessibility

The Card component is a presentational container intended to visually group related content. While the component itself meets relevant WCAG 2.0 accessibility criteria, teams should thoroughly test their card implementations to ensure they remain accessible in context. Because the Card is a styled <div> with no inherent semantics or interactivity, accessibility relies entirely on the structure and elements placed within it.

General accessibility guidance

• Ensure that content within the card (such as text, buttons, or icons) meets all relevant accessibility criteria, including contrast, focus visibility, and heading hierarchy.
• If a card is meant to be interactive (e.g., clickable to navigate), use a semantic <a> or <button>. See our links vs. buttons guidance.
• Maintain logical heading structure inside cards (e.g., h2–h3 levels) to preserve page hierarchy.

Accessibility testing

Card components often contain text, buttons, and icons. The accessibility of those elements should be tested in the context of the Card.

• Button accessibility guidance
• Icon accessibility guidance
• Text accessibility guidance

Code

React

Review Storybook for React guidance of this component.

Component maturity