Testimonials — Quote timeline

A date rail accompanies three vertically ordered customer quotes. Use it for evidence collected across a sequence of milestones.

ReactHTML

1440 × 900

Open in new tab

Component.tsx53 lines

export default function TestimonialsQuoteTimeline() {
  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 customer milestones</h2>
        </header>
        <ol role="list" className="mt-12 grid gap-8">
          <li className="grid gap-4 md:grid-cols-[144px_1fr]">
            <time dateTime="2026-03-01" className="text-sm font-medium text-neutral-500">Mar 2026</time>
            <figure className="border-l border-neutral-200 pl-6">
              <blockquote className="text-lg text-pretty">Quote about the first useful outcome.</blockquote>
              <figcaption className="mt-4 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>
          </li>
          <li className="grid gap-4 md:grid-cols-[144px_1fr]">
            <time dateTime="2026-06-01" className="text-sm font-medium text-neutral-500">Jun 2026</time>
            <figure className="border-l border-neutral-200 pl-6">
              <blockquote className="text-lg text-pretty">Quote about progress after continued use.</blockquote>
              <figcaption className="mt-4 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>
          </li>
          <li className="grid gap-4 md:grid-cols-[144px_1fr]">
            <time dateTime="2026-10-01" className="text-sm font-medium text-neutral-500">Oct 2026</time>
            <figure className="border-l border-neutral-200 pl-6">
              <blockquote className="text-lg text-pretty">Quote about the lasting value of the experience.</blockquote>
              <figcaption className="mt-4 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>
                  <p className="text-sm font-semibold">Sam Kim</p>
                  <p className="text-xs text-neutral-500">Role, organization</p>
                </div>
              </figcaption>
            </figure>
          </li>
        </ol>
      </div>
    </section>
  )
}

Pattern notes

When to use: Use for longitudinal feedback or a sequence of adoption milestones. Choose a card grid when chronology is unimportant. Variations include two milestones or linking each quote to a dated interview.
Hierarchy: Dates establish the sequence before readers scan each 18px quote. Keep the heading below 8 words, each quote below 18 and role below 4. Use month and year dates consistently.
Responsive: Below 768px each date sits above its figure. The figure retains its vertical rule and 24px indentation. No fixed-width text column remains on mobile.
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. An ordered list starts 48px below the heading with 32px gap-8 rows. At 768px each row has a 144px date rail and flexible figure separated by 16px. Figures have a left hairline, 24px padding-left and a 40px avatar below the quote.
States: All content is static; figures have no selected, disabled or loading state.

Desktop wireframe

┌──────────────────────────────────────────────────────────────┐
│ Heading for customer milestones                              │
│ Mar 2026  | Quote about the first useful outcome             │
│           | AR Name / Role                                   │
│ Jun 2026  | Quote about continued progress                   │
│           | JL Name / Role                                   │
│ Oct 2026  | Quote about lasting value                        │
│           | SK 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 — Quote timeline

Pattern notes

More in Testimonials

Testimonials — Audience and outcome table

Testimonials — Before and after columns

Testimonials — Card grid