Product Card

Clickable card for product listings with hover elevation and focus styles.

---

Classes

Class	Purpose
.product-card	Block-level card with hover shadow + translateY
.product-card__body	Flex-column content area with padding
.product-card__price	Price container pushed to bottom via margin-top: auto
.product-image	Square aspect-ratio image with cover fit

Features

• surface-raised background
• Transition on box-shadow and transform
• Focus-visible outline with --color-focus-ring
• prefers-reduced-motion disables transitions

Preview

<a href="#" class="product-card shadow-sm" style="max-width: 280px; text-decoration: none">
  <div style="width: 100%; aspect-ratio: 1/1; background: var(--color-surface-alt); border-radius: var(--radius-md)"></div>
  <div class="product-card__body">
    <div style="font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--color-primary)">T-shirt</div>
    <div style="font-size: var(--font-size-base); font-weight: var(--font-weight-semibold)">Design Tokens Tee</div>
    <div style="font-size: var(--font-size-sm); color: var(--color-text-secondary)">Organic cotton with semantic color print.</div>
    <div class="product-card__price" style="font-size: var(--font-size-lg); font-weight: var(--font-weight-bold)">349 kr</div>
  </div>
</a>

T-shirt

Design Tokens Tee

Organic cotton with semantic color print.

349 kr

---

Usage

<a href="/product" class="product-card shadow-sm">
  <img src="product.jpg" alt="Product" class="product-image" loading="lazy" />
  <div class="product-card__body">
    <h2 class="text-base font-semibold">Product Name</h2>
    <p class="text-sm text-secondary">Short description.</p>
    <div class="product-card__price text-lg font-bold">349 kr</div>
  </div>
</a>