quote blockquote avatar testimonial attribution profile quote blockquote avatar profile testimonial photo attribution quote with author avatar testimonial with profile image
Quote with Avatar
Fetch pattern JSON:
curl https://webspire.de/patterns/quote/with-avatar.json with-avatar.html
<figure class="ws-quote mx-auto max-w-3xl px-6 py-12">
<blockquote class="border-l-4 border-[var(--ws-quote-accent)] pl-6">
<p class="text-lg leading-relaxed text-[var(--ws-quote-text)]">"The best tools are the ones that get out of your way. Webspire gives us production-ready patterns that we can ship immediately without wrestling with configuration."</p>
</blockquote>
<figcaption class="mt-6 flex items-center gap-4 pl-6">
<div class="h-12 w-12 shrink-0 rounded-full bg-gradient-to-br from-indigo-400 to-indigo-600" aria-hidden="true"></div>
<div>
<span class="block font-semibold text-[var(--ws-quote-text)]">Marcus Rivera</span>
<span class="block text-sm text-[var(--ws-quote-text-soft)]">Senior Frontend Engineer, Stellar Labs</span>
</div>
</figcaption>
</figure>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
quoteblockquoteavatartestimonialattributionprofile
Slots
| Name | Required | Description |
|---|---|---|
| quote | Yes | The blockquote text content. |
| avatar | Yes | Circular avatar image or gradient placeholder. |
| attribution | Yes | Author name and role next to the avatar. |
Extends the base quote with a circular avatar placeholder next to the author attribution. The gradient placeholder can be swapped for an actual image. Uses the same semantic figure/blockquote/figcaption structure.