● 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. The opening mark, the serif body, and the 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.

Source of truth

The component is a semantic figure and blockquote pair. The quote body is a children snippet; name, title, and company are string props. No internal layout decisions are made about how testimonials stack — that 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 serif type and a typographic quote mark 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.

A. Person, Lead Designer·Studio Name

Opening mark

A large primary-colored quotation mark that signals the start of the quote and ties it to the accent palette.

Blockquote

The main serif text block. Sized up from body copy to give the quote a sense of weight and deliberateness.

Attribution line

A short horizontal rule followed by the name in label style, with optional title and company in muted foreground.

Attribution variants

Attribution adapts to how much information is available without changing the component's visual weight.

Name only

The quote speaks for itself.

A. Person

Name + title

Context about the person's role adds credibility.

B. Person, Engineering Manager

Name + title + company

The full attribution when all information is available.

C. Person, Product Director·Agency Name

Guidelines

Use Testimonial when the quote is worth pausing on — do not use it 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.
When showing multiple testimonials, add vertical spacing between them so each quote reads as its own moment.
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 stacking together?

Add space-y-14 or equivalent between them in the parent.

Does the context need a heading above the testimonials?

Pair with MetadataLabel or SectionHeader before the testimonial block.