Testimonial Grid
Grid of 3 to 6 testimonials shown all at once. Composes SingleQuoteTestimonial. Less prominent per quote than a single hero testimonial, but conveys breadth.
Live preview
Rendered with real component code. Each example demonstrates a documented variant.
Three-column card grid
Shipping this feature used to take our team two sprints. After adopting the new tooling, we cut that to three days without sacrificing quality.
The documentation is clear, the defaults are sensible, and the escape hatches are exactly where you expect them. That combination is rare.
We evaluated four alternatives. This was the only one our design and engineering teams could both get behind without a week of negotiation.
Two-column minimal grid
What customers say
Trusted by teams shipping fast
Our onboarding drop-off went from 42% to 18% within the first month. The pattern was the variable we changed.
I was skeptical about using a pre-built component for something this central to conversion. After reviewing the source, I stopped being skeptical.
The expired state alone saved us from a support spike during our last sale close. Customers saw a clear message instead of a broken timer.
We inherited a codebase with five different button implementations. Replacing them all with one component took an afternoon, not a week.
React props
Configure the component via props in React or via attributes in HTML.
| Prop | Type | Default | Description |
|---|---|---|---|
| testimonials | Testimonial[] | required | Array of 3 to 6 testimonial objects |
| testimonials[].quote | string | required | The testimonial text |
| testimonials[].name | string | required | Speaker full name |
| testimonials[].title | string | undefined | Speaker job title |
| testimonials[].company | string | undefined | Employer or organization name |
| testimonials[].avatar | string | undefined | URL of the speaker headshot image; presence switches style to "with-headshot" |
| columns | 2 | 3 | 3 | Number of columns at desktop widths |
| style | "minimal" | "card" | "card" | Visual treatment applied to each grid item |
| eyebrow | string | undefined | Small label displayed above the headline |
| headline | string | undefined | Section heading displayed above the grid |
| 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">
<link rel="stylesheet" href="path/to/testimonial-grid/styles.css">
<section class="tg tg--cols-3">
<p class="tg__eyebrow">What customers say</p>
<h2 class="tg__headline">Trusted by teams shipping fast</h2>
<div class="tg__grid">
<div class="tg__item">
<figure class="sqt sqt--card">
<blockquote class="sqt__quote">
<p>Shipping this feature used to take two sprints. Now it takes three days.</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>
</div>
<!-- repeat .tg__item for each testimonial -->
</div>
</section>Customization
Override these CSS custom properties to integrate the component into your brand.
.tg {
--tg-gap: 1.5rem;
--tg-column-min-width: 18rem;
--tg-grid-padding: 0 0 4rem;
--tg-eyebrow-color: #6b7280;
--tg-eyebrow-size: 0.8125rem;
--tg-eyebrow-letter-spacing: 0.08em;
--tg-headline-color: var(--brand-ink, #111827);
--tg-headline-size: 2rem;
--tg-headline-line-height: 1.25;
--tg-header-gap: 0.5rem;
--tg-header-margin-bottom: 2.5rem;
}