Explore behaviors before defining the interface.
Quick guide for designers
When to use
Use to present related content units in a collection. Consider a table when the task requires column-based comparison.
What to design
Show a title, summary, image when needed, and actions. Distinguish informational cards, the primary destination, and independent actions.
How it behaves
Static content is read; links navigate and buttons perform actions. The actionable area must be predictable.
What to document in Figma
Define hierarchy, the actionable area, reading order, image alternatives, and long title handling.
How to review
Check variants and small screens in the design. In the implementation, verify semantics, focus, names, and independent activation of each control.
Content and purpose
- Does each card present an understandable content unit? Do the title and summary distinguish items without relying on the image?
- Is the card informational, does it have one destination, or does it contain several actions? Avoid the same interaction appearance for cards with different behaviors.
- Does the collection need a list and headings? Heading hierarchy must follow the page rather than fixing a level for appearance alone.
Actionable area and controls
- Can people recognize where to click and which destination opens? If the whole area extends a link, visible focus must also communicate that area.
- Do secondary actions such as Favorite remain independent? Do not nest buttons or links inside another link or button.
- Are there unnecessary repeated focus stops for the same destination? Does the link name identify the card, avoiding a collection of generic Learn more links?
Content adaptation
- Do long titles, missing images, and varying text lengths preserve reading and action access? Do not hide essential information in truncation without an alternative.
- When moving from several columns to one, does visual order remain consistent with reading and focus? Is content still available with magnification?
Interaction Methods
Mouse and touch
Links and buttons have identifiable actionable areas. Activating a secondary action must not also open the card’s primary destination.
Keyboard
Static cards do not receive focus merely because they have a border or emphasis. Tab traverses links and buttons in content order.
Enter opens the focused link; Enter or Space executes the focused button’s action. Activating a secondary button does not also open the card’s primary destination.
Screen readers
Screen reader reading and heading or link navigation commands traverse the collection and identify each card’s subject and destination.
With a mobile screen reader, swiping traverses content and controls in standard mode; double tapping activates the focused link or button. Toggling Favorite makes its new state perceivable.
Gherkin
BDD (Behavior-Driven Development) methodology focusing on three pillars: User Stories, Acceptance Criteria, and Gherkin Syntax (Given, When, Then).
Scenario: Given that I am on a page containing Cards
Educational scenarios for reviewing behavior. Adapt them to context and execute them in the implementation; the presence of this text does not mean tests were performed.
Keyboard navigation
- WHEN I traverse a card collection with
TabandShift + Tab - I SEE focus on links and buttons, without stops created only for static cards
- THEN, when I activate a secondary action, I SEE its outcome without also opening the primary destination
Screen reader on desktop
- WHEN I navigate the collection with a desktop screen reader
- I HEAR headings and link names distinguishing destinations and identify independent actions
- THEN, when I activate a link or button, I HEAR or perceive its destination or state without relying on the card image
Screen reader on mobile devices
- WHEN I explore cards with a mobile screen reader
- I HEAR content in an understandable order and identify each control by name
- THEN, when I activate a control with the platform gesture, I HEAR or perceive only the corresponding action and continue navigating
Additional scenarios — editorial extension
Informational card
- GIVEN a card without actions
- WHEN I traverse the page with a keyboard and screen reader
- THEN I read content in order and do not encounter a focus stop created only for the container.
Primary destination and secondary action
- GIVEN a card with a link and Favorite button
- WHEN I activate Favorite
- THEN its state updates without opening the primary link and I can perceive the change with a screen reader.
Long title and small screen
- GIVEN a long title
- WHEN the collection is displayed on a small screen or with magnification
- THEN the title, context, and controls remain available without overlap.
Identify destinations
- GIVEN a card collection
- WHEN I navigate the screen reader’s link list
- THEN names distinguish destinations without relying on images or visual position.
Points to consider
A card is a visual composition without a universal ARIA card role. Choose elements according to the content and controls’ functions.
Do not replace tabular data with cards if it prevents comparison of important row and column relationships.
USWDS presents actionable cards; this guide’s informational variant is an editorial extension. Appearance must not promise nonexistent interaction.
Implementation notes and behavior decisions
Enter activates links; Enter and Space activate buttons. A container with a click handler does not replace a semantic control.
Use headings and grouping appropriate to the content. Informative images need useful alternatives; decorative images must not unnecessarily repeat the title.
Verify link and button names and mobile exploration order. When an action toggles a state, that state must be available beyond appearance.
References
Additional references for components of type Cards.
Important:
Most references are on the course platform alongside the lessons cited in this material.
Disclaimer:
The links listed here are a curated collection of references where you can find implemented components, rather than recommendations. There is no unified implementation format and no guarantee that these links follow every design pattern. Direct questions to the teams responsible for the linked materials. Before copying a model, remember that all materials are constantly updated and that patterns, particularly proprietary ones, may change.
Technical references and examples consulted for this editorial adaptation. Each source retains its scope; consulting an example does not prove accessibility of another implementation.
USWDS — Card (external link, opens in a new tab)
W3C WAI — Page structure (external link, opens in a new tab)