e-commerce product reviews ratings social-proof product reviews ratings social-proof pdp product page with customer reviews PDP with review section
Product Detail With Reviews
Fetch pattern JSON:
curl https://webspire.de/patterns/product-detail/with-reviews.json with-reviews.html
<section
class="ws-product-detail"
style="
--ws-product-detail-bg: oklch(0.98 0.005 75);
--ws-product-detail-text: oklch(0.2 0.02 75);
--ws-product-detail-text-soft: oklch(0.45 0.015 75);
--ws-product-detail-border: oklch(0.85 0.01 75);
--ws-product-detail-accent: oklch(0.55 0.15 150);
--ws-product-detail-action-bg: oklch(0.35 0.02 75);
--ws-product-detail-action-text: oklch(0.98 0.005 75);
"
>
<div class="mx-auto max-w-7xl px-6 py-16 lg:py-24" style="background:var(--ws-product-detail-bg);color:var(--ws-product-detail-text)">
<!-- Product Section -->
<div class="grid gap-10 lg:grid-cols-2 lg:gap-16">
<!-- Product Image -->
<div class="aspect-square w-full rounded-2xl" style="background:linear-gradient(135deg, oklch(0.7 0.1 250), oklch(0.6 0.15 300));border:1px solid var(--ws-product-detail-border)" role="img" aria-label="Product image placeholder"></div>
<!-- Product Info -->
<div class="flex flex-col justify-center">
<h1 class="text-3xl font-bold tracking-tight sm:text-4xl" style="color:var(--ws-product-detail-text)">Premium Wireless Headphones</h1>
<div class="mt-3 flex items-center gap-2">
<div class="flex gap-0.5" role="img" aria-label="4.5 out of 5 stars">
<svg class="h-5 w-5" style="color:var(--ws-product-detail-accent)" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="h-5 w-5" style="color:var(--ws-product-detail-accent)" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="h-5 w-5" style="color:var(--ws-product-detail-accent)" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="h-5 w-5" style="color:var(--ws-product-detail-accent)" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="h-5 w-5" style="color:oklch(0.8 0.02 75)" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
</div>
<span class="text-sm" style="color:var(--ws-product-detail-text-soft)">(128 reviews)</span>
</div>
<div class="mt-5 flex items-baseline gap-3">
<span class="text-3xl font-bold" style="color:var(--ws-product-detail-text)">$99.00</span>
<span class="text-lg line-through" style="color:var(--ws-product-detail-text-soft)">$129.00</span>
</div>
<p class="mt-4 text-base leading-relaxed" style="color:var(--ws-product-detail-text-soft)">Experience studio-quality sound with active noise cancellation, 30-hour battery life, and ultra-comfortable memory foam ear cushions.</p>
<fieldset class="mt-6">
<legend class="text-sm font-semibold" style="color:var(--ws-product-detail-text)">Size</legend>
<div class="mt-2 flex flex-wrap gap-2" role="radiogroup" aria-label="Select size">
<label class="cursor-pointer rounded-lg px-4 py-2 text-sm font-medium" style="border:1px solid var(--ws-product-detail-border);color:var(--ws-product-detail-text-soft)"><input type="radio" name="size" value="S" class="sr-only"> S</label>
<label class="cursor-pointer rounded-lg px-4 py-2 text-sm font-medium" style="border:2px solid var(--ws-product-detail-accent);color:var(--ws-product-detail-text)"><input type="radio" name="size" value="M" class="sr-only" checked> M</label>
<label class="cursor-pointer rounded-lg px-4 py-2 text-sm font-medium" style="border:1px solid var(--ws-product-detail-border);color:var(--ws-product-detail-text-soft)"><input type="radio" name="size" value="L" class="sr-only"> L</label>
<label class="cursor-pointer rounded-lg px-4 py-2 text-sm font-medium" style="border:1px solid var(--ws-product-detail-border);color:var(--ws-product-detail-text-soft)"><input type="radio" name="size" value="XL" class="sr-only"> XL</label>
</div>
</fieldset>
<div class="mt-6">
<label class="text-sm font-semibold" style="color:var(--ws-product-detail-text)">Quantity</label>
<div class="mt-2 inline-flex items-center rounded-lg" style="border:1px solid var(--ws-product-detail-border)">
<button type="button" class="px-3 py-2 text-lg font-medium transition hover:opacity-70" style="color:var(--ws-product-detail-text)" aria-label="Decrease quantity">−</button>
<span class="min-w-[3rem] text-center text-sm font-medium" style="color:var(--ws-product-detail-text)">1</span>
<button type="button" class="px-3 py-2 text-lg font-medium transition hover:opacity-70" style="color:var(--ws-product-detail-text)" aria-label="Increase quantity">+</button>
</div>
</div>
<button type="button" class="mt-8 w-full rounded-xl px-6 py-3.5 text-base font-semibold transition hover:opacity-90 sm:w-auto" style="background:var(--ws-product-detail-action-bg);color:var(--ws-product-detail-action-text)">Add to Cart</button>
</div>
</div>
<!-- Reviews Section -->
<div class="mt-16 pt-12" style="border-top:1px solid var(--ws-product-detail-border)">
<div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
<h2 class="text-2xl font-bold" style="color:var(--ws-product-detail-text)">Customer Reviews</h2>
<div class="flex items-center gap-2">
<div class="flex gap-0.5" role="img" aria-label="4.5 out of 5 stars average">
<svg class="h-5 w-5" style="color:var(--ws-product-detail-accent)" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="h-5 w-5" style="color:var(--ws-product-detail-accent)" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="h-5 w-5" style="color:var(--ws-product-detail-accent)" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="h-5 w-5" style="color:var(--ws-product-detail-accent)" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="h-5 w-5" style="color:oklch(0.8 0.02 75)" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
</div>
<span class="text-sm font-medium" style="color:var(--ws-product-detail-text)">4.5 out of 5</span>
<span class="text-sm" style="color:var(--ws-product-detail-text-soft)">(128 reviews)</span>
</div>
</div>
<!-- Review Cards -->
<div class="mt-8 space-y-6">
<!-- Review 1 -->
<article class="rounded-xl p-6" style="border:1px solid var(--ws-product-detail-border)">
<div class="flex items-center gap-3">
<div class="flex h-10 w-10 items-center justify-center rounded-full text-sm font-semibold" style="background:var(--ws-product-detail-accent);color:var(--ws-product-detail-action-text)">AK</div>
<div>
<p class="text-sm font-semibold" style="color:var(--ws-product-detail-text)">Alex Kim</p>
<div class="flex gap-0.5" role="img" aria-label="5 out of 5 stars">
<svg class="h-4 w-4" style="color:var(--ws-product-detail-accent)" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="h-4 w-4" style="color:var(--ws-product-detail-accent)" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="h-4 w-4" style="color:var(--ws-product-detail-accent)" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="h-4 w-4" style="color:var(--ws-product-detail-accent)" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="h-4 w-4" style="color:var(--ws-product-detail-accent)" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
</div>
</div>
<time class="ml-auto text-xs" style="color:var(--ws-product-detail-text-soft)" datetime="2026-03-15">Mar 15, 2026</time>
</div>
<p class="mt-3 text-sm leading-relaxed" style="color:var(--ws-product-detail-text-soft)">Incredible sound quality and the noise cancellation is top-notch. Battery easily lasts through a full workday. Best headphones I have ever owned.</p>
</article>
<!-- Review 2 -->
<article class="rounded-xl p-6" style="border:1px solid var(--ws-product-detail-border)">
<div class="flex items-center gap-3">
<div class="flex h-10 w-10 items-center justify-center rounded-full text-sm font-semibold" style="background:oklch(0.6 0.12 200);color:var(--ws-product-detail-action-text)">SJ</div>
<div>
<p class="text-sm font-semibold" style="color:var(--ws-product-detail-text)">Sarah Johnson</p>
<div class="flex gap-0.5" role="img" aria-label="4 out of 5 stars">
<svg class="h-4 w-4" style="color:var(--ws-product-detail-accent)" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="h-4 w-4" style="color:var(--ws-product-detail-accent)" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="h-4 w-4" style="color:var(--ws-product-detail-accent)" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="h-4 w-4" style="color:var(--ws-product-detail-accent)" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="h-4 w-4" style="color:oklch(0.8 0.02 75)" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
</div>
</div>
<time class="ml-auto text-xs" style="color:var(--ws-product-detail-text-soft)" datetime="2026-03-10">Mar 10, 2026</time>
</div>
<p class="mt-3 text-sm leading-relaxed" style="color:var(--ws-product-detail-text-soft)">Very comfortable for long listening sessions. Sound is crisp and clear. Only wish the carrying case was a bit more premium feeling.</p>
</article>
<!-- Review 3 -->
<article class="rounded-xl p-6" style="border:1px solid var(--ws-product-detail-border)">
<div class="flex items-center gap-3">
<div class="flex h-10 w-10 items-center justify-center rounded-full text-sm font-semibold" style="background:oklch(0.6 0.1 320);color:var(--ws-product-detail-action-text)">MP</div>
<div>
<p class="text-sm font-semibold" style="color:var(--ws-product-detail-text)">Mike Patel</p>
<div class="flex gap-0.5" role="img" aria-label="5 out of 5 stars">
<svg class="h-4 w-4" style="color:var(--ws-product-detail-accent)" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="h-4 w-4" style="color:var(--ws-product-detail-accent)" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="h-4 w-4" style="color:var(--ws-product-detail-accent)" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="h-4 w-4" style="color:var(--ws-product-detail-accent)" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="h-4 w-4" style="color:var(--ws-product-detail-accent)" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
</div>
</div>
<time class="ml-auto text-xs" style="color:var(--ws-product-detail-text-soft)" datetime="2026-03-05">Mar 5, 2026</time>
</div>
<p class="mt-3 text-sm leading-relaxed" style="color:var(--ws-product-detail-text-soft)">Upgraded from a budget pair and the difference is night and day. The ANC blocks out everything. Highly recommend for anyone who works in noisy environments.</p>
</article>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
e-commerceproductreviewsratingssocial-proof
Slots
| Name | Required | Description |
|---|---|---|
| product | Yes | Product detail section (image, info, actions). |
| reviews | Yes | Customer reviews section with rating summary and cards. |
Props
| Name | Type | Default | Description |
|---|---|---|---|
| reviewCount | number | 3 | Number of review cards to display. |
Enhanced variant with integrated customer reviews. Use when social proof should be directly visible on the product page.