Product Card Horizontal

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

horizontal.html

<div class="ws-product-card space-y-4">
  <div class="flex 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="w-48 shrink-0 bg-gray-100"></div>
    <div class="flex flex-1 flex-col justify-between p-4">
      <div>
        <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 life and multipoint connection.</p>
      </div>
      <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="flex 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="w-48 shrink-0 bg-gray-100"></div>
    <div class="flex flex-1 flex-col justify-between p-4">
      <div>
        <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, RGB backlight, and wireless connectivity.</p>
      </div>
      <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>

Details

Family

product-card

Tier

enhanced

Kind

component

Extends

product-card/base

Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste

Stable Published

productcardhorizontallistecommerce

Slots

Name	Required	Description
image	Yes	Product image on the left side.
title	Yes	Product name heading.
description	No	Longer product description.
price	Yes	Product price display.
action	Yes	Add to cart button.

Horizontal product card layout with the image on the left and product details on the right. Better suited for list views, comparison pages, and search result layouts.