ecommerce compare comparison products table attributes shop compare comparison products attributes side-by-side features product comparison table side-by-side product compare
Product Compare Base
Fetch pattern JSON:
curl https://webspire.de/patterns/product-compare/base.json base.html
<section class="ws-product-compare py-12" style="background-color: var(--ws-color-bg);">
<div class="mx-auto max-w-6xl px-6">
<h2 class="mb-8 text-2xl font-bold" style="color: var(--ws-color-text);">Compare Products</h2>
<div class="overflow-x-auto">
<div class="grid min-w-[600px] grid-cols-[160px_1fr_1fr_1fr] overflow-hidden rounded-2xl border" style="border-color: var(--ws-color-border);">
<!-- Header row -->
<div class="p-4" style="background-color: var(--ws-color-bg-secondary);"></div>
<!-- Product 1 -->
<div class="p-5 text-center" style="background-color: var(--ws-color-surface);">
<div class="mx-auto h-20 w-20 overflow-hidden rounded-xl" style="background: linear-gradient(135deg, #e2e8f0, #cbd5e1);"> <!-- ws-ok: decorative product thumbnail placeholder --></div>
<h3 class="mt-3 text-sm font-semibold" style="color: var(--ws-color-text);">Classic Tee</h3>
<p class="mt-1 text-base font-bold" style="color: var(--ws-color-text);">€29</p>
<button class="mt-3 w-full rounded-lg px-3 py-1.5 text-xs font-semibold transition hover:opacity-90" style="background-color: var(--ws-color-bg-secondary); color: var(--ws-color-text-soft);">Add to Cart</button>
</div>
<!-- Product 2 — Featured -->
<div class="relative p-5 text-center" style="background-color: var(--ws-color-accent-subtle, color-mix(in oklch, var(--ws-color-accent) 8%, transparent));">
<span class="absolute left-1/2 top-0 -translate-x-1/2 -translate-y-1/2 rounded-full px-2.5 py-0.5 text-[10px] font-bold uppercase tracking-wide text-white" style="background-color: var(--ws-color-accent);">Best Seller</span>
<div class="mx-auto h-20 w-20 overflow-hidden rounded-xl" style="background: linear-gradient(135deg, var(--ws-color-accent), #818cf8);"> <!-- ws-ok: decorative product thumbnail placeholder --></div>
<h3 class="mt-3 text-sm font-semibold" style="color: var(--ws-color-text);">Premium Tee</h3>
<p class="mt-1 text-base font-bold" style="color: var(--ws-color-text);">€39</p>
<button class="mt-3 w-full rounded-lg px-3 py-1.5 text-xs font-semibold text-white transition hover:opacity-90" style="background-color: var(--ws-color-accent);">Add to Cart</button>
</div>
<!-- Product 3 -->
<div class="p-5 text-center" style="background-color: var(--ws-color-surface);">
<div class="mx-auto h-20 w-20 overflow-hidden rounded-xl" style="background: linear-gradient(135deg, #bbf7d0, #6ee7b7);"> <!-- ws-ok: decorative product thumbnail placeholder --></div>
<h3 class="mt-3 text-sm font-semibold" style="color: var(--ws-color-text);">Organic Tee</h3>
<p class="mt-1 text-base font-bold" style="color: var(--ws-color-text);">€45</p>
<button class="mt-3 w-full rounded-lg px-3 py-1.5 text-xs font-semibold transition hover:opacity-90" style="background-color: var(--ws-color-bg-secondary); color: var(--ws-color-text-soft);">Add to Cart</button>
</div>
<!-- Row: Availability -->
<div class="flex items-center px-4 py-3 text-xs font-semibold uppercase tracking-wide" style="background-color: var(--ws-color-bg-secondary); color: var(--ws-color-text-muted); border-top: 1px solid var(--ws-color-border);">Availability</div>
<div class="flex items-center justify-center gap-1.5 px-4 py-3 text-sm font-medium text-emerald-600" style="border-top: 1px solid var(--ws-color-border); background-color: var(--ws-color-surface);">
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg> In Stock
</div>
<div class="flex items-center justify-center gap-1.5 px-4 py-3 text-sm font-medium text-emerald-600" style="border-top: 1px solid var(--ws-color-border); background-color: color-mix(in oklch, var(--ws-color-accent) 5%, transparent);">
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg> In Stock
</div>
<div class="flex items-center justify-center gap-1.5 px-4 py-3 text-sm font-medium text-red-500" style="border-top: 1px solid var(--ws-color-border); background-color: var(--ws-color-surface);">
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg> Out of Stock
</div>
<!-- Row: Material -->
<div class="flex items-center px-4 py-3 text-xs font-semibold uppercase tracking-wide" style="background-color: var(--ws-color-bg); color: var(--ws-color-text-muted); border-top: 1px solid var(--ws-color-border);">Material</div>
<div class="flex items-center justify-center px-4 py-3 text-sm" style="color: var(--ws-color-text-soft); border-top: 1px solid var(--ws-color-border); background-color: var(--ws-color-bg);">100% Cotton</div>
<div class="flex items-center justify-center px-4 py-3 text-sm" style="color: var(--ws-color-text-soft); border-top: 1px solid var(--ws-color-border); background-color: color-mix(in oklch, var(--ws-color-accent) 5%, transparent);">Pima Cotton</div>
<div class="flex items-center justify-center px-4 py-3 text-sm" style="color: var(--ws-color-text-soft); border-top: 1px solid var(--ws-color-border); background-color: var(--ws-color-bg);">Organic Cotton</div>
<!-- Row: Free Shipping -->
<div class="flex items-center px-4 py-3 text-xs font-semibold uppercase tracking-wide" style="background-color: var(--ws-color-bg-secondary); color: var(--ws-color-text-muted); border-top: 1px solid var(--ws-color-border);">Free Shipping</div>
<div class="flex items-center justify-center px-4 py-3" style="border-top: 1px solid var(--ws-color-border); background-color: var(--ws-color-surface);">
<svg class="h-5 w-5 text-slate-300" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
</div>
<div class="flex items-center justify-center px-4 py-3" style="border-top: 1px solid var(--ws-color-border); background-color: color-mix(in oklch, var(--ws-color-accent) 5%, transparent);">
<svg class="h-5 w-5 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
</div>
<div class="flex items-center justify-center px-4 py-3" style="border-top: 1px solid var(--ws-color-border); background-color: var(--ws-color-surface);">
<svg class="h-5 w-5 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
</div>
<!-- Row: Sizes -->
<div class="flex items-center px-4 py-3 text-xs font-semibold uppercase tracking-wide" style="background-color: var(--ws-color-bg); color: var(--ws-color-text-muted); border-top: 1px solid var(--ws-color-border);">Sizes</div>
<div class="flex items-center justify-center px-4 py-3 text-sm" style="color: var(--ws-color-text-soft); border-top: 1px solid var(--ws-color-border); background-color: var(--ws-color-bg);">S – XL</div>
<div class="flex items-center justify-center px-4 py-3 text-sm font-medium" style="color: var(--ws-color-text); border-top: 1px solid var(--ws-color-border); background-color: color-mix(in oklch, var(--ws-color-accent) 5%, transparent);">XS – XL</div>
<div class="flex items-center justify-center px-4 py-3 text-sm" style="color: var(--ws-color-text-soft); border-top: 1px solid var(--ws-color-border); background-color: var(--ws-color-bg);">S – L</div>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Experimental Draft
ecommercecomparecomparisonproductstableattributesshop
Slots
| Name | Required | Description |
|---|---|---|
| header | Yes | Product images, names, prices, and ATC buttons. |
| attributes | Yes | Comparison attribute rows with labels and values. |
Props
| Name | Type | Default | Description |
|---|---|---|---|
| columns | '2' | '3' | '4' | 3 | Number of products to compare. |