Product cards — Image with overlaid badge and actions

A frameless product card with a sale badge, wishlist checkbox and cart action over its image. Use it when shoppers need quick actions directly in a grid.

ReactHTML

1440 × 480

Open in new tab

Component.tsx37 lines

export default function ProductCardOverlayActions() {
  return (
    <article className="group w-72 text-neutral-900 sm:w-80">
      <div className="relative">
        <div role="img" aria-label="Image placeholder: product photograph" className="flex aspect-[4/3] items-center justify-center rounded-lg bg-neutral-100 text-neutral-400">
          <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-10">
          <rect x="3" y="3" width="18" height="18" rx="2" />
          <circle cx="9" cy="9" r="2" />
          <path d="m21 15-5-5L5 21" />
        </svg>
        </div>
        <span className="absolute top-3 left-3 inline-flex items-center rounded-full border border-neutral-300 bg-white px-2.5 py-0.5 text-xs font-medium">Sale</span>
        <label className="absolute top-3 right-3 cursor-pointer">
          <input type="checkbox" name="product-card-overlay-actions-wishlist" aria-label="Save Product name to wishlist" className="peer sr-only focus-visible:outline-hidden" />
          <span className="flex size-9 items-center justify-center rounded-full border-2 border-transparent bg-white text-neutral-900 transition-colors hover:bg-neutral-50 peer-checked:border-neutral-900 peer-checked:[&>svg]:fill-current peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-neutral-900">
            <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-5"><path d="M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1.1-1.1a5.5 5.5 0 0 0-7.8 7.8L12 21l8.8-8.6a5.5 5.5 0 0 0 0-7.8Z" /></svg>
          </span>
        </label>
        <button type="button" aria-label="Add Product name to cart" className="absolute right-3 bottom-3 left-3 pointer-fine:opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 inline-flex h-11 items-center justify-center rounded-md bg-neutral-900 px-5 text-sm font-medium text-white transition-all hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900">Add to cart</button>
      </div>
      <div className="mt-3 flex items-start justify-between gap-3">
        <h3 className="text-base font-semibold">Product name</h3>
        <p className="flex shrink-0 items-center gap-2 text-sm"><span className="font-medium">$48</span><s className="text-neutral-500"><span className="sr-only">Original price </span>$64</s></p>
      </div>
      <div className="mt-2 flex items-center gap-2 text-xs text-neutral-500">
        <span role="img" aria-label="Rated 4 out of 5" className="flex items-center gap-0.5 text-neutral-900">
          <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-4 fill-current"><path d="m12 3 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2-5.6-3-5.6 3 1.1-6.2L3 9.6l6.2-.9Z" /></svg>
          <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-4 fill-current"><path d="m12 3 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2-5.6-3-5.6 3 1.1-6.2L3 9.6l6.2-.9Z" /></svg>
          <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-4 fill-current"><path d="m12 3 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2-5.6-3-5.6 3 1.1-6.2L3 9.6l6.2-.9Z" /></svg>
          <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-4 fill-current"><path d="m12 3 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2-5.6-3-5.6 3 1.1-6.2L3 9.6l6.2-.9Z" /></svg>
          <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-4 "><path d="m12 3 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2-5.6-3-5.6 3 1.1-6.2L3 9.6l6.2-.9Z" /></svg>
        </span>
        <span>(128)</span>
      </div>
    </article>
  )
}

Pattern notes

When to use: Use for merchandise grids with immediate save and cart actions. Pick product-card-media-footer when descriptions and a details step matter more. Variations: omit the compare-at price for a regular item, replace the sale badge with availability, or show a different review count.
Hierarchy: The image and Sale badge lead, followed by the 16px semibold product name and 14px prices. The $48 sale price has primary ink; the $64 comparison is muted and struck through. A stroke rating glyph group is labelled Rated 4 out of 5 and followed by (128). Slots: name up to 3 words, price up to 6 characters, review count up to 5 digits. The checkbox is named Save Product name to wishlist.
Responsive: The card is 288px wide below 640px and 320px from 640px; the 4:3 image grows with it. Overlay insets and controls keep their size. No regions change order. The compact name and price row persists at both widths.
Layout: A 288px-wide frameless article (w-72), 320px from 640px, with a relative 4:3 media region, 8px radius and a 40px image glyph. The badge and 36px round wishlist control sit 12px from the top corners. A 44px primary action spans the media width minus two 12px insets at the bottom. A name-and-price row follows after 12px, then a rating row after 8px with five 16px stars.
States: The native wishlist checkbox toggles a currentColor heart fill and a 2px neutral-900 border on the round label, including in forced colors. Its visible label shows a peer-focus-visible 2px outline offset 2px; the hidden input keeps a forced-colors-compatible focus outline. On fine pointers the cart button starts transparent, becomes visible on group hover or focus within, and stays visible on coarse pointers. Cart hover changes neutral-900 to neutral-700, and keyboard focus shows the standard outline. Opacity and colour transitions take 150ms.

Desktop wireframe

┌────────────────────────────────────────────────────────┐
│ ┌────────────────────────────────────────────────────┐ │
│ │ [Sale]                                  [Wishlist] │ │
│ │                       Image                        │ │
│ │                  [Add to cart]                     │ │
│ └────────────────────────────────────────────────────┘ │
│ Product name                         $48  (was $64)    │
│ Rating: four of five stars                     (128)   │
└────────────────────────────────────────────────────────┘

View all

Product cards — Compact product order summary
Layout tags: stacked,media,numbers
Product cards — Digital product with included files
Layout tags: stacked,list,icons
Product cards — Featured product and related list
Layout tags: asymmetric,media,list

Product cards — Image with overlaid badge and actions

Pattern notes

More in Product cards

Product cards — Compact product order summary

Product cards — Digital product with included files

Product cards — Featured product and related list