Product Reviews Base

Fetch pattern JSON: curl https://webspire.de/patterns/product-reviews/base.json
base.html
<section
  class="ws-product-reviews"
  style="
    --ws-product-reviews-bg: oklch(0.98 0.005 75);
    --ws-product-reviews-text: oklch(0.2 0.02 75);
    --ws-product-reviews-text-soft: oklch(0.45 0.015 75);
    --ws-product-reviews-border: oklch(0.85 0.01 75);
    --ws-product-reviews-accent: oklch(0.55 0.15 150);
    --ws-product-reviews-action-bg: oklch(0.35 0.02 75);
    --ws-product-reviews-action-text: oklch(0.98 0.005 75);
  "
>
  <div class="mx-auto max-w-4xl px-6 py-16 lg:py-24" style="background:var(--ws-product-reviews-bg);color:var(--ws-product-reviews-text)">
    <!-- Header -->
    <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
      <h2 class="text-2xl font-bold tracking-tight sm:text-3xl" style="color:var(--ws-product-reviews-text)">Customer Reviews</h2>
      <div class="flex items-center gap-3">
        <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-reviews-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-reviews-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-reviews-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-reviews-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-reviews-text)">4.5 out of 5</span>
        <span class="text-sm" style="color:var(--ws-product-reviews-text-soft)">(128 reviews)</span>
      </div>
    </div>

    <!-- Rating Breakdown -->
    <div class="mt-8 space-y-2">
      <div class="flex items-center gap-3">
        <span class="w-12 text-sm" style="color:var(--ws-product-reviews-text-soft)">5 star</span>
        <div class="flex-1 h-2 rounded-full overflow-hidden" style="background:var(--ws-product-reviews-border)">
          <div class="h-full rounded-full" style="width:65%;background:var(--ws-product-reviews-accent)"></div>
        </div>
        <span class="w-10 text-right text-sm" style="color:var(--ws-product-reviews-text-soft)">65%</span>
      </div>
      <div class="flex items-center gap-3">
        <span class="w-12 text-sm" style="color:var(--ws-product-reviews-text-soft)">4 star</span>
        <div class="flex-1 h-2 rounded-full overflow-hidden" style="background:var(--ws-product-reviews-border)">
          <div class="h-full rounded-full" style="width:20%;background:var(--ws-product-reviews-accent)"></div>
        </div>
        <span class="w-10 text-right text-sm" style="color:var(--ws-product-reviews-text-soft)">20%</span>
      </div>
      <div class="flex items-center gap-3">
        <span class="w-12 text-sm" style="color:var(--ws-product-reviews-text-soft)">3 star</span>
        <div class="flex-1 h-2 rounded-full overflow-hidden" style="background:var(--ws-product-reviews-border)">
          <div class="h-full rounded-full" style="width:10%;background:var(--ws-product-reviews-accent)"></div>
        </div>
        <span class="w-10 text-right text-sm" style="color:var(--ws-product-reviews-text-soft)">10%</span>
      </div>
      <div class="flex items-center gap-3">
        <span class="w-12 text-sm" style="color:var(--ws-product-reviews-text-soft)">2 star</span>
        <div class="flex-1 h-2 rounded-full overflow-hidden" style="background:var(--ws-product-reviews-border)">
          <div class="h-full rounded-full" style="width:3%;background:var(--ws-product-reviews-accent)"></div>
        </div>
        <span class="w-10 text-right text-sm" style="color:var(--ws-product-reviews-text-soft)">3%</span>
      </div>
      <div class="flex items-center gap-3">
        <span class="w-12 text-sm" style="color:var(--ws-product-reviews-text-soft)">1 star</span>
        <div class="flex-1 h-2 rounded-full overflow-hidden" style="background:var(--ws-product-reviews-border)">
          <div class="h-full rounded-full" style="width:2%;background:var(--ws-product-reviews-accent)"></div>
        </div>
        <span class="w-10 text-right text-sm" style="color:var(--ws-product-reviews-text-soft)">2%</span>
      </div>
    </div>

    <!-- Review Cards -->
    <div class="mt-10 space-y-6">
      <article class="rounded-xl p-6" style="border:1px solid var(--ws-product-reviews-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-reviews-accent);color:var(--ws-product-reviews-action-text)">AK</div>
          <div>
            <p class="text-sm font-semibold" style="color:var(--ws-product-reviews-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-reviews-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-reviews-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-reviews-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-reviews-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-reviews-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-reviews-text-soft)" datetime="2026-03-15">Mar 15, 2026</time>
        </div>
        <p class="mt-3 text-sm leading-relaxed" style="color:var(--ws-product-reviews-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>

      <article class="rounded-xl p-6" style="border:1px solid var(--ws-product-reviews-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-reviews-action-text)">SJ</div>
          <div>
            <p class="text-sm font-semibold" style="color:var(--ws-product-reviews-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-reviews-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-reviews-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-reviews-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-reviews-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-reviews-text-soft)" datetime="2026-03-10">Mar 10, 2026</time>
        </div>
        <p class="mt-3 text-sm leading-relaxed" style="color:var(--ws-product-reviews-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>

      <article class="rounded-xl p-6" style="border:1px solid var(--ws-product-reviews-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-reviews-action-text)">MP</div>
          <div>
            <p class="text-sm font-semibold" style="color:var(--ws-product-reviews-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-reviews-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-reviews-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-reviews-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-reviews-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-reviews-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-reviews-text-soft)" datetime="2026-03-05">Mar 5, 2026</time>
        </div>
        <p class="mt-3 text-sm leading-relaxed" style="color:var(--ws-product-reviews-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>
</section>
Details

Family
product-reviews
Tier
base
Kind
section
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
e-commercereviewsratingssocial-prooffeedback
Slots

Name	Required	Description
header	Yes	Section title with aggregate rating and count.
breakdown	Yes	Star rating percentage bars.
reviews	Yes	Individual review cards.
Props

Name	Type	Default	Description
maxWidth	string	max-w-4xl	Container max width utility.
Base variant for the Product Reviews family. Use as a standalone review section on product pages or below product detail layouts.