testimonial social-proof grid cards rating trust testimonial grid cards rating reviews social-proof multiple testimonials in a grid testimonial cards with star ratings
Testimonial Grid
Fetch pattern JSON:
curl https://webspire.de/patterns/testimonials/grid.json grid.html
<section class="ws-testimonials bg-[var(--ws-testimonials-bg)] py-20">
<div class="mx-auto max-w-7xl px-6">
<div class="mx-auto max-w-2xl text-center">
<p class="text-sm font-semibold uppercase tracking-[0.18em] text-[var(--ws-testimonials-accent)]">What people say</p>
<h2 class="mt-3 text-balance text-3xl font-bold tracking-tight text-[var(--ws-testimonials-text)] sm:text-4xl">Loved by teams worldwide</h2>
</div>
<div class="mt-12 grid gap-6 md:grid-cols-3">
<article class="rounded-2xl border border-[var(--ws-testimonials-border)] bg-[var(--ws-testimonials-card-bg)] p-6">
<div class="flex gap-1 text-amber-400" aria-label="5 out of 5 stars">
<svg class="h-4 w-4 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
<svg class="h-4 w-4 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
<svg class="h-4 w-4 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
<svg class="h-4 w-4 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
<svg class="h-4 w-4 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
</div>
<p class="mt-4 text-sm leading-relaxed text-[var(--ws-testimonials-text-soft)]">"The pattern registry changed how we build pages. Copy, paste, customize — done. No more reinventing the wheel."</p>
<div class="mt-5 flex items-center gap-3">
<div class="h-9 w-9 rounded-full bg-gradient-to-br from-sky-400 to-blue-500"></div>
<div>
<p class="text-sm font-semibold text-[var(--ws-testimonials-text)]">Alex Rivera</p>
<p class="text-xs text-[var(--ws-testimonials-text-muted)]">Frontend Lead, Vercel</p>
</div>
</div>
</article>
<article class="rounded-2xl border border-[var(--ws-testimonials-border)] bg-[var(--ws-testimonials-card-bg)] p-6">
<div class="flex gap-1 text-amber-400" aria-label="5 out of 5 stars">
<svg class="h-4 w-4 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
<svg class="h-4 w-4 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
<svg class="h-4 w-4 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
<svg class="h-4 w-4 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
<svg class="h-4 w-4 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
</div>
<p class="mt-4 text-sm leading-relaxed text-[var(--ws-testimonials-text-soft)]">"Finally a registry that understands families and variants. Our design system governance improved overnight."</p>
<div class="mt-5 flex items-center gap-3">
<div class="h-9 w-9 rounded-full bg-gradient-to-br from-emerald-400 to-teal-500"></div>
<div>
<p class="text-sm font-semibold text-[var(--ws-testimonials-text)]">Maria Santos</p>
<p class="text-xs text-[var(--ws-testimonials-text-muted)]">Design Systems, Stripe</p>
</div>
</div>
</article>
<article class="rounded-2xl border border-[var(--ws-testimonials-border)] bg-[var(--ws-testimonials-card-bg)] p-6">
<div class="flex gap-1 text-amber-400" aria-label="5 out of 5 stars">
<svg class="h-4 w-4 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
<svg class="h-4 w-4 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
<svg class="h-4 w-4 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
<svg class="h-4 w-4 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
<svg class="h-4 w-4 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
</div>
<p class="mt-4 text-sm leading-relaxed text-[var(--ws-testimonials-text-soft)]">"We migrated from a bloated CSS framework to Webspire snippets. Bundle size dropped 60%, and the team ships faster."</p>
<div class="mt-5 flex items-center gap-3">
<div class="h-9 w-9 rounded-full bg-gradient-to-br from-violet-400 to-purple-500"></div>
<div>
<p class="text-sm font-semibold text-[var(--ws-testimonials-text)]">James Park</p>
<p class="text-xs text-[var(--ws-testimonials-text-muted)]">CTO, Linear</p>
</div>
</div>
</article>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
testimonialsocial-proofgridcardsratingtrust
Slots
| Name | Required | Description |
|---|---|---|
| heading | No | Section title and subtitle. |
| testimonials | Yes | Array of testimonial cards. |
Enhanced testimonial variant showing three customer quotes in a responsive card grid with star ratings. Collapses to single column on mobile.