6 Pure CSS1 with JSPublished 2026-10-05Free · no sign-up
Seven ways to show what customers say: a classic quote card, a grid of short star-rated reviews, a swipeable slider, one large featured quote, an average rating with a breakdown, a review styled like a social post and a slowly scrolling ribbon of short quotes.
A testimonial card built from a figure with a blockquote and a figcaption naming the person, which is the semantic pattern for a quote with attribution. The large quotation mark is decoration drawn with a pseudo-element, and the initials avatar needs no photo.
View code
<figure class="tm1"><blockquote><p>We moved our whole catalogue in a weekend, and support answered every question within the hour.</p></blockquote><figcaption><span class="av" aria-hidden="true">MO</span><span><b>Mira Okafor</b><small>Owner, Kiln & Co</small></span></figcaption></figure>
Three short reviews in a responsive grid. The stars are a decorative row of characters hidden from screen readers, with the rating given as text such as Rated 5 out of 5, so the score is not lost for people who cannot see the stars.
View code
<div class="tm2"><figure><p class="st"><span aria-hidden="true">★★★★★</span><span class="sr">Rated 5 out of 5</span></p><blockquote>Arrived in two days and fits perfectly.</blockquote><figcaption>Jonas, Leipzig</figcaption></figure><figure><p class="st"><span aria-hidden="true">★★★★☆</span><span class="sr">Rated 4 out of 5</span></p><blockquote>Lovely colour. The strap could be longer.</blockquote><figcaption>Priya, Leeds</figcaption></figure><figure><p class="st"><span aria-hidden="true">★★★★★</span><span class="sr">Rated 5 out of 5</span></p><blockquote>Third one I have bought. Still going strong.</blockquote><figcaption>Tomás, Porto</figcaption></figure></div>
Testimonials in a horizontal scroll container with scroll-snap, so it can be swiped on touch screens and scrolled with a trackpad. Previous and next buttons scroll by one card with scrollBy, and the region is labelled so screen reader users know what it holds.
View code
<section class="tm3" aria-label="Customer stories"><div class="track" tabindex="0"><figure><blockquote>Setup took ten minutes. I expected a day.</blockquote><figcaption>Lena · Studio Nord</figcaption></figure><figure><blockquote>Our checkout finally feels fast on phones.</blockquote><figcaption>Arjun · Brew Lab</figcaption></figure><figure><blockquote>The team answered on a Sunday. Unheard of.</blockquote><figcaption>Sofia · Linea Home</figcaption></figure></div><div class="nav"><button type="button" aria-label="Previous story">←</button><button type="button" aria-label="Next story">→</button></div></section>
var t = document.querySelector('.tm3 .track'), bs = document.querySelectorAll('.tm3 button');
bs[0].onclick = function () { t.scrollBy({ left: -t.clientWidth, behavior: 'smooth' }); };
bs[1].onclick = function () { t.scrollBy({ left: t.clientWidth, behavior: 'smooth' }); };
04. Featured Quote Banner
TestimonialHero
One big quote for a landing page, set large with a balanced line wrap from text-wrap: balance. The attribution sits under a short rule, and the company name is plain text styled as a wordmark rather than a logo image, so it needs no alt text.
View code
<figure class="tm4"><blockquote><p>It is the first tool our whole team actually opens every morning.</p></blockquote><figcaption><span class="rule" aria-hidden="true"></span><b>Dana Whitfield</b>, Head of Operations · <span class="wm">northwind</span></figcaption></figure>
An average score with bars for each star level, the block that usually sits above a list of reviews. Each bar is a meter element with a text label, so the numbers are available to assistive technology, and the bar colour comes from a CSS accent.
A review laid out like a social media post, with a handle, a date in a time element and the post text. It is a styled figure, not an embed, so it loads instantly and sends nothing to a third party. Link the date to the original post if you have permission to quote it.
View code
<figure class="tm6"><figcaption><span class="av" aria-hidden="true">RK</span><span class="who"><b>Rafa K.</b><span>@rafabuilds</span></span><time datetime="2026-09-14">14 Sep</time></figcaption><blockquote>Rebuilt our pricing page with these components over lunch. Conversion is up and the page weighs less than the old hero image.</blockquote></figure>
Short review snippets drift sideways in a continuous ribbon. The list is duplicated once, the duplicate is aria-hidden so nothing is read twice, and the motion pauses on hover and stops entirely when reduced motion is requested, at which point the ribbon can be scrolled by hand.
View code
<div class="tm7"><ul class="row"><li>“Fast checkout.” <b>Ines</b></li><li>“Lovely packaging.” <b>Marc</b></li><li>“Exactly as pictured.” <b>Yuki</b></li><li>“Will order again.” <b>Ola</b></li></ul><ul class="row" aria-hidden="true"><li>“Fast checkout.” <b>Ines</b></li><li>“Lovely packaging.” <b>Marc</b></li><li>“Exactly as pictured.” <b>Yuki</b></li><li>“Will order again.” <b>Ola</b></li></ul></div>
A testimonial is a quotation with an attribution. Wrapping it in <figure> with the words in <blockquote> and the name in <figcaption> keeps the person and the quote together for assistive technology.
Stars need words
A row of star characters means nothing to a screen reader, or is read as five separate stars. Hide the stars with aria-hidden and add a text rating such as Rated 4 out of 5.
Real quotes only
Use quotes you have permission to publish, from real customers, with their real name or initials. Invented reviews mislead buyers and break consumer law in many countries; the names in these demos are placeholders to replace.
Moving testimonials
Auto-scrolling reviews should pause on hover and stop under prefers-reduced-motion. Duplicate content used to make a loop seamless must be aria-hidden so it is not read twice.
Frequently asked questions
Should I add review schema markup?
Only for reviews of your products collected on your site, and only when they are visible on the page. Search engines ignore self-serving reviews of your own business.
Can the slider work without JavaScript?
Yes. Scroll-snap makes it swipeable on its own; the script only powers the arrow buttons.
Where do the avatars come from?
They are initials in a circle, which needs no photo and works at any size.