Testimonial Avatar

Fetch pattern JSON: curl https://webspire.de/patterns/testimonials/avatar.json

avatar.html

<section class="ws-testimonials bg-[var(--ws-testimonials-bg)] py-24">
  <div class="mx-auto max-w-3xl px-6 text-center">
    <div class="mx-auto h-[120px] w-[120px] rounded-full bg-[var(--ws-testimonials-card-bg)] flex items-center justify-center ring-4 ring-indigo-100">
      <svg class="h-16 w-16 text-[var(--ws-testimonials-text-muted)]" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" /></svg>
    </div>
    <div class="mt-6 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>
    <blockquote class="mt-8">
      <p class="text-pretty text-xl font-medium italic leading-relaxed text-[var(--ws-testimonials-text)] sm:text-2xl">"Switching to Webspire was the best decision we made this year. Our design velocity tripled and every component ships with dark mode and accessibility baked in."</p>
    </blockquote>
    <div class="mt-8">
      <p class="text-base font-semibold text-[var(--ws-testimonials-text)]">Marcus Rivera</p>
      <p class="text-sm text-[var(--ws-testimonials-text-muted)]">VP of Engineering, NovaTech</p>
    </div>
  </div>
</section>

Details

Family

testimonials

Tier

enhanced

Kind

section

Extends

testimonials/base

Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste

Stable Published

testimonialavatarsocial-proofquotetrustlanding-page

Slots

Name	Required	Description
avatar	Yes	Large circular customer photo (120px).
rating	No	Star rating row (1-5 stars).
quote	Yes	The testimonial text in italic style.
attribution	Yes	Name and company of the quoted person.

Avatar-focused testimonial with a large centered photo, five-star rating, and italic quote. Extends the base testimonial pattern with visual emphasis on the person behind the quote, increasing trust and credibility.