testimonial social-proof quote trust landing-page testimonial quote review social-proof trust single testimonial quote section social proof with customer quote
Testimonial Base
Fetch pattern JSON:
curl https://webspire.de/patterns/testimonials/base.json base.html
<section class="ws-testimonials bg-[var(--ws-testimonials-bg)] py-20">
<div class="mx-auto max-w-4xl px-6 text-center">
<p class="text-sm font-semibold uppercase tracking-[0.18em] text-[var(--ws-testimonials-accent)]">Testimonials</p>
<blockquote class="mt-8">
<p class="text-pretty text-xl font-medium leading-relaxed text-[var(--ws-testimonials-text)] sm:text-2xl">"Webspire replaced our entire internal UI library. We ship landing pages in half the time now, and every section is accessible out of the box."</p>
</blockquote>
<div class="mt-8 flex items-center justify-center gap-4">
<div class="h-12 w-12 rounded-full bg-gradient-to-br from-indigo-400 to-purple-500"></div>
<div class="text-left">
<p class="text-sm font-semibold text-[var(--ws-testimonials-text)]">Sarah Chen</p>
<p class="text-sm text-[var(--ws-testimonials-text-muted)]">Head of Design, Acme Corp</p>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
testimonialsocial-proofquotetrustlanding-page
Slots
| Name | Required | Description |
|---|---|---|
| quote | Yes | The testimonial text. |
| avatar | No | Customer photo or placeholder. |
| attribution | Yes | Name and role of the quoted person. |
Centered single-quote testimonial — the simplest social proof pattern. Use for a single featured customer quote between content sections.