Steph HuynhA left-aligned quote in the first column of a responsive row.
● Patterns / Testimonial
Testimonial.
Testimonial is the system's attributed quote pattern. It presents a direct quote with typographic weight and a clean attribution line so the reader hears from someone other than the page author.
How the pattern behaves
Testimonial centers the quote by default. The opening mark, blockquote body, and attribution line are the only elements: no avatar, no star rating, no card chrome. The restraint keeps focus on what was actually said and who said it.
Attribution is composable: name is required, title and company are optional. When both are present they render as title | company after the name, all in muted foreground so the name stays the anchor point. Pass align="start" when the parent lays quotes out in columns.
Source of truth
The component is a semantic figure and blockquote pair. The quote body is a children snippet; name,
title, company, and align are props. No internal layout decisions are made about how
testimonials stack or divide. That spacing is the responsibility of the parent context.
Pattern roles
Testimonial has a narrow job. These are the contexts it is designed for.
Social proof anchor
Presents a direct, attributed quote so a reader hears from someone other than the author of the page.
Editorial accent
Uses a serif opening mark and sans-serif quote body to give the content weight without adding heavy UI chrome.
Flexible attribution
Supports name-only, name plus title, and name plus title plus company so it adapts to different attribution contexts.
Anatomy
Three elements compose the testimonial. Each one has a single job.
A direct, attributed quote presented with typographic weight and a clean attribution line.
Opening mark
A large serif quotation mark in primary color. Signals the start of the quote and ties it to the accent palette.
Blockquote
The main sans-serif text block. Sized up from body copy on md breakpoints to give the quote weight without changing alignment.
Attribution line
figcaption with name in label style, optional title and company in muted foreground (title | company). Optional nameHref link. Centered layouts include short horizontal rules; align="start" omits them.
Layout contexts
Testimonial handles the quote itself. The parent owns how multiple quotes are arranged.
Single quote
One centered Testimonial inside a max-width container. Default for case study callouts and isolated social proof.
Stacked list
Two or more quotes in a vertical list with space-y-14. Each quote reads as its own moment on narrow viewports.
Three column row
On large screens, three quotes in a grid with divide-x dividers and align="start". Stacks vertically below lg. Wrap in bg-muted/20 when the block needs separation from surrounding sections.
Three column row (live)
Column dividers replace per-quote top borders for a cleaner grid.
Stacks vertically below the large breakpoint with gap-14 between quotes.
<div class="rounded-lg bg-muted/20 p-8 md:p-10">
<div class="grid gap-14 lg:grid-cols-3 lg:gap-0 lg:divide-x lg:divide-border/60">
<article class="first:lg:pl-0 last:lg:pr-0 lg:px-8">
<Testimonial align="start" name="..." title="..." company="...">
<p>Quote body.</p>
</Testimonial>
</article>
<!-- repeat per quote -->
</div>
</div>Attribution variants
Attribution adapts to how much information is available without changing the component's visual weight.
Name only
The quote speaks for itself.
Name + title
Context about the person's role adds credibility.
Name + title + company
The full attribution when all information is available.
Center aligned (default)
Default alignment for single quotes and editorial pauses.
Start aligned
Start alignment for column layouts and left-rail pages.
Guidelines
- Use Testimonial when the quote is worth pausing on, not for inline citations or incidental remarks.
- Keep the quote body short enough to read at a glance; longer quotes work in context but lose impact when stacked.
- Always provide a real name. Title and company are optional but add credibility when available.
- Use align="start" when quotes sit in a multi-column grid. Default center works for single quotes.
- For three or more quotes, stack with gap-14 on small screens and use a three-column grid with divide-x on lg. Pair with MetadataLabel or a case study heading above the block.
- Do not nest other interactive elements inside the quote body. The component has no call-to-action affordance by design.
In practice
Is this a direct, attributed quote from a real person?
Use Testimonial.
Does the attribution include a company?
Pass both title and company. They render as title | company.
Is the quote very long?
Trim it. A shorter quote reads with more confidence in this pattern.
Are multiple testimonials in a row?
Use align="start", gap-14 when stacked, and lg:grid-cols-3 with lg:divide-x when side by side. Add lg:px-8 padding inside each column.
Does the context need a heading above the testimonials?
Pair with MetadataLabel on marketing pages or an h2 on case studies. Link to the related case study when quotes come from one project.
Related patterns
Other patterns in the system, in the same order as the documentation sidebar.