quote blockquote testimonial attribution citation quote blockquote citation testimonial attribution accent-border styled blockquote with author quote with accent border
Quote Base
Fetch pattern JSON:
curl https://webspire.de/patterns/quote/base.json base.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)]">"Design is not just what it looks like and feels like. Design is how it works. The best interfaces disappear -- they let users accomplish their goals without friction."</p>
</blockquote>
<figcaption class="mt-4 pl-6">
<span class="font-semibold text-[var(--ws-quote-text)]">Sarah Chen</span>
<span class="mx-2 text-[var(--ws-quote-text-soft)]" aria-hidden="true">—</span>
<span class="text-sm text-[var(--ws-quote-text-soft)]">Head of Design, Acme Corp</span>
</figcaption>
</figure>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
quoteblockquotetestimonialattributioncitation
Slots
| Name | Required | Description |
|---|---|---|
| quote | Yes | The blockquote text content. |
| attribution | Yes | Author name and role in figcaption. |
Clean blockquote with a left indigo accent border and author attribution below. Uses semantic HTML with figure, blockquote, and figcaption for proper document structure.