Testimonials — Scrolling card row

Keyboard-scrollable strip of six quote cards with the next card peeking into view. Use for a compact collection without carousel buttons.

ReactHTML

1440 × 900

Open in new tab

Component.tsx148 lines

export default function TestimonialsScrollRow() {
  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-6 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 a row of customer stories</h2>
            <p className="mt-4 text-lg text-pretty text-neutral-600">
              A short introduction that explains the perspectives in this collection and invites readers to explore more.
            </p>
          </div>
          <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 shrink-0"
          >
            All stories
          </a>
        </header>
        <div
          tabIndex={0}
          role="region"
          aria-label="Customer quotes, scroll horizontally to read more"
          className="relative mt-10 overflow-x-auto snap-x snap-mandatory focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
        >
          <ul role="list" className="flex gap-6 pb-4">
            <li className="rounded-lg border border-neutral-200 bg-white p-6 shrink-0 basis-[85%] snap-start sm:basis-[45%] lg:basis-[30%]">
              <figure className="flex h-full flex-col">
                <blockquote className="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>
                <figcaption className="mt-auto pt-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>
            </li>
            <li className="rounded-lg border border-neutral-200 bg-white p-6 shrink-0 basis-[85%] snap-start sm:basis-[45%] lg:basis-[30%]">
              <figure className="flex h-full flex-col">
                <blockquote className="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>
                <figcaption className="mt-auto pt-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-500">Role and organization</p>
                  </div>
                </figcaption>
              </figure>
            </li>
            <li className="rounded-lg border border-neutral-200 bg-white p-6 shrink-0 basis-[85%] snap-start sm:basis-[45%] lg:basis-[30%]">
              <figure className="flex h-full flex-col">
                <blockquote className="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>
                <figcaption className="mt-auto pt-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>
            </li>
            <li className="rounded-lg border border-neutral-200 bg-white p-6 shrink-0 basis-[85%] snap-start sm:basis-[45%] lg:basis-[30%]">
              <figure className="flex h-full flex-col">
                <blockquote className="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>
                <figcaption className="mt-auto pt-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>
            </li>
            <li className="rounded-lg border border-neutral-200 bg-white p-6 shrink-0 basis-[85%] snap-start sm:basis-[45%] lg:basis-[30%]">
              <figure className="flex h-full flex-col">
                <blockquote className="text-base text-neutral-600">
                  “A quote about how the experience fit the customer’s needs. Name the strongest result and one detail that makes the statement feel grounded.”
                </blockquote>
                <figcaption className="mt-auto pt-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>
            </li>
            <li className="rounded-lg border border-neutral-200 bg-white p-6 shrink-0 basis-[85%] snap-start sm:basis-[45%] lg:basis-[30%]">
              <figure className="flex h-full flex-col">
                <blockquote className="text-base text-neutral-600">
                  “A brief recommendation from a customer with a different perspective. Describe what stood out to them and why they would choose the same
                  option again.”
                </blockquote>
                <figcaption className="mt-auto pt-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>
            </li>
          </ul>
        </div>
      </div>
    </section>
  )
}

Pattern notes

When to use: Use to limit vertical height. Pick testimonials-card-grid for all voices at once. Variations: four cards, ratings above quotes, or logos.
Hierarchy: Section headings are 30px text-3xl semibold, 36px sm:text-4xl at 640px, with tight tracking and balanced wrapping. Headline, lede and All stories link lead to 16px quotes and names. Slots: headline 8 words, lede 24, quote 32, name 3, role 6, link 2. Next-card glimpse signals more content.
Responsive: Header stacks below 640px. Cards take 85% below 640px, 45% above and 30% from 1024px, preserving a next-card peek at that breakpoint. Only inner strip scrolls. 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 above focusable region 40px below. Region uses overflow-x-auto snap-x snap-mandatory; ul role=list is flex, 24px gap, 16px bottom padding. Cards shrink-0 snap-start basis-[85%] sm:basis-[45%] lg:basis-[30%], p-6, rounded-lg and borders. Figures are full-height flex columns with mt-auto attributions.
States: Labelled region has tabIndex=0 and 2px neutral-900 focus outline offset 2px. Native touch/keyboard scrolling and snap alignment; no buttons. All stories has same focus and hover neutral-600.

Desktop wireframe

┌──────────────────────────────────────────────────────────────┐
│ Headline / Lede                           [All stories]      │
│ ┌────────────────┐ ┌────────────────┐ ┌────────────────┐     │
│ │ Quote          │ │ Quote          │ │ Quote       ...│     │
│ │                │ │                │ │                │     │
│ │ AR Name / Role │ │ JL Name / Role │ │ SK Name / Role │     │
│ └────────────────┘ └────────────────┘ └────────────────┘     │
│              Focusable horizontal scroll region              │
│                  Six cards in one row                        │
└──────────────────────────────────────────────────────────────┘

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 — Scrolling card row

Pattern notes

More in Testimonials

Testimonials — Audience and outcome table

Testimonials — Before and after columns

Testimonials — Card grid