e-commerce reviews photos ugc social-proof reviews photos images ugc write-review social-proof reviews with customer photos review section with image uploads
Product Reviews With Photos
Fetch pattern JSON:
curl https://webspire.de/patterns/product-reviews/with-photos.json with-photos.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">
<div>
<h2 class="text-2xl font-bold tracking-tight sm:text-3xl" style="color:var(--ws-product-reviews-text)">Customer Reviews</h2>
<div class="mt-2 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>
<button type="button" class="rounded-xl px-5 py-2.5 text-sm font-semibold transition hover:opacity-90" style="background:var(--ws-product-reviews-action-bg);color:var(--ws-product-reviews-action-text)">Write a Review</button>
</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 with Photos -->
<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.</p>
<div class="mt-3 flex gap-2">
<div class="h-16 w-16 rounded-lg" style="background:linear-gradient(135deg, oklch(0.7 0.1 250), oklch(0.6 0.15 300))" role="img" aria-label="Review photo 1"></div>
<div class="h-16 w-16 rounded-lg" style="background:linear-gradient(135deg, oklch(0.65 0.12 220), oklch(0.55 0.14 270))" role="img" aria-label="Review photo 2"></div>
</div>
</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 across all genres.</p>
<div class="mt-3 flex gap-2">
<div class="h-16 w-16 rounded-lg" style="background:linear-gradient(135deg, oklch(0.72 0.08 100), oklch(0.62 0.12 150))" role="img" aria-label="Review photo 1"></div>
<div class="h-16 w-16 rounded-lg" style="background:linear-gradient(135deg, oklch(0.68 0.1 40), oklch(0.58 0.13 80))" role="img" aria-label="Review photo 2"></div>
<div class="h-16 w-16 rounded-lg" style="background:linear-gradient(135deg, oklch(0.7 0.06 320), oklch(0.6 0.1 350))" role="img" aria-label="Review photo 3"></div>
</div>
</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)">The ANC blocks out everything. Highly recommend for anyone who works in noisy environments.</p>
</article>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
e-commercereviewsphotosugcsocial-proof
Slots
| Name | Required | Description |
|---|---|---|
| header | Yes | Title, rating, count, and write-review button. |
| breakdown | Yes | Star rating percentage bars. |
| reviews | Yes | Review cards with optional photo thumbnails. |
Props
| Name | Type | Default | Description |
|---|---|---|---|
| showWriteReview | boolean | true | Show or hide the write review button. |
Enhanced variant with review photos and write-review CTA. Use when customer photos add value to the review experience.