Product Card Grid
Sectioned merchandising grids with image, title, price, rating text, and badges.
Sectioned merchandising grids with image, title, price, rating text, and badges.
Cards are allowed here because each product is a browsing interaction unit. Pair price colour with visible text for badges and stock.
<article class="product-card">
<div class="product-media" aria-hidden="true">...</div>
<div class="product-body">
<h3><a href="...">Title</a></h3>
<p class="price">$89.00</p>
</div>
</article>