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

Use a card	Don't use a card
Item has media + title + description + actions	Item is a single line of text
Users scan a grid of similar items	Items flow as prose or a list
Each item needs its own actions	One shared action applies to many items
Content is self-contained	Content connects narratively to siblings

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

Card size	Padding
Compact (128–200px tall)	12px
Default (200–320px)	16–20px
Large (320px+)	24px
Dense (dashboard stat card)	16px

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        │
└─────────────────────┘