social-proof trust stats metrics numbers credibility social-proof trust stats metrics numbers users rating uptime trust metrics bar social proof statistics section
Social Proof Base
Fetch pattern JSON:
curl https://webspire.de/patterns/social-proof/base.json base.html
<section class="ws-social-proof bg-[var(--ws-social-proof-bg)] py-12">
<div class="mx-auto max-w-5xl px-6">
<div class="grid grid-cols-2 gap-8 sm:grid-cols-4">
<div class="text-center">
<p class="text-3xl font-bold text-[var(--ws-social-proof-text)]">10,000+</p>
<p class="mt-1 text-sm text-[var(--ws-social-proof-text-muted)]">Users</p>
</div>
<div class="text-center">
<p class="text-3xl font-bold text-[var(--ws-social-proof-text)]">4.9/5</p>
<p class="mt-1 text-sm text-[var(--ws-social-proof-text-muted)]">Rating</p>
</div>
<div class="text-center">
<p class="text-3xl font-bold text-[var(--ws-social-proof-text)]">99.9%</p>
<p class="mt-1 text-sm text-[var(--ws-social-proof-text-muted)]">Uptime</p>
</div>
<div class="text-center">
<p class="text-3xl font-bold text-[var(--ws-social-proof-text)]">150+</p>
<p class="mt-1 text-sm text-[var(--ws-social-proof-text-muted)]">Countries</p>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
social-prooftruststatsmetricsnumberscredibility
Slots
| Name | Required | Description |
|---|---|---|
| stats | Yes | Grid of metric items with number and label. |
Trust bar displaying key metrics like user count, rating, uptime, and global reach in a responsive four-column grid. Ideal for landing pages to establish credibility.