stats customer story case-study metric social-proof testimonial stats customer story case-study metric social-proof card conversion customer success stat cards case study metrics grid social proof with numbers and links
Stats Customer Story
Fetch pattern JSON:
curl https://webspire.de/patterns/stats/customer-story.json customer-story.html
<section class="ws-stats py-20">
<div class="mx-auto max-w-6xl px-6">
<h2 class="text-center text-3xl font-bold tracking-tight text-slate-900 sm:text-4xl">Trusted by industry leaders</h2>
<p class="mx-auto mt-4 max-w-xl text-center text-lg text-slate-500">See the real impact our customers achieve.</p>
<div class="mt-14 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
<!-- Card 1 -->
<a href="#" class="group flex flex-col justify-between rounded-2xl border border-slate-200 bg-[var(--ws-stats-bg)] p-6 transition-all hover:border-indigo-300 hover:shadow-lg">
<div>
<div class="flex h-10 items-center">
<span class="text-lg font-bold text-slate-400">Acme Corp</span>
</div>
<p class="mt-6 text-4xl font-bold tracking-tight text-slate-900">+34%</p>
<p class="mt-2 text-sm leading-relaxed text-slate-500">Increase in conversion rate after implementing data-driven optimizations across their checkout flow.</p>
</div>
<div class="mt-6 inline-flex items-center gap-1.5 text-sm font-medium text-indigo-600 transition group-hover:gap-2.5">
Read story
<svg class="h-4 w-4 transition-transform group-hover:translate-x-1" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"/></svg>
</div>
</a>
<!-- Card 2 -->
<a href="#" class="group flex flex-col justify-between rounded-2xl border border-slate-200 bg-[var(--ws-stats-bg)] p-6 transition-all hover:border-indigo-300 hover:shadow-lg">
<div>
<div class="flex h-10 items-center">
<span class="text-lg font-bold text-slate-400">Northstar Labs</span>
</div>
<p class="mt-6 text-4xl font-bold tracking-tight text-slate-900">+7%</p>
<p class="mt-2 text-sm leading-relaxed text-slate-500">Higher engagement rate through behavior-driven content personalization across mobile and desktop.</p>
</div>
<div class="mt-6 inline-flex items-center gap-1.5 text-sm font-medium text-indigo-600 transition group-hover:gap-2.5">
Read story
<svg class="h-4 w-4 transition-transform group-hover:translate-x-1" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"/></svg>
</div>
</a>
<!-- Card 3 -->
<a href="#" class="group flex flex-col justify-between rounded-2xl border border-slate-200 bg-[var(--ws-stats-bg)] p-6 transition-all hover:border-indigo-300 hover:shadow-lg">
<div>
<div class="flex h-10 items-center">
<span class="text-lg font-bold text-slate-400">Velocity Inc</span>
</div>
<p class="mt-6 text-4xl font-bold tracking-tight text-slate-900">-42%</p>
<p class="mt-2 text-sm leading-relaxed text-slate-500">Reduction in bounce rate after identifying and fixing critical UX friction points on their landing pages.</p>
</div>
<div class="mt-6 inline-flex items-center gap-1.5 text-sm font-medium text-indigo-600 transition group-hover:gap-2.5">
Read story
<svg class="h-4 w-4 transition-transform group-hover:translate-x-1" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"/></svg>
</div>
</a>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
statscustomerstorycase-studymetricsocial-prooftestimonial
Slots
| Name | Required | Description |
|---|---|---|
| heading | Yes | Section title and subtitle. |
| cards | Yes | Grid of customer story stat cards. |
Customer success stat cards in a 3-column grid. Each card shows a brand name (placeholder for logo), a bold metric (+34%, +7%, -42%), a short description, and a “Read story” arrow link. Cards are fully clickable <a> elements with hover border highlight and shadow. Inspired by Contentsquare’s customer story slider.