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 blockquote and cite
Responsive grid layouts with data-layout="grid"
Avatar integration with user-avatar
Star ratings with icon-wc
carousel-wc component 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.
<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.
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:
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.
<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 data-item-width="auto" data-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:
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 ::before pseudo-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-wc component provides keyboard navigation (arrow keys, Home/End), prev/next buttons, clickable dot indicators, and full ARIA semantics. It also respects prefers-reduced-motion.
Performance: Use loading="lazy" on avatar images that are below the fold. For above-the-fold testimonials, use loading="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.