testimonials quote single social-proof review testimonial quote review social-proof stars rating large single testimonial quote hero testimonial with stars
Testimonial Quote
Fetch pattern JSON:
curl https://webspire.de/patterns/testimonials/quote.json quote.html
<section class="ws-testimonials bg-[var(--ws-testimonials-bg)] py-20">
<div class="mx-auto max-w-4xl px-6">
<div class="text-center">
<svg class="mx-auto h-10 w-10 text-[var(--ws-testimonials-border)]" fill="currentColor" viewBox="0 0 24 24"><path d="M4.583 17.321C3.553 16.227 3 15 3 13.011c0-3.5 2.457-6.637 6.03-8.188l.893 1.378c-3.335 1.804-3.987 4.145-4.247 5.621.537-.278 1.24-.375 1.929-.311 1.804.167 3.226 1.648 3.226 3.489a3.5 3.5 0 01-3.5 3.5c-1.073 0-2.099-.49-2.748-1.179zm10 0C13.553 16.227 13 15 13 13.011c0-3.5 2.457-6.637 6.03-8.188l.893 1.378c-3.335 1.804-3.987 4.145-4.247 5.621.537-.278 1.24-.375 1.929-.311 1.804.167 3.226 1.648 3.226 3.489a3.5 3.5 0 01-3.5 3.5c-1.073 0-2.099-.49-2.748-1.179z"/></svg>
<blockquote class="mt-8">
<p class="text-balance text-2xl font-medium leading-relaxed text-[var(--ws-testimonials-text)] sm:text-3xl">"Webspire saved us weeks of work. We went from empty page to polished landing site in an afternoon. The patterns just work — responsive, accessible, dark mode ready."</p>
</blockquote>
<div class="mt-8 flex flex-col items-center gap-4 sm:flex-row sm:justify-center">
<div class="h-14 w-14 rounded-full bg-gradient-to-br from-indigo-400 to-purple-500"></div>
<div class="text-center sm:text-left">
<p class="text-base font-semibold text-[var(--ws-testimonials-text)]">Elena Petrova</p>
<p class="text-sm text-[var(--ws-testimonials-text-muted)]">CTO at Meridian Labs</p>
</div>
</div>
<div class="mt-8 flex items-center justify-center gap-1">
<svg class="h-5 w-5 text-amber-400" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
<svg class="h-5 w-5 text-amber-400" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
<svg class="h-5 w-5 text-amber-400" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
<svg class="h-5 w-5 text-amber-400" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
<svg class="h-5 w-5 text-amber-400" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
testimonialsquotesinglesocial-proofreview
Slots
| Name | Required | Description |
|---|---|---|
| quote | Yes | Large testimonial text. |
| author | Yes | Avatar, name, and role. |
| rating | No | Star rating below the author. |
Centered single-quote testimonial. Large decorative quotation mark icon, big quote text, author with avatar and role, and 5-star rating. High impact for landing pages where one strong quote is more effective than a grid.