Testimonials
Testimonial section patterns for landing pages and marketing sites. Quote cards, avatar grids, and carousel layouts.
Overview
Testimonials are essential for building credibility on marketing pages. These patterns use semantic <blockquote> and <cite> elements for proper quote attribution, combined with data-layout="grid" for responsive card layouts.
Key features:
- Semantic HTML with
blockquoteandcite - Responsive grid layouts with
data-layout="grid" - Avatar integration with
user-avatar - Star ratings with
icon-wc carousel-wccomponent for featured testimonials- Accessible by default
Simple Quotes
The most straightforward testimonial pattern: quote cards with author attribution. Uses data-layout="grid" for a responsive layout that automatically adjusts columns based on available space.
Simple testimonial quotes
<section class="testimonials" data-layout="center" data-layout-max="wide" data-layout-gap="2xl"> <header class="testimonials-header" data-layout="stack" data-layout-gap="s"> <h2>What our customers say</h2> <p class="lead">Hear from teams who have transformed their development workflow.</p> </header> <div data-layout="grid" data-layout-min="300px" data-layout-gap="l"> <blockquote class="testimonial"> <p>"This framework has completely changed how we build interfaces. We shipped our redesign in half the time."</p> <footer> <cite> <span class="author-name">Sarah Chen</span> <span class="author-role">Engineering Lead, TechCorp</span> </cite> </footer> </blockquote> <blockquote class="testimonial"> <p>"The semantic HTML approach means our sites are accessible by default."</p> <footer> <cite> <span class="author-name">Marcus Johnson</span> <span class="author-role">Senior Developer, StartupXYZ</span> </cite> </footer> </blockquote> <blockquote class="testimonial"> <p>"No build step, no complex configuration. We went from idea to production in record time."</p> <footer> <cite> <span class="author-name">Elena Rodriguez</span> <span class="author-role">CTO, WebAgency</span> </cite> </footer> </blockquote> </div></section>With Avatars and Ratings
Enhanced testimonials featuring author avatars and star ratings. The user-avatar component displays profile images, while icon-wc renders star ratings.
Testimonials with avatars and star ratings
<div data-layout="grid" data-layout-min="300px" data-layout-gap="l"> <blockquote class="testimonial" data-layout="stack" data-layout-gap="m"> <div class="star-rating" data-layout="cluster" data-layout-gap="xs"> <icon-wc name="star" size="sm"></icon-wc> <icon-wc name="star" size="sm"></icon-wc> <icon-wc name="star" size="sm"></icon-wc> <icon-wc name="star" size="sm"></icon-wc> <icon-wc name="star" size="sm"></icon-wc> </div> <p>"The layout primitives are incredibly powerful. We've built complex dashboards with minimal custom CSS."</p> <footer> <div data-layout="cluster" data-layout-gap="s" data-layout-align="center"> <user-avatar data-size="lg"> <img src="user-photo.jpg" alt="" /> </user-avatar> <cite> <span class="author-name">Alex Thompson</span> <span class="author-role">Lead Developer, DataFlow</span> </cite> </div> </footer> </blockquote></div>Star Rating CSS
Add this style for the star rating color:
Star rating styles
.star-rating { color: var(--color-warning);}The avatar variant uses smaller text (font-size-md instead of lg), drops font-style: italic on quotes, and removes the border-top from footer. Override the base styles with:
Avatar variant overrides
.testimonial p { font-size: var(--font-size-md); font-style: normal;} .testimonial footer { border-top: none; padding-top: 0;}Carousel
A carousel of featured testimonials using the carousel-wc component. Larger cards with more prominent quotes, real prev/next buttons, clickable dot indicators, keyboard navigation, and full ARIA semantics.
Testimonial carousel
<section class="testimonials" data-layout="center" data-layout-max="wide" data-layout-gap="l"> <header class="testimonials-header" data-layout="stack" data-layout-gap="s"> <h2>Loved by teams everywhere</h2> <p class="lead">See what developers are saying about their experience.</p> </header> <carousel-wc item-width="auto" gap="l"> <blockquote class="testimonial" data-layout="stack" data-layout-gap="m"> <span class="quote-icon"> <icon-wc name="quote" size="xl"></icon-wc> </span> <p class="testimonial-quote">"The shift to semantic HTML has made our codebase so much cleaner. Junior developers can understand and contribute immediately."</p> <footer> <div data-layout="cluster" data-layout-gap="s" data-layout-align="center"> <user-avatar data-size="xl"> <img src="user-photo.jpg" alt="" /> </user-avatar> <cite> <span class="author-name">David Park</span> <span class="author-role">Engineering Manager, TechVenture</span> </cite> </div> </footer> </blockquote> <!-- Additional testimonials... --> </carousel-wc></section>Carousel CSS
Add these styles for carousel testimonial card styles:
Carousel testimonial card styles
carousel-wc .testimonial { width: min(500px, 85vw); padding: var(--size-xl); box-shadow: var(--shadow-md);} carousel-wc .carousel-dot { min-block-size: auto; min-inline-size: auto; padding: 0;} .testimonial-quote { font-size: var(--font-size-xl); line-height: var(--line-height-relaxed); color: var(--color-text); margin: 0;} .quote-icon { color: var(--color-interactive); opacity: 0.3;}Base Testimonial Styles
Common styles shared across all testimonial variants:
Base testimonial styles
.testimonials { padding-block: var(--size-2xl);} .testimonials-header { text-align: center; max-width: 60ch; margin-inline: auto;} .testimonials-header .lead { color: var(--color-text-muted);} .testimonial { margin: 0; padding: var(--size-l); background: var(--color-surface-raised); border-radius: var(--radius-l);} .testimonial p { font-size: var(--font-size-lg); font-style: italic; color: var(--color-text); margin: 0;} .testimonial footer { margin-top: var(--size-m); padding-top: var(--size-m); border-top: 1px solid var(--color-border-subtle);} .testimonial footer::before,.testimonial cite::before { content: none;} .testimonial cite { font-style: normal;} .testimonial .author-name { display: block; font-weight: var(--font-weight-semibold); color: var(--color-text);} .testimonial .author-role { display: block; font-size: var(--font-size-sm); color: var(--color-text-muted);}Layout Configuration
Common data attributes for testimonial sections:
| Element | Attribute | Values | Description |
|---|---|---|---|
data-layout="grid" |
data-layout-min |
CSS length (e.g., 300px) |
Minimum card width before wrapping. |
data-layout="stack" |
data-layout-gap |
xs s m l xl 2xl |
Vertical spacing between elements. |
data-layout="cluster" |
data-layout-gap |
xs s m l |
Gap between avatar and cite. |
data-layout="cluster" |
data-layout-align |
flex-start center flex-end |
Vertical alignment of items. |
carousel-wc |
data-item-width |
full auto CSS length |
Width of each carousel slide. |
carousel-wc |
data-gap |
xs s m l xl |
Gap between carousel slides. |
user-avatar |
data-size |
sm md lg xl |
Avatar size. |
Usage Notes
- Semantic markup: Always use
<blockquote>for testimonial quotes and<cite>for author attribution. This provides proper semantics for assistive technologies. - Avatar alt text: Avatar images should have empty
alt=""since the author name is provided in text. The image is decorative. - Quote marks: Include quotation marks in the text content rather than using CSS
::beforepseudo-elements. This ensures quotes are read by screen readers. - Star ratings: Consider adding a text alternative for ratings (e.g., "5 out of 5 stars") in a visually hidden span for accessibility.
- Carousel UX: The
carousel-wccomponent provides keyboard navigation (arrow keys, Home/End), prev/next buttons, clickable dot indicators, and full ARIA semantics. It also respectsprefers-reduced-motion. - Performance: Use
loading="lazy"on avatar images that are below the fold. For above-the-fold testimonials, useloading="eager". - Authenticity: Real testimonials with full names, titles, and company names are more credible. Consider linking to the author's profile or the company website.
Related
Layout Grid
Grid layout element documentation
User Avatar
Avatar component documentation
Icon Component
Icon element documentation
Carousel
Scroll carousel component documentation
Call to Action
CTA section patterns