Web UI Playbook

Cards

Edit this file

Cards are flexible containers that group related content and actions. They serve as entry points to more detailed information and provide a preview of content in a scannable format. Cards are one of the most versatile UI components.

Purpose & Usage of Cards
Understanding when and why to use cards effectively in your interface design.

Core Purpose

  • • Content Grouping: Organize related information and actions
  • • Preview Gateway: Provide content previews that lead to details
  • • Scannable Format: Enable quick browsing and comparison
  • • Action Container: House interactive elements and controls
  • • Visual Hierarchy: Create clear content boundaries

When to Use Cards

Use Cards When:
  • • Displaying collections of content
  • • Creating product/content previews
  • • Grouping mixed content types
  • • Building dashboard widgets
Avoid Cards When:
  • • Content is better in lists
  • • Information is purely textual
  • • Space is very limited

Card Examples by Use Case

Content Preview Cards
Design System Fundamentals
Learn the core principles of building scalable design systems.
Dec 15, 2024

Use Case: Blog posts, articles, tutorials

Elements: Image, title, description, metadata, CTA

Purpose: Quick content preview with clear next action

Product/E-commerce Cards
Sale
Wireless Headphones
Premium noise-canceling headphones
$199$249
(4.0)

Use Case: E-commerce, marketplace listings

Elements: Product image, name, price, ratings, CTA

Purpose: Product discovery and quick purchase path

Dashboard Widget Cards
Total Revenue
+12.5%
$45,231.89

+20.1% from last month

Use Case: Analytics, metrics, KPI display

Elements: Metric value, trend indicator, visualization

Purpose: Quick data insights and status monitoring

References & Further Reading
Essential references for card component implementation and best practices from leading design systems.
Adobe Spectrum - Cards
Visa Design System - Content Card
Uber Base Design System - Card
Twilio Paste - Card Component
Shopify Polaris - Media Card
Blueprint.js - Card Component
IBM Carbon - Tile Component
Material Design 3 - Cards
WAI-ARIA Landmarks Pattern