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">&minus;</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

Family
product-detail
Tier
enhanced
Kind
section
Extends
product-detail/base
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.