Testimonial Card
ProA quotation card displaying a customer or user testimonial with their avatar, name, and role. Designed for social proof sections on marketing pages, product pages, and case study layouts. Supports optional star ratings and company logos.
4 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Default | Standard testimonial with quote, avatar, name, and role. | Use for customer testimonials on landing pages and product pages. |
| With Rating | Testimonial card including a star rating above the quote. | Use for product reviews and rated feedback displays. |
Usage Guidelines
Do
Include a real name, role, and company for credibility.
Don't
Fabricate testimonials — always use real quotes with permission.
Do
Use an avatar photo when available — it increases trust.
Don't
Use low-quality or placeholder avatar images in production.
Do
Keep testimonial text concise — 2–3 sentences is ideal.
Don't
Place too many testimonials in a row — curate 3–6 strong ones.
Code
Design Tokens
Accessibility
- Use <figure> and <blockquote> for proper quotation semantics.
- Avatar images should have alt text with the person's name.
- Star ratings need aria-label="4 out of 5 stars" or similar textual description.