Testimonials — Audience and outcome table
Layout tags: table,numbers,compact
Testimonials — Rating summary and review list
A rating summary above four detailed reviews with reviewer identity columns. Use for scannable review content with dates.
1440 × 900
Open in new tabexport default function TestimonialsReviewList() {
return (
<section className="bg-white text-neutral-900">
<div className="mx-auto max-w-6xl px-6 py-16 sm:py-24">
<header className="flex flex-col gap-8 sm:flex-row sm:items-end sm:justify-between">
<div className="max-w-xl">
<h2 className="text-3xl font-semibold tracking-tight text-balance sm:text-4xl">Heading for customer ratings and reviews</h2>
<p className="mt-4 text-lg text-pretty text-neutral-600">
A short introduction that explains whose reviews these are and what their feedback covers.
</p>
</div>
<div className="shrink-0 sm:text-right">
<p className="text-5xl font-semibold tracking-tight">4.9</p>
<div className="mt-3 flex sm:justify-end">
<div className="flex gap-1 text-neutral-900">
<span className="sr-only">Rated 4.9 out of 5</span>
<svg
aria-hidden="true"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
className="size-4"
>
<path d="m12 3 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2-5.6-2.9-5.6 2.9 1.1-6.2L3 9.6l6.2-.9Z" />
</svg>
<svg
aria-hidden="true"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
className="size-4"
>
<path d="m12 3 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2-5.6-2.9-5.6 2.9 1.1-6.2L3 9.6l6.2-.9Z" />
</svg>
<svg
aria-hidden="true"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
className="size-4"
>
<path d="m12 3 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2-5.6-2.9-5.6 2.9 1.1-6.2L3 9.6l6.2-.9Z" />
</svg>
<svg
aria-hidden="true"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
className="size-4"
>
<path d="m12 3 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2-5.6-2.9-5.6 2.9 1.1-6.2L3 9.6l6.2-.9Z" />
</svg>
<svg
aria-hidden="true"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
className="size-4"
>
<path d="m12 3 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2-5.6-2.9-5.6 2.9 1.1-6.2L3 9.6l6.2-.9Z" />
</svg>
</div>
</div>
<p className="mt-2 text-sm text-neutral-500">from 1,284 reviews</p>
</div>
</header>
<ul role="list" className="mt-10 border-t border-neutral-200">
<li className="grid gap-8 border-b border-neutral-200 py-7 md:grid-cols-[192px_1fr]">
<div className="flex items-start gap-3">
<span
aria-hidden="true"
className="flex size-10 shrink-0 items-center justify-center rounded-full bg-neutral-200 text-sm font-medium text-neutral-600"
>
AR
</span>
<div className="min-w-0">
<p className="text-sm font-semibold">Alex Rivera</p>
<p className="mt-1 text-sm text-neutral-500">Verified customer</p>
</div>
</div>
<div className="min-w-0">
<div className="flex gap-1 text-neutral-900">
<span className="sr-only">Rated 5 out of 5</span>
<svg
aria-hidden="true"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
className="size-4"
>
<path d="m12 3 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2-5.6-2.9-5.6 2.9 1.1-6.2L3 9.6l6.2-.9Z" />
</svg>
<svg
aria-hidden="true"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
className="size-4"
>
<path d="m12 3 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2-5.6-2.9-5.6 2.9 1.1-6.2L3 9.6l6.2-.9Z" />
</svg>
<svg
aria-hidden="true"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
className="size-4"
>
<path d="m12 3 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2-5.6-2.9-5.6 2.9 1.1-6.2L3 9.6l6.2-.9Z" />
</svg>
<svg
aria-hidden="true"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
className="size-4"
>
<path d="m12 3 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2-5.6-2.9-5.6 2.9 1.1-6.2L3 9.6l6.2-.9Z" />
</svg>
<svg
aria-hidden="true"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
className="size-4"
>
<path d="m12 3 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2-5.6-2.9-5.6 2.9 1.1-6.2L3 9.6l6.2-.9Z" />
</svg>
</div>
<h3 className="mt-3 text-lg font-semibold">Title about the main benefit</h3>
<blockquote className="mt-2 text-base text-neutral-600">
“A customer quote that names the main benefit in their own words. Add one concrete detail about the improvement that mattered most to them.”
</blockquote>
<p className="mt-4 text-sm text-neutral-500">
<time dateTime="2026-09-18">Sep 18, 2026</time> · Review category
</p>
</div>
</li>
<li className="grid gap-8 border-b border-neutral-200 py-7 md:grid-cols-[192px_1fr]">
<div className="flex items-start gap-3">
<span
aria-hidden="true"
className="flex size-10 shrink-0 items-center justify-center rounded-full bg-neutral-200 text-sm font-medium text-neutral-600"
>
JL
</span>
<div className="min-w-0">
<p className="text-sm font-semibold">Jordan Lee</p>
<p className="mt-1 text-sm text-neutral-500">Verified customer</p>
</div>
</div>
<div className="min-w-0">
<div className="flex gap-1 text-neutral-900">
<span className="sr-only">Rated 5 out of 5</span>
<svg
aria-hidden="true"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
className="size-4"
>
<path d="m12 3 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2-5.6-2.9-5.6 2.9 1.1-6.2L3 9.6l6.2-.9Z" />
</svg>
<svg
aria-hidden="true"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
className="size-4"
>
<path d="m12 3 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2-5.6-2.9-5.6 2.9 1.1-6.2L3 9.6l6.2-.9Z" />
</svg>
<svg
aria-hidden="true"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
className="size-4"
>
<path d="m12 3 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2-5.6-2.9-5.6 2.9 1.1-6.2L3 9.6l6.2-.9Z" />
</svg>
<svg
aria-hidden="true"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
className="size-4"
>
<path d="m12 3 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2-5.6-2.9-5.6 2.9 1.1-6.2L3 9.6l6.2-.9Z" />
</svg>
<svg
aria-hidden="true"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
className="size-4"
>
<path d="m12 3 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2-5.6-2.9-5.6 2.9 1.1-6.2L3 9.6l6.2-.9Z" />
</svg>
</div>
<h3 className="mt-3 text-lg font-semibold">Title about the quality of support</h3>
<blockquote className="mt-2 text-base text-neutral-600">
“An endorsement that explains why this option was the right fit. Include a specific reason the customer would recommend the experience to
someone else.”
</blockquote>
<p className="mt-4 text-sm text-neutral-500">
<time dateTime="2026-09-12">Sep 12, 2026</time> · Review category
</p>
</div>
</li>
<li className="grid gap-8 border-b border-neutral-200 py-7 md:grid-cols-[192px_1fr]">
<div className="flex items-start gap-3">
<span
aria-hidden="true"
className="flex size-10 shrink-0 items-center justify-center rounded-full bg-neutral-200 text-sm font-medium text-neutral-600"
>
SK
</span>
<div className="min-w-0">
<p className="text-sm font-semibold">Sam Kim</p>
<p className="mt-1 text-sm text-neutral-500">Verified customer</p>
</div>
</div>
<div className="min-w-0">
<div className="flex gap-1 text-neutral-900">
<span className="sr-only">Rated 5 out of 5</span>
<svg
aria-hidden="true"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
className="size-4"
>
<path d="m12 3 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2-5.6-2.9-5.6 2.9 1.1-6.2L3 9.6l6.2-.9Z" />
</svg>
<svg
aria-hidden="true"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
className="size-4"
>
<path d="m12 3 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2-5.6-2.9-5.6 2.9 1.1-6.2L3 9.6l6.2-.9Z" />
</svg>
<svg
aria-hidden="true"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
className="size-4"
>
<path d="m12 3 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2-5.6-2.9-5.6 2.9 1.1-6.2L3 9.6l6.2-.9Z" />
</svg>
<svg
aria-hidden="true"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
className="size-4"
>
<path d="m12 3 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2-5.6-2.9-5.6 2.9 1.1-6.2L3 9.6l6.2-.9Z" />
</svg>
<svg
aria-hidden="true"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
className="size-4"
>
<path d="m12 3 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2-5.6-2.9-5.6 2.9 1.1-6.2L3 9.6l6.2-.9Z" />
</svg>
</div>
<h3 className="mt-3 text-lg font-semibold">Title about getting started</h3>
<blockquote className="mt-2 text-base text-neutral-600">
“A short account of the change the customer noticed after getting started. Focus on the outcome and the part of the experience that helped.”
</blockquote>
<p className="mt-4 text-sm text-neutral-500">
<time dateTime="2026-09-05">Sep 5, 2026</time> · Review category
</p>
</div>
</li>
<li className="grid gap-8 border-b border-neutral-200 py-7 md:grid-cols-[192px_1fr]">
<div className="flex items-start gap-3">
<span
aria-hidden="true"
className="flex size-10 shrink-0 items-center justify-center rounded-full bg-neutral-200 text-sm font-medium text-neutral-600"
>
MT
</span>
<div className="min-w-0">
<p className="text-sm font-semibold">Morgan Taylor</p>
<p className="mt-1 text-sm text-neutral-500">Verified customer</p>
</div>
</div>
<div className="min-w-0">
<div className="flex gap-1 text-neutral-900">
<span className="sr-only">Rated 5 out of 5</span>
<svg
aria-hidden="true"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
className="size-4"
>
<path d="m12 3 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2-5.6-2.9-5.6 2.9 1.1-6.2L3 9.6l6.2-.9Z" />
</svg>
<svg
aria-hidden="true"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
className="size-4"
>
<path d="m12 3 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2-5.6-2.9-5.6 2.9 1.1-6.2L3 9.6l6.2-.9Z" />
</svg>
<svg
aria-hidden="true"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
className="size-4"
>
<path d="m12 3 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2-5.6-2.9-5.6 2.9 1.1-6.2L3 9.6l6.2-.9Z" />
</svg>
<svg
aria-hidden="true"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
className="size-4"
>
<path d="m12 3 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2-5.6-2.9-5.6 2.9 1.1-6.2L3 9.6l6.2-.9Z" />
</svg>
<svg
aria-hidden="true"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
className="size-4"
>
<path d="m12 3 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2-5.6-2.9-5.6 2.9 1.1-6.2L3 9.6l6.2-.9Z" />
</svg>
</div>
<h3 className="mt-3 text-lg font-semibold">Title about the overall experience</h3>
<blockquote className="mt-2 text-base text-neutral-600">
“A customer reflection on a useful capability or moment of support. Explain the practical difference it made without turning the quote into a
feature list.”
</blockquote>
<p className="mt-4 text-sm text-neutral-500">
<time dateTime="2026-08-28">Aug 28, 2026</time> · Review category
</p>
</div>
</li>
</ul>
</div>
</section>
)
}Pattern notes
- When to use
- Use for detailed dated reviews. Pick testimonials-card-grid for shorter voices. Variations: vary ratings, three rows, or role instead of verification.
- Hierarchy
- Section headings are 30px text-3xl semibold, 36px sm:text-4xl at 640px, with tight tracking and balanced wrapping. Heading then 48px 4.9 summary and 1,284 count, then review titles and quotes. Summary is labelled 4.9 out of 5; each review has accessible five-star label. Slots: heading 8 words, lede 24, title 6, quote 32, name 3, date/category 6.
- Responsive
- Header stacks below 640px, summary right aligns above. Reviewer identity stacks above content below 768px and gets 192px column above. Heading and padding increase at 640px.
- Layout
- White section with 1152px max-w-6xl container, 24px px-6 side padding and 64px py-16 vertical padding, increasing to 96px sm:py-24 at 640px. Bottom-aligned sm:flex-row header with 32px gap and rating summary. Review list 40px below top border has four py-7 rows with bottom hairlines, md:grid-cols-[192px_1fr] and 32px gap. Identity is 40px avatar beside name and verification; review has stars, 18px title, 16px quote and 14px date.
- States
- Static reviews and summary; no filters, sorting or controls.
┌──────────────────────────────────────────────────────────────┐
│ Headline / Lede 4.9 / Stars │
│ from 1,284 reviews │
├──────────────────────────────────────────────────────────────┤
│ AR Name Stars / Review title │
│ Verified customer Quote and date │
├──────────────────────────────────────────────────────────────┤
│ JL Name Stars / Review title │
│ Verified customer Quote and date │
├──────────────────────────────────────────────────────────────┤
│ SK Name Stars / Review title │
│ Verified customer Quote and date │
├──────────────────────────────────────────────────────────────┤
│ MT Name Stars / Review title │
│ Verified customer Quote and date │
└──────────────────────────────────────────────────────────────┘More in Testimonials
View all Testimonials patternsTestimonials — Before and after columns
Layout tags: split,·spacious
Testimonials — Card grid
Layout tags: centered,·grid