Commerce cards

Production-minded patterns. Real examples. Make them yours.

Product

Bestseller

Electronics

Nova headphones

$149 ★ 4.8 (49)

Edit

View source example

<article class="card p-product">
<div class="p-product-art">
<img src="assets/products/headphones.svg" alt="Nova headphones" width="400" height="320">
<span class="p-badge">Bestseller</span>
<button class="icon-button" data-wishlist="1" aria-label="Save product: Nova headphones" aria-pressed="false">
<svg class="icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M12 5v16m0-16C8 2 4 3 2 4v15c3-1 6-1 10 2 4-3 7-3 10-2V4c-3-1-6-2-10 1Z"/>
</svg>
</button>
</div>
<div class="p-product-info">
<small>Electronics</small>
<h2>Nova headphones</h2>
<div class="p-product-price">
<strong>$149</strong>
<span class="p-rating" aria-label="Rating">★ 4.8 <span class="muted">(49)</span>
</span>
</div>
<button class="btn btn-primary" data-add-cart="1" >
<svg class="icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M5 7h14l2 14H3L5 7Z"/>
<path d="M8 8V6a4 4 0 0 1 8 0v2"/>
</svg>Add to demo cart</button>
<div class="p-product-tools">
<a class="btn btn-secondary btn-sm" href="pages/commerce/product-edit.html?id=1">
<svg class="icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="m14 5 5 5m-15 5 11-11a3.5 3.5 0 0 1 5 5L9 20l-6 1 1-6Z"/>
</svg>Edit</a>
<button class="btn btn-outline btn-sm" data-product-detail="1">
<svg class="icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<circle cx="10.5" cy="10.5" r="6.5"/>
<path d="m16 16 5 5"/>
</svg>Preview</button>
</div>
</div>
</article>

Featured product

View source example

<div class="p-promo">
<div>
<small>HANEENWEB COLLECTION</small>
<h2>A considered collection.</h2>
<p>Beautiful essentials for your everyday workspace.</p>
<a class="btn btn-primary" href="pages/commerce/catalog.html">
<svg class="icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M5 12h14m-5-5 5 5-5 5"/>
</svg>Browse collection</a>
</div>
<img src="assets/products/chair.svg" alt="Forma chair">
</div>

Horizontal product card

Nova headphones

Thoughtfully designed essentials with considered materials and everyday functionality.

$149

View source example

<article class="p-inline-product">
<img src="assets/products/headphones.svg" alt="Nova headphones">
<div>
<h3>Nova headphones</h3>
<p>Thoughtfully designed essentials with considered materials and everyday functionality.</p>
<strong>$149</strong>
</div>
<button type="button" class="btn btn-secondary btn-sm" data-product-detail="1">
<svg class="icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<circle cx="10.5" cy="10.5" r="6.5"/>
<path d="m16 16 5 5"/>
</svg>Preview</button>
</article>

Category tile

Electronics 12 records Accessories 19 records Workspace 26 records Lifestyle 33 records

View source example

<div class="p-category-grid">
<a class="p-category" href="pages/commerce/catalog.html">
<svg class="icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M5 7h14l2 14H3L5 7Z"/>
<path d="M8 8V6a4 4 0 0 1 8 0v2"/>
</svg>
<strong>Electronics</strong>
<small>12 records</small>
</a>
<a class="p-category" href="pages/commerce/catalog.html">
<svg class="icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<circle cx="12" cy="12" r="9"/>
<path d="M12 7v5l3 2"/>
</svg>
<strong>Accessories</strong>
<small>19 records</small>
</a>
<a class="p-category" href="pages/commerce/catalog.html">
<svg class="icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<rect x="2" y="3" width="20" height="14" rx="2"/>
<path d="M8 21h8m-4-4v4"/>
</svg>
<strong>Workspace</strong>
<small>26 records</small>
</a>
<a class="p-category" href="pages/commerce/catalog.html">
<svg class="icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<circle cx="12" cy="12" r="9"/>
<ellipse cx="12" cy="12" rx="4" ry="9"/>
<path d="M3 12h18"/>
</svg>
<strong>Lifestyle</strong>
<small>33 records</small>
</a>
</div>

Offer card

Discount

10% OFF

Use DEMO10 for a 10% sample discount.

DEMO10

Browse collection

View source example

<div class="card p-pad">
<span class="p-badge">Discount</span>
<h2 style="font-size:34px;margin:18px 0">10% OFF</h2>
<p class="muted mb">Use DEMO10 for a 10% sample discount.</p>
<code class="p-badge">DEMO10</code>
<div class="section-copy">
<a class="btn btn-primary" href="pages/commerce/catalog.html">
<svg class="icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M5 7h14l2 14H3L5 7Z"/>
<path d="M8 8V6a4 4 0 0 1 8 0v2"/>
</svg>Browse collection</a>
</div>
</div>

Customer review

★★★★★

Considered details. Everyday comfort.

A sample review pattern combining feedback, rating and customer details in a clear layout.

Sara Wilson Customer details

View source example

<article>
<div class="p-rating mb">★★★★★</div>
<h2>Considered details. Everyday comfort.</h2>
<p class="p-note">A sample review pattern combining feedback, rating and customer details in a clear layout.</p>
<div class="flex">
<span class="avatar tone-1 " aria-hidden="true">SW</span>
<strong>Sara Wilson</strong>
<span class="p-badge">Customer details</span>
</div>
</article>