--- title: "Testimonials design: anatomy, variants and examples | Kombai" description: "Testimonials are short quotes from real customers, with a name, a role and a face, that back up what a page claims in their words." canonical_url: https://kombai.com/glossary/testimonials/ author: "The Kombai Team" --- # Testimonials Testimonials are short quotes from real customers, with a name, a role and a face, that back up what a page claims in their words. - Also called: reviews, wall of love - Platforms: Web, Mobile - In the Kombai gallery: [313 web designs](https://kombai.com/gallery/web/testimonials/), [33 mobile designs](https://kombai.com/gallery/mobile/testimonials/) - [Kite](https://kombai.com/gallery/inspirations/testimonials-web-1/) (Web) - [Harbor Stories](https://kombai.com/gallery/inspirations/testimonials-ios-3/) (Mobile) - [Alder Stories](https://kombai.com/gallery/inspirations/testimonials-web-3/) (Web) ## What are testimonials? A testimonials section quotes customers about what a product did for them. Each quote carries a name, a role or company and usually a photo or initials, so it reads as a person and not as marketing copy. A page can show one strong quote or a whole wall of them. - Every quote is attributed: a name, a role or company and a face. - The best quotes name a specific result, not a general feeling. ## When to use testimonials - **Backing up a claim.** Right after a feature or a price, where people wonder if it is true. - **Before a commitment.** Next to sign-up, paywall and demo forms. - **Products people choose by word of mouth.** Apps, courses and services bought on trust. ## When not to use one - **Quotes you made up.** Invented or anonymous praise costs more trust than it earns. - **Vague praise.** "Great product!" says nothing. Use a quote with a detail. - **Inside a task.** Mid-checkout or mid-form, a quote is a distraction. ## Anatomy 1. **Quote**: One specific result, in their words 2. **Avatar**: Photo or initials 3. **Name and role**: Who said it, and where 4. **Rating**: Optional stars 5. **Controls**: Previous and next, for sliders 6. **States**: Initials, photo, focus ## Variants We sorted every testimonials design in the Kombai gallery and found six patterns. ### 1. Quote wall The default. A grid or masonry of quote cards, each with a name, a role and a small avatar. - [Plinth](https://kombai.com/gallery/inspirations/testimonials-web-214/) (Web) - [Setpiece](https://kombai.com/gallery/inspirations/testimonials-web-69/) (Web) - [Vantrel](https://kombai.com/gallery/inspirations/testimonials-web-7/) (Web) ### 2. Single featured quote One large quote with a face and a name, given the whole section or screen. - [Trellis](https://kombai.com/gallery/inspirations/testimonials-web-70/) (Web) - [Fernwake](https://kombai.com/gallery/inspirations/testimonials-ios-24/) (Mobile) - [Brindle](https://kombai.com/gallery/inspirations/testimonials-ios-28/) (Mobile) ### 3. Video and photo stories Portrait cards with a play button or a short quote over the photo, often linking to a full story. - [Grove](https://kombai.com/gallery/inspirations/testimonials-web-5/) (Web) - [Cardinal Stories](https://kombai.com/gallery/inspirations/testimonials-web-2/) (Web) - [Sorrel](https://kombai.com/gallery/inspirations/testimonials-web-219/) (Web) ### 4. Mixed mosaic Quotes, portraits, logos and award badges in one grid, with a big rating or count in the middle. - [Solva](https://kombai.com/gallery/inspirations/testimonials-web-6/) (Web) - [Brindle](https://kombai.com/gallery/inspirations/testimonials-ios-16/) (Mobile) - [Keel](https://kombai.com/gallery/inspirations/testimonials-web-4/) (Web) ### 5. Card slider A row of quote cards that swipes sideways or steps with arrows, one or a few in view at a time. - [Solvi Stories](https://kombai.com/gallery/inspirations/testimonials-ios-1/) (Mobile) - [Hatchway](https://kombai.com/gallery/inspirations/testimonials-web-71/) (Web) - [Murmur Stories](https://kombai.com/gallery/inspirations/testimonials-ios-2/) (Mobile) ### 6. Social posts Quotes styled as posts, with handles, mentions and dates, so they read as unprompted. - [Pulseward](https://kombai.com/gallery/inspirations/testimonials-web-252/) (Web) - [Sundial](https://kombai.com/gallery/inspirations/testimonials-web-60/) (Web) - [Larkscribe](https://kombai.com/gallery/inspirations/testimonials-web-17/) (Web) ## Where testimonials show up ### Onboarding and paywalls Mobile apps put a rating and two or three quotes right before the trial or plan choice. - [Hushwood](https://kombai.com/gallery/inspirations/testimonials-ios-26/) (Mobile) - [Jonquil](https://kombai.com/gallery/inspirations/testimonials-ios-29/) (Mobile) - [Cindral](https://kombai.com/gallery/inspirations/testimonials-ios-31/) (Mobile) ### Ratings and review pages An average score up top, then individual reviews with stars underneath. - [Fermata](https://kombai.com/gallery/inspirations/testimonials-web-103/) (Web) - [Larkmoor](https://kombai.com/gallery/inspirations/testimonials-ios-33/) (Mobile) - [Marlowe](https://kombai.com/gallery/inspirations/testimonials-web-148/) (Web) ### Next to sign-in and setup forms A split screen with the form on one side and one customer quote on the other. - [Cellforge](https://kombai.com/gallery/inspirations/testimonials-web-43/) (Web) - [Postmarrow](https://kombai.com/gallery/inspirations/testimonials-web-36/) (Web) - [Orbitry](https://kombai.com/gallery/inspirations/testimonials-web-44/) (Web) ### Press quotes Lines from reviews and articles, credited to the publication instead of a person. - [Kinover](https://kombai.com/gallery/inspirations/testimonials-web-16/) (Web) - [Pelland](https://kombai.com/gallery/inspirations/testimonials-ios-11/) (Mobile) - [Kelvane](https://kombai.com/gallery/inspirations/testimonials-ios-32/) (Mobile) ## Testimonials vs similar components | | [Testimonials](https://kombai.com/glossary/testimonials/) | [Logo cloud](https://kombai.com/glossary/logo-cloud/) | [Stats section](https://kombai.com/glossary/stats-section/) | [Carousel](https://kombai.com/glossary/carousel/) | |---|---|---|---|---| | Proof | What customers say | Who uses it | How much, how fast | None, it holds content | | Reading | A few sentences | A glance | A few numbers | One slide at a time | | Best for | Specific outcomes | Recognizable names | Scale and results | Several items in little space | ## Build notes - Put the quote in a
and the name outside it, in a
or the line below. - Give a decorative avatar alt="", since the name beside it already says who it is. - A slider is a carousel: label slides "1 of 3" and give each arrow button a name. - Use aria-live="polite" on slides that only change when someone clicks. - If quotes rotate on their own, add a pause button and stop on hover and focus. - Give star ratings a text label, like "Rated 4 out of 5". ## FAQ ### What makes a good testimonial? A specific result from a named person people can picture. "We closed the books two days earlier" beats "Love this product". Keep it to one or two sentences, and cut the rest of the interview. ### How many testimonials should a page show? One strong quote beats ten weak ones. Use a single featured quote next to a key claim, and save a wall of quotes for a dedicated page where people came to read them. ### Should testimonials have photos? Yes, when you have permission. A face makes a quote feel real. Without a photo, initials in a colored circle keep the layout even and still read as a person. ### Are testimonial sliders a good idea? Only when space is tight. A slider hides every quote but one, so put the strongest first. Never rotate it automatically without a pause button, which WCAG requires for content that moves on its own. ## Related terms - [Logo cloud](https://kombai.com/glossary/logo-cloud/) - [Stats section](https://kombai.com/glossary/stats-section/) - [Carousel](https://kombai.com/glossary/carousel/) - [Avatar](https://kombai.com/glossary/avatar/) ## References - [MDN: The blockquote element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/blockquote) - [WAI-ARIA Authoring Practices: Carousel pattern](https://www.w3.org/WAI/ARIA/apg/patterns/carousel/) - [W3C WAI: Decorative images](https://www.w3.org/WAI/tutorials/images/decorative/) - [WCAG 2.2: Understanding pause, stop, hide](https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide.html)