Product Card Base

Fetch pattern JSON: curl https://webspire.de/patterns/product-card/base.json

base.html

<div class="ws-product-card grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
  <div class="overflow-hidden rounded-xl border border-[var(--ws-product-card-border)] bg-[var(--ws-product-card-bg)] shadow-sm transition hover:shadow-md">
    <div class="aspect-[4/3] bg-gray-100"></div>
    <div class="p-4">
      <h3 class="font-semibold text-[var(--ws-product-card-text)]">Wireless Headphones</h3>
      <p class="mt-1 text-sm text-[var(--ws-product-card-text-soft)]">Premium noise-cancelling over-ear headphones with 30h battery.</p>
      <div class="mt-3 flex items-center justify-between">
        <span class="text-lg font-bold text-[var(--ws-product-card-text)]">$149.99</span>
        <button type="button" class="rounded-lg bg-[var(--ws-product-card-action-bg)] px-4 py-2 text-sm font-medium text-[var(--ws-product-card-action-text)] transition hover:opacity-90">Add to Cart</button>
      </div>
    </div>
  </div>
  <div class="overflow-hidden rounded-xl border border-[var(--ws-product-card-border)] bg-[var(--ws-product-card-bg)] shadow-sm transition hover:shadow-md">
    <div class="aspect-[4/3] bg-gray-100"></div>
    <div class="p-4">
      <h3 class="font-semibold text-[var(--ws-product-card-text)]">Mechanical Keyboard</h3>
      <p class="mt-1 text-sm text-[var(--ws-product-card-text-soft)]">Compact 75% layout with hot-swappable switches and RGB backlight.</p>
      <div class="mt-3 flex items-center justify-between">
        <span class="text-lg font-bold text-[var(--ws-product-card-text)]">$89.99</span>
        <button type="button" class="rounded-lg bg-[var(--ws-product-card-action-bg)] px-4 py-2 text-sm font-medium text-[var(--ws-product-card-action-text)] transition hover:opacity-90">Add to Cart</button>
      </div>
    </div>
  </div>
  <div class="overflow-hidden rounded-xl border border-[var(--ws-product-card-border)] bg-[var(--ws-product-card-bg)] shadow-sm transition hover:shadow-md">
    <div class="aspect-[4/3] bg-gray-100"></div>
    <div class="p-4">
      <h3 class="font-semibold text-[var(--ws-product-card-text)]">USB-C Hub</h3>
      <p class="mt-1 text-sm text-[var(--ws-product-card-text-soft)]">7-in-1 adapter with HDMI, SD card reader, and 100W pass-through.</p>
      <div class="mt-3 flex items-center justify-between">
        <span class="text-lg font-bold text-[var(--ws-product-card-text)]">$39.99</span>
        <button type="button" class="rounded-lg bg-[var(--ws-product-card-action-bg)] px-4 py-2 text-sm font-medium text-[var(--ws-product-card-action-text)] transition hover:opacity-90">Add to Cart</button>
      </div>
    </div>
  </div>
</div>

Details

Family

product-card

Tier

base

Kind

component

Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste

Stable Published

productcardecommerceshopgrid

Slots

Name	Required	Description
image	Yes	Product image or placeholder area.
title	Yes	Product name heading.
description	No	Short product description.
price	Yes	Product price display.
action	Yes	Add to cart button.

E-commerce product card displaying an image area, product name, description, price, and an add-to-cart button. Shown in a responsive 3-column grid layout.