UI components · Marketing
Testimonial
Also called: Testimonials, Customer quotes, Customer stories, Reviews section
A section on a marketing site that shows real customers' own words. Each one is a quote plus the speaker's photo, name, job title, and company, using word of mouth to win over new visitors.
Click “Labeled” to see what each part is called, or “Anti-pattern” to see the most common mistake.
How to tell AI
Swap in your own content firstAdd a testimonial section after the feature grid. Under the h2 heading, 3 equal-width quote cards (3 columns on desktop, horizontal swipe on mobile), white background, 16px corner radius, 28px padding. The top of each card is the customer's quote (16px, line height 1.7, 5 lines max). The bottom row is a 40px round photo, the name (bold), and "Title · Company" (14px gray). Only use the real testimonials I provide: [quote, name, title, company, photo]. Where I haven't provided one yet, show gray placeholder text "Testimonial placeholder." Don't invent names, companies, or ratings, and don't add five-star icons.
Send to
01Decide
Does your content look like this?
Check both columns to confirm Testimonial is what you need.
Use Testimonial when
- Marketing sites and landing pages that need real customers' words to prove the product works
- Right before the pricing table or CTA section, to answer visitors' "does it really work?" doubts
- Industry solution pages that show results from customers in the same industry
Pick something else when
When you don't have real customers yet or can't get their permission. Don't fill the space with made-up quotes.
Large numbers of reviews that users post themselves and can reply to. Use a comment list.
Use insteadCommentWhen you only want to show which companies use you. A logo wall is simpler.
Use insteadLogo Wall
Not sure? Upload a screenshot and page analysis will check which layout each block should use.
02Pitfalls
Common misuse
It looks like it works, but it makes things harder for users.
- 01
Made-up customer names, photos, and five-star ratings that look like they came straight from a template
The wireframe below shows this case. The red dashed box marks the problem.The wireframe on the right shows this case. The red dashed box marks the problem.
- 02
Quotes that only say "Great product" or "Highly recommend" without saying what problem it solved
- 03
Bylines like "Mr. Smith" or "CEO, a company" that don't say who it is, so there's no credibility
03Spot it
How to spot it
Look at the overall structure first, then check a few features you can spot at a glance.
Structure
A section heading and a set of testimonials. Each one is a customer quote plus a byline (photo, name, title, company), optionally with a company logo, a rating, or a case study link. Multiple testimonials sit side by side or in a carousel.
PartsClick one to highlight it in the wireframe above
04Explained
In detail
A testimonial section is usually 2–3 quote cards in a row, or one large quote next to a photo of the customer. Each testimonial has two parts: a quote in the customer's own words (saying exactly what got better after using the product), and the speaker's photo, name, job title, and company. Some add the company logo, a rating, or a "Read the full story" link. With many testimonials, they're often turned into a carousel you can swipe through.
It's different from a Comment. Comments are posted by users themselves under products or articles, there are lots of them, and people can reply. Testimonials are a few quotes picked by the company and shown with the customer's permission. How it differs from a Blockquote: a blockquote is just a quoted passage in the typography, while a testimonial also needs the speaker's identity. How it differs from a Logo Wall: a logo wall only shows customers' logos to say who uses it, while a testimonial is a specific person saying something specific.
Testimonials must be things real customers actually said and agreed to let you use. Never invent names, titles, or ratings. If you don't have real testimonials yet, leave the section out. Specific quotes ("Closing out the day went from two hours to ten minutes") are far more convincing than "Great product." Sign each one with full name, title, and company, and use the person's real photo. A quote signed only "Mr. Smith" looks fake.
Developer infoTerm ID, DOM cues, match priority
- Term ID
component-testimonial- DOM selectors
The extension matches these CSS selectors when it inspects a page locally (tags, ARIA roles, common component library classes).
section:is([class*="testimonial" i], [id*="testimonial" i])figure:has(> blockquote):has(> figcaption :is(img, [class*="avatar" i])):is(div, section, ul):has(> figure > blockquote + figcaption, > li > figure > blockquote + figcaption):has(> :nth-child(2))
- Class keywords
Class names, ids and data-testid are split into words and matched in order, so page-header, PageHeader_root__x7a and pageHeader all become page, header.
testimonialstestimonialtestimonial-gridtestimonials-gridtestimonial-cardtestimonial-slidercustomer-storiescustomer-quotessuccess-storieswall-of-love
- Component names
React / Vue component names read in development mode. Case-insensitive; library prefixes such as El, Ant and Mui are dropped.
TestimonialTestimonialsTestimonialCardTestimonialSectionTestimonialGridCustomerQuote
- Structure
Computed from how the element is laid out and styled. It only adds to the score and never decides on its own.
starts with headinggrid of itemsrepeated items
- Priority
- 4 · when several match at the same level, the higher priority wins
- Version
- v2 · updated Sep 30, 2026