Testimonials — Rating distribution beside quotes

A rating histogram sits beside two detailed quote panels. Use it to connect the distribution of feedback with specific customer experiences.

ReactHTML

1440 × 900

Open in new tab

Component.tsx63 lines

export default function TestimonialsRatingDistribution() {
  return (
    <section className="bg-white text-neutral-900">
      <div className="mx-auto max-w-6xl px-6 py-16 sm:py-24 ">
        <header className="max-w-2xl">
          <p className="text-sm font-medium text-neutral-500">Eyebrow for the section</p>
          <h2 className="mt-4 text-3xl font-semibold tracking-tight text-balance sm:text-4xl">Heading for the review evidence</h2>
        </header>
        <div className="mt-12 grid gap-10 lg:grid-cols-[1fr_2fr]">
          <aside className="rounded-lg border border-neutral-200 bg-neutral-50 p-6">
            <p className="text-sm font-medium text-neutral-500">Overall rating</p>
            <p className="mt-2 text-4xl font-semibold tracking-tight">4.8<span className="ml-2 text-base font-normal text-neutral-600">/ 5</span></p>
            <p className="mt-2 text-sm text-neutral-600">Based on 1,284 reviews</p>
            <dl className="mt-6 grid gap-3">
              <div className="grid grid-cols-[16px_1fr_40px] items-center gap-3 text-xs">
                <dt>5<span className="sr-only"> stars</span></dt>
                <dd className="contents"><span aria-hidden="true" className="h-2 rounded-full bg-neutral-200"><span className="block h-full w-[78%] rounded-full bg-neutral-900"></span></span><span className="text-right tabular-nums text-neutral-600">78%</span></dd>
              </div>
              <div className="grid grid-cols-[16px_1fr_40px] items-center gap-3 text-xs">
                <dt>4<span className="sr-only"> stars</span></dt>
                <dd className="contents"><span aria-hidden="true" className="h-2 rounded-full bg-neutral-200"><span className="block h-full w-[16%] rounded-full bg-neutral-900"></span></span><span className="text-right tabular-nums text-neutral-600">16%</span></dd>
              </div>
              <div className="grid grid-cols-[16px_1fr_40px] items-center gap-3 text-xs">
                <dt>3<span className="sr-only"> stars</span></dt>
                <dd className="contents"><span aria-hidden="true" className="h-2 rounded-full bg-neutral-200"><span className="block h-full w-[4%] rounded-full bg-neutral-900"></span></span><span className="text-right tabular-nums text-neutral-600">4%</span></dd>
              </div>
              <div className="grid grid-cols-[16px_1fr_40px] items-center gap-3 text-xs">
                <dt>2<span className="sr-only"> stars</span></dt>
                <dd className="contents"><span aria-hidden="true" className="h-2 rounded-full bg-neutral-200"><span className="block h-full w-[1%] rounded-full bg-neutral-900"></span></span><span className="text-right tabular-nums text-neutral-600">1%</span></dd>
              </div>
              <div className="grid grid-cols-[16px_1fr_40px] items-center gap-3 text-xs">
                <dt>1<span className="sr-only"> stars</span></dt>
                <dd className="contents"><span aria-hidden="true" className="h-2 rounded-full bg-neutral-200"><span className="block h-full w-[1%] rounded-full bg-neutral-900"></span></span><span className="text-right tabular-nums text-neutral-600">1%</span></dd>
              </div>
            </dl>
          </aside>
          <div className="grid gap-6">
            <figure className="rounded-lg border border-neutral-200 bg-white p-6">
              <blockquote className="text-xl text-pretty">Quote that gives one specific reason for the positive rating.</blockquote>
              <figcaption className="mt-5 flex items-center 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>
                  <p className="text-sm font-semibold">Alex Rivera</p>
                  <p className="text-xs text-neutral-500">Role, organization</p>
                </div>
              </figcaption>
            </figure>
            <figure className="rounded-lg border border-neutral-200 bg-white p-6">
              <blockquote className="text-xl text-pretty">Quote that gives one specific reason for the positive rating.</blockquote>
              <figcaption className="mt-5 flex items-center 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>
                  <p className="text-sm font-semibold">Jordan Lee</p>
                  <p className="text-xs text-neutral-500">Role, organization</p>
                </div>
              </figcaption>
            </figure>
          </div>
        </div>
      </div>
    </section>
  )
}

Pattern notes

When to use: Use when review distribution supports a trust claim. Choose a large quote when the score adds no information. Variations include fewer score bands or a link to the underlying review collection.
Hierarchy: The score summarizes the feedback, the bar labels explain its spread and the two 20px quotes supply detail. Keep quote text below 20 words, count captions below 6 and author roles below 4.
Responsive: Below 1024px the histogram comes before the quote stack. Its flexible bar column and fixed 16px/40px label columns fit narrow screens.
Layout: The white section uses a 1152px max-w-6xl container, 24px px-6 sides and 64px py-16 vertical padding, increasing to 96px sm:py-24 at 640px. The content sits 48px below the heading in a 1fr/2fr lg:grid-cols-[1fr_2fr] layout with a 40px gap. The p-6 sidebar has a 36px score, review count and five 8px histogram bars. The main column stacks two p-6 figures 24px apart.
States: All content is static; figures have no selected, disabled or loading state.

Desktop wireframe

┌──────────────────────────────────────────────────────────────┐
│ Heading for the review evidence                              │
│ ┌────────────────┐  ┌────────────────────────────────────┐   │
│ │ 4.8 / 5        │  │ Customer quote                     │   │
│ │ 1,284 reviews  │  │ AR Name / Role                     │   │
│ │ 5 =========78% │  └────────────────────────────────────┘   │
│ │ 4 ==       16% │  ┌────────────────────────────────────┐   │
│ │ 3           4% │  │ Customer quote                     │   │
│ │ 2           1% │  │ JL Name / Role                     │   │
│ │ 1           1% │  └────────────────────────────────────┘   │
│ └────────────────┘                                           │
└──────────────────────────────────────────────────────────────┘

View all

Testimonials — Audience and outcome table
Layout tags: table,numbers,compact
Testimonials — Before and after columns
Layout tags: split,spacious
Testimonials — Card grid
Layout tags: centered,grid

Testimonials — Rating distribution beside quotes

Pattern notes

More in Testimonials

Testimonials — Audience and outcome table

Testimonials — Before and after columns

Testimonials — Card grid