Single Quote Testimonial
One prominent customer quote with attribution (name, title, company), optionally with headshot or company logo. The most direct form of social proof when one voice is more credible than many.
Live preview
Rendered with real component code. Each example demonstrates a documented variant.
Minimal style
We shipped our launch microsite in a week instead of a quarter. The pattern documentation meant we never had to guess what good looked like.
Card style
We shipped our launch microsite in a week instead of a quarter. The pattern documentation meant we never had to guess what good looked like.
With headshot
We shipped our launch microsite in a week instead of a quarter. The pattern documentation meant we never had to guess what good looked like.
Priya NairReact props
Configure the component via props in React or via attributes in HTML.
| Prop | Type | Default | Description |
|---|---|---|---|
| quote | string | required | The testimonial text shown inside the blockquote |
| attribution | { name, title?, company?, avatar?, companyLogo? } | required | Speaker identity; name is required, the rest are optional |
| style | "minimal" | "card" | "with-headshot" | "minimal" | Visual treatment |
| className | string | undefined | Extra class appended to the root element |
HTML usage
The HTML variant uses the same shared styles and class names. Drop into any stack.
<link rel="stylesheet" href="path/to/single-quote-testimonial/styles.css">
<figure class="sqt sqt--card">
<blockquote class="sqt__quote">
<p>We shipped our launch microsite in a week instead of a quarter.</p>
</blockquote>
<figcaption class="sqt__attribution">
<span>
<span class="sqt__name">Sarah Chen</span>
<span class="sqt__meta">Head of Engineering, Acme Corp</span>
</span>
</figcaption>
</figure>Customization
Override these CSS custom properties to integrate the component into your brand.
.sqt {
--sqt-quote-font-size: 1.25rem;
--sqt-quote-color: var(--brand-ink, #111827);
--sqt-quote-line-height: 1.7;
--sqt-name-color: var(--brand-ink, #111827);
--sqt-meta-color: #6b7280;
--sqt-card-bg: var(--brand-surface, #f9fafb);
--sqt-card-border-color: #e5e7eb;
--sqt-card-border-radius: 0.75rem;
--sqt-card-padding: 2rem;
--sqt-avatar-size: 3rem;
--sqt-max-width: 42rem;
}