Canon Cards

CANON · Cards

Cards group related content into a single, visually distinct unit. Overused, they turn any page into a scrapbook.

When a card is appropriate

If the "card" has no border, no shadow, and no background — it's just a layout block. Don't call it a card.

Card structure

<article class="card">
  <a href="/products/123" class="card-media">
    <img src="..." alt="" width="400" height="300">
  </a>
  <div class="card-body">
    <h3 class="card-title"><a href="/products/123">ThinkPad X1 Carbon</a></h3>
    <p class="card-desc">14" · 16GB RAM · 512GB</p>
    <div class="card-meta">$1,499</div>
  </div>
  <div class="card-actions">
    <button>Add to cart</button>
  </div>
</article>

• <article> when the card represents a standalone piece of content.
• Otherwise <div> or <li> (inside a grid).
• Avoid wrapping the whole card in a single <a> — it makes interactive children inaccessible.

Padding

Padding stays consistent across all sides. Don't lopside it unless there's a media bleed.

Media + content — the bleed rule

Cards with images usually bleed the image edge-to-edge, content gets padding. This reads as polished.

┌─────────────────────┐
│                     │  ← image bleeds
│      [image]        │
│                     │
├─────────────────────┤
│ 16px padding        │
│ Title               │  ← content padded
│ Description         │
│ $49                 │
│ 16px padding        │
└─────────────────────┘

Shadows vs borders — pick one, not both

Strong shadow + strong border is always wrong — two treatments fighting.

Shadow spec (elevation 1, resting cards):

box-shadow:
  0 1px 2px rgb(0 0 0 / 0.04),
  0 2px 6px rgb(0 0 0 / 0.04);

Hover elevation (interactive cards only):

box-shadow:
  0 2px 4px rgb(0 0 0 / 0.05),
  0 8px 20px rgb(0 0 0 / 0.08);
transform: translateY(-1px);
transition: transform 150ms ease-out, box-shadow 150ms ease-out;

Interactive cards

A card is "interactive" if clicking anywhere on it triggers an action.

Rules:

• Add cursor: pointer to the card.
• Real focus target must be a <a> or <button> inside — not the card wrapper.
• Use CSS to stretch the real anchor across the card:

  .card { position: relative; }
  .card-title a::after {
    content: '';
    position: absolute;
    inset: 0;
  }
  

• Interactive children (secondary buttons) need position: relative; z-index: 1 to stay clickable above the stretched link.
• Hover state on the whole card indicates interactivity.
• Focus ring wraps the card, not just the title link, when that anchor is stretched.

Image ratios

Pick one ratio per card grid. Never mix 16:9 and 4:3 cards in the same grid — breaks alignment.

Always declare width and height attributes on <img> to prevent CLS (canon-performance).

Card grids — spacing

Don't mix gaps in a single grid. Column gap usually matches row gap; slight row-larger is OK for information-heavy cards.

Hierarchy inside a card

Readers scan cards in Z-pattern (on wide cards) or F-pattern (on tall cards). Put the identifying info first.

Title (primary)          ← bold, 16–20px
Metadata (secondary)     ← muted, 13–14px
Description (optional)   ← body, 14px
Actions / price          ← bottom-anchored

Keep to 4 hierarchical levels max per card. More and each level loses meaning.

Content truncation

• Titles: 1–2 lines max, then ellipsis.
• Descriptions: 2–3 lines, then ellipsis.
• Use -webkit-line-clamp for multi-line clamp.
• Keep card heights equal in a grid — align-items: stretch, not content-driven.

Loading skeletons

Skeleton shape matches the card.

┌──────────────────┐
│ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒  │  ← image skeleton (same ratio)
│ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒  │
├──────────────────┤
│ ▒▒▒▒▒▒▒▒         │  ← title skeleton
│ ▒▒▒▒             │  ← meta skeleton
│ ▒▒▒▒▒▒▒▒▒▒       │
└──────────────────┘

Shimmer 1000–1500ms. Contrast 1.2:1.5:1 between skeleton and background (canon-states).

Empty cards — skip

If a card has no data, don't render it. An empty card with a placeholder "No data" is always worse than one fewer card.

Anti-patterns

Decision tree

Does each item have rich, varied content (image + title + description + actions)?
  ├─ No → Use a list or table
  └─ Yes → Card is appropriate

Interactive (click anywhere on card)?
  ├─ No → Static card, individual buttons inside
  └─ Yes → Stretched-link pattern, hover state on card

Grid layout?
  ├─ Yes → Equal heights, one ratio, consistent gap
  └─ No → Single card or list of cards

Dense UI (dashboard)?
  ├─ Yes → Border + flat, 12–16px padding
  └─ No → Shadow, 16–20px padding

Audit checklist

• Card uses <article> or appropriate semantic wrapper
• Not wrapping the entire card in a single <a>
• Border OR shadow, not both strong
• Image ratio consistent across grid
• Image has width and height attributes
• Padding consistent on all sides
• Grid items equal height
• Interactive cards use stretched-link pattern with z-index on children
• Hover state doesn't resize
• Mobile hit target ≥ 44px
• ≤ 4 levels of hierarchy inside the card
• Skeleton loading matches card shape
• Truncated text has full-text access (tooltip or detail page)

Sources

• WCAG 2.2 · 2.5.5 Target Size, 2.4.7 Focus Visible, 1.4.10 Reflow
• Refactoring UI · "Depth is more than blur", "Use shadows to communicate elevation"
• Apple HIG · Collections, Lists and Tables
• Material Design 3 · Cards
• Adam Silver · "Design for real content" (truncation guidance)