---
title: "Cards"
created: "2026-07-02"
updated: "2026-07-02"
type: "concept"
status: "compiled"
category: "ui-patterns"
namespace: "ui-patterns"
source_url: "https://ui-patterns.com/patterns/cards"
source_site: "UI Patterns"
source_copyright_note: "Source site footer says All rights reserved; this page is a catalog pointer, not a republication."
source_path: "/patterns/cards"
source_slug: "cards"
track: "User Interface Design Patterns"
group: "Navigation"
subgroup: "Content"
section_headings:
  - "Problem summary"
  - "Example"
  - "Usage"
  - "Solution"
  - "Cards can be manipulated"
  - "Rationale"
  - "Why use cards?"
  - "Discussion"
  - "When to use cards"
  - "When you shouldn’t use cards"
  - "The problem of visual overload"
  - "How to improve design and interaction with cards"
  - "Cards design and visual signifiers"
example_count: 11
retrieved_at: "2026-07-02T18:23:09+00:00"
confidence: "medium"
---
# Cards

> Catalog pointer for the UI Patterns source page: [Cards](https://ui-patterns.com/patterns/cards).

## Taxonomy

- Track: User Interface Design Patterns
- Group: Navigation
- Subgroup: Content
- Source breadcrumb: Design Patterns > Navigation > Content > Cards

## Source Page Inventory

- Source URL: https://ui-patterns.com/patterns/cards
- Page title: Cards design pattern
- Section headings available at source: Problem summary, Example, Usage, Solution, Cards can be manipulated, Rationale, Why use cards?, Discussion, When to use cards, When you shouldn’t use cards, The problem of visual overload, How to improve design and interaction with cards, Cards design and visual signifiers
- Example screenshots detected at source: 11
- Primary example image detected: yes

## Retrieval Notes

Use this page as a routing handle, then open the source URL when you need the full pattern explanation, screenshot examples, or exact wording. For public Pixi Wiki use, prefer paraphrased design implications over long source quotes.

Useful retrieval frame:

- Ask what user behavior or interface decision this pattern is meant to shape.
- Check the source page sections before prescribing it; many pages distinguish usage, solution, rationale, and examples.
- Compare nearby patterns in the same subgroup before choosing one.
- Cite this catalog page plus the source URL when using the pattern in design review.

## Source Shape

- Problem summary: 11 words on source page
- Example: 152 words on source page
- Usage: 128 words on source page
- Solution: 186 words on source page
- Cards can be manipulated: 81 words on source page
- Rationale: 410 words on source page
- Why use cards?: 263 words on source page
- Discussion: 1065 words on source page
- When to use cards: 250 words on source page
- When you shouldn’t use cards: 194 words on source page
- The problem of visual overload: 47 words on source page
- How to improve design and interaction with cards: 369 words on source page
- Cards design and visual signifiers: 73 words on source page

## Source Navigation

- Previous source navigation: Drag and drop
- Next source navigation: Retaliation