Testimonials — Masonry wall

Eight variable-length quotes in CSS columns with one dark featured tile. Use for a dense wall of customer voices.

ReactHTML

1440 × 900

Component.tsx162 lines

export default function TestimonialsMasonry() {
  return (
    <section className="bg-white text-neutral-900">
      <div className="mx-auto max-w-6xl px-6 py-16 sm:py-24">
        <header className="grid gap-8 lg:grid-cols-2 lg:items-end">
          <h2 className="text-3xl font-semibold tracking-tight text-balance sm:text-4xl">Heading for a wall of customer voices</h2>
          <div>
            <p className="text-lg text-pretty text-neutral-600">
              A short introduction that explains the range of perspectives collected here and what readers can learn from them.
            </p>
            <a
              href="#"
              className="font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900 mt-4 inline-block"
            >
              Read customer stories
            </a>
          </div>
        </header>
        <div className="mt-10 columns-1 gap-5 sm:columns-2 lg:columns-3">
          <figure className="mb-5 break-inside-avoid rounded-lg border p-6 border-neutral-200 bg-white">
            <blockquote className="text-base text-neutral-600">“A short customer quote that names one useful outcome in a single sentence.”</blockquote>
            <figcaption className="mt-6 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 className="min-w-0">
                <p className="text-sm font-semibold">Alex Rivera</p>
                <p className="mt-1 text-sm text-neutral-500">Role and organization</p>
              </div>
            </figcaption>
          </figure>
          <figure className="mb-5 break-inside-avoid rounded-lg border p-6 border-neutral-900 bg-neutral-900 text-white">
            <blockquote className="text-xl font-medium">
              “A featured customer quote that explains the strongest benefit in their own words. Include a specific reason the experience stood out and a clear
              recommendation for readers with similar needs.”
            </blockquote>
            <figcaption className="mt-6 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 className="min-w-0">
                <p className="text-sm font-semibold">Jordan Lee</p>
                <p className="mt-1 text-sm text-neutral-300">Role and organization</p>
              </div>
            </figcaption>
          </figure>
          <figure className="mb-5 break-inside-avoid rounded-lg border p-6 border-neutral-200 bg-white">
            <blockquote className="text-base text-neutral-600">
              “A customer quote that describes the first impression. Follow it with the detail that made the experience easy to understand.”
            </blockquote>
            <figcaption className="mt-6 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"
              >
                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">Role and organization</p>
              </div>
            </figcaption>
          </figure>
          <figure className="mb-5 break-inside-avoid rounded-lg border p-6 border-neutral-200 bg-white">
            <blockquote className="text-base text-neutral-600">
              “A longer customer quote that begins with the need they wanted to address. Describe the part of the experience that helped. Explain the outcome in
              concrete terms. Add a useful detail about the support or access they received. Close with the reason they would recommend it.”
            </blockquote>
            <figcaption className="mt-6 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"
              >
                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">Role and organization</p>
              </div>
            </figcaption>
          </figure>
          <figure className="mb-5 break-inside-avoid rounded-lg border p-6 border-neutral-200 bg-white">
            <blockquote className="text-base text-neutral-600">
              “A brief customer quote that highlights a practical difference and who would find it useful.”
            </blockquote>
            <figcaption className="mt-6 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"
              >
                CP
              </span>
              <div className="min-w-0">
                <p className="text-sm font-semibold">Casey Patel</p>
                <p className="mt-1 text-sm text-neutral-500">Role and organization</p>
              </div>
            </figcaption>
          </figure>
          <figure className="mb-5 break-inside-avoid rounded-lg border p-6 border-neutral-200 bg-white">
            <blockquote className="text-base text-neutral-600">
              “A customer reflection on what changed after getting started. Explain why that change mattered in their routine. Include one detail that makes the
              result specific.”
            </blockquote>
            <figcaption className="mt-6 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"
              >
                RN
              </span>
              <div className="min-w-0">
                <p className="text-sm font-semibold">Riley Nguyen</p>
                <p className="mt-1 text-sm text-neutral-500">Role and organization</p>
              </div>
            </figcaption>
          </figure>
          <figure className="mb-5 break-inside-avoid rounded-lg border p-6 border-neutral-200 bg-white">
            <blockquote className="text-base text-neutral-600">
              “A customer endorsement that focuses on the experience of getting help. Name the moment that mattered and the effect it had.”
            </blockquote>
            <figcaption className="mt-6 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"
              >
                JC
              </span>
              <div className="min-w-0">
                <p className="text-sm font-semibold">Jamie Chen</p>
                <p className="mt-1 text-sm text-neutral-500">Role and organization</p>
              </div>
            </figcaption>
          </figure>
          <figure className="mb-5 break-inside-avoid rounded-lg border p-6 border-neutral-200 bg-white">
            <blockquote className="text-base text-neutral-600">
              “A longer customer perspective that compares expectations with the result. Describe one concern they had at the start. Explain what gave them
              confidence. Close with the benefit they value now.”
            </blockquote>
            <figcaption className="mt-6 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"
              >
                TB
              </span>
              <div className="min-w-0">
                <p className="text-sm font-semibold">Taylor Brooks</p>
                <p className="mt-1 text-sm text-neutral-500">Role and organization</p>
              </div>
            </figcaption>
          </figure>
        </div>
      </div>
    </section>
  )
}

