Commerce · Pattern

One product. Two useful actions.

A product card is content with an image, heading, price, navigation link, and action button—not one giant clickable container.

Prerequisite concepts

The pattern

Static image. Linked heading. Plain price. Separate action button. No nested or duplicate controls.

Anatomy

Every element earns its behavior.

A
Image

Informative alt; no focus because it performs no action.

B
Heading link

The single path to product details and first card tab stop.

C
Price

Readable text, not a control.

D
Add button

A distinct action whose hidden suffix includes product context.

Harbor trail boot linkAdd to cart button

Structure

Keep interactions as siblings.

A stretched card link must not contain the Add to cart button. Interactive elements cannot be nested, and a large overlay link can obscure text selection or other controls.

Fragile: entire card is a link

The nested button competes with its ancestor link. Names, events, focus styling, and hit targets become difficult to reason about.

<a href="/boot" class="card">
  <h3>Harbor trail boot</h3>
  <button>Add to cart</button> <!-- invalid nesting -->
</a>

Robust: card contains sibling controls

The heading link navigates. The button acts. Their names and focus indicators remain independent.

<article>
  <img src="boot.jpg" alt="Tan hiking boot…">
  <h3><a href="/boot">Harbor trail boot</a></h3>
  <p>$128</p>
  <button>Add to cart <span class="sr-only">— Harbor trail boot</span></button>
</article>

Quick test

Inspect one card before multiplying it.

  1. Confirm the image alt contributes useful product appearance and the image is not focusable.
  2. Confirm one heading link is the only path to product details.
  3. Confirm price remains readable text.
  4. Confirm Add to cart is a sibling button, not nested in a link.
  5. Press Tab: title link, then Add to cart.
  6. Confirm the button name includes both “Add to cart” and the product name.