Design Pattern

Card

A card is a UI pattern that visually groups related information into one unit. It works well in places where the same information structure repeats, such as lists, dashboards, or product grids.

Difficulty: Beginner Category: Data Display

When to use / not use

Use it when

  • When you want to compare or list multiple items that share the same structure
  • When you want to present a title, image, description, and other elements as one cohesive block
  • When each card acts as an entry point to its own page or detailed view

Don't use it when

  • When the content is simple enough that a plain list is sufficient
  • When the card needs to contain complex forms or interactions → use a dedicated section instead
  • When cards have ordering or hierarchy relationships → consider a list or tree structure

Anatomy

1 Container (article / li)
2 Media area (image or icon)
3 Content area (heading and body)
4 Action area (link or button)
  1. Container — Use article or li to give the block structure. Decide whether the whole card is clickable or only part of it
  2. Media — Use alt="" for decorative images and proper alternative text for meaningful images
  3. Action — Even when the whole card is clickable, preserve semantics with a real link element

HTML Structure

Key points

  • Structure a list of cards with ul > li or ol > li
  • Use proper heading levels such as h3 inside each card
  • If the whole card is a link, wrap it with an a element and avoid redundant links inside
  • Do not omit the alt attribute on images. Use an empty string only for decorative images

CSS Implementation

Styling points

  • Layout — Use Grid to distribute cards evenly and align their heights
  • Hover state — Indicate clickability with the cursor and style changes
  • Spacing — Keep spacing inside and between cards consistent
  • Responsive behavior — Adjust the number of columns automatically based on viewport width

Accessibility

WCAG 1.1.1 Non-text Content

Images inside cards need appropriate alternative text. Decorative images should use alt="".

WCAG 1.3.1 Info and Relationships

The structure of headings, text, and links inside the card must be conveyed properly to assistive technology.

WCAG 2.4.4 Link Purpose

Users need to understand the card destination from the link text.

Keyboard operation

  • Use Tab to move to links or buttons inside the card
  • Press Enter to follow the link
  • Even if the whole card is clickable, keep actual focus targets limited to the link element

Live Demo

Basic cards

A basic card layout with a title, description, and tags.

PreviewFullscreen

Cards with images

A card pattern that includes thumbnail images and shows media placement.

PreviewFullscreen

Horizontal cards

A variation that places media and content side by side.

PreviewFullscreen

Common mistakes

Wrapping the whole card in a link and placing another link inside

Nested links cause problems for both accessibility and click behavior.

Omitting image alt text

Screen readers may read the file name, which becomes noise.

Uneven card heights

If you leave the layout to implicit row heights, the design breaks when content lengths vary.