Pattern notes

When to use: Use for many varied-length quotes. Pick testimonials-card-grid for row alignment. Variations: feature another quote, six figures, or omit link.
Hierarchy: Section headings are 30px text-3xl semibold, 36px sm:text-4xl at 640px, with tight tracking and balanced wrapping. Read headline and story link, then quotes in column-major DOM order. Slots: heading 8 words, lede 24, quote 12-62 in one to five sentences, name 3, role 6. Featured quote uses larger type and dark contrast.
Responsive: One column below 640px, two from 640px, three from 1024px. Tiles never split. Header stacks below 1024px. 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 lg:grid-cols-2 header, 32px gap. Masonry 40px below uses columns-1 sm:columns-2 lg:columns-3, gap-5 20px. Figures break-inside-avoid mb-5 p-6 rounded-lg. Second has neutral-900 surface and 20px white quote; others 16px. Attribution 24px below with 40px avatar.
States: Only story link interactive, hover neutral-600 and 2px neutral-900 focus outline offset 2px. Static tiles.

Desktop wireframe

┌──────────────────────────────────────────────────────────────┐
│ Headline                    Lede / [Read stories]            │
│                                                              │
│ ┌────────────────┐  ┌────────────────┐  ┌────────────────┐   │
│ │ Short quote    │  │ Featured quote │  │ Medium quote   │   │
│ │ AR Name / Role │  │                │  │                │   │
│ └────────────────┘  │                │  │ SK Name / Role │   │
│                     │ JL Name / Role │  └────────────────┘   │
│ ┌────────────────┐  └────────────────┘                       │
│ │ Longer quote   │                      ┌────────────────┐   │
│ │                │  ┌────────────────┐  │ Short quote    │   │
│ │                │  │ Another quote  │  │ CP Name / Role │   │
│ │ MT Name / Role │  │                │  └────────────────┘   │
│ └────────────────┘  │ RN Name / Role │                       │
│                     └────────────────┘  ┌────────────────┐   │
│ ┌────────────────┐                      │ Final quote    │   │
│ │ Brief quote    │                      │                │   │
│ │ TL Name / Role │                      │ JC Name / Role │   │
│ └────────────────┘                      └────────────────┘   │
│                                                              │
└──────────────────────────────────────────────────────────────┘

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 — Masonry wall

Pattern notes

More in Testimonials

Testimonials — Audience and outcome table

Testimonials — Before and after columns

Testimonials — Card grid