Testimonials — Video stories with transcripts

Three equal video panels pair short quotes with native transcript disclosures. Use it when readers can either watch a story or read its context.

ReactHTML

1440 × 900

Open in new tab

Component.tsx65 lines

export default function TestimonialsVideoTranscriptGrid() {
  return (
    <section className="bg-white text-neutral-900">
      <div className="mx-auto max-w-6xl px-6 py-16 sm:py-24 ">
        <header className="mx-auto max-w-2xl text-center">
          <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 video stories</h2>
        </header>
        <div className="mt-12 grid gap-6 lg:grid-cols-3">
          <figure className="rounded-lg border border-neutral-200 bg-white p-6">
            <div role="img" aria-label="Video placeholder: customer interview" className="flex aspect-video items-center justify-center rounded-lg bg-neutral-100 text-neutral-400">
              <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-10"><path d="m9 6 9 6-9 6V6Z" /></svg>
            </div>
            <blockquote className="mt-5 text-base font-medium">Short quote naming the main interview 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>
            <details className="group mt-5 border-t border-neutral-200 pt-4">
              <summary className="flex cursor-pointer list-none items-center justify-between gap-3 text-sm font-medium focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900 [&::-webkit-details-marker]:hidden">Read transcript<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-4 transition-transform group-open:rotate-180"><path d="m6 9 6 6 6-6" /></svg></summary>
              <p className="mt-3 text-sm text-neutral-600">Transcript excerpt that gives the statement its context.</p>
            </details>
          </figure>
          <figure className="rounded-lg border border-neutral-200 bg-white p-6">
            <div role="img" aria-label="Video placeholder: customer interview" className="flex aspect-video items-center justify-center rounded-lg bg-neutral-100 text-neutral-400">
              <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-10"><path d="m9 6 9 6-9 6V6Z" /></svg>
            </div>
            <blockquote className="mt-5 text-base font-medium">Short quote naming the main interview 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">JL</span>
              <div>
                <p className="text-sm font-semibold">Jordan Lee</p>
                <p className="text-xs text-neutral-500">Role, organization</p>
              </div>
            </figcaption>
            <details className="group mt-5 border-t border-neutral-200 pt-4">
              <summary className="flex cursor-pointer list-none items-center justify-between gap-3 text-sm font-medium focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900 [&::-webkit-details-marker]:hidden">Read transcript<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-4 transition-transform group-open:rotate-180"><path d="m6 9 6 6 6-6" /></svg></summary>
              <p className="mt-3 text-sm text-neutral-600">Transcript excerpt that gives the statement its context.</p>
            </details>
          </figure>
          <figure className="rounded-lg border border-neutral-200 bg-white p-6">
            <div role="img" aria-label="Video placeholder: customer interview" className="flex aspect-video items-center justify-center rounded-lg bg-neutral-100 text-neutral-400">
              <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-10"><path d="m9 6 9 6-9 6V6Z" /></svg>
            </div>
            <blockquote className="mt-5 text-base font-medium">Short quote naming the main interview 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">SK</span>
              <div>
                <p className="text-sm font-semibold">Sam Kim</p>
                <p className="text-xs text-neutral-500">Role, organization</p>
              </div>
            </figcaption>
            <details className="group mt-5 border-t border-neutral-200 pt-4">
              <summary className="flex cursor-pointer list-none items-center justify-between gap-3 text-sm font-medium focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900 [&::-webkit-details-marker]:hidden">Read transcript<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-4 transition-transform group-open:rotate-180"><path d="m6 9 6 6 6-6" /></svg></summary>
              <p className="mt-3 text-sm text-neutral-600">Transcript excerpt that gives the statement its context.</p>
            </details>
          </figure>
        </div>
      </div>
    </section>
  )
}

Pattern notes

When to use: Use for several recorded interviews with readable alternatives. Choose a media-and-quote split for one visual story. Variations include two interviews or a duration label below each video.
Hierarchy: The three video regions carry equal weight. Keep each quote below 12 words, transcript excerpt below 45, names below 3 words and roles below 4.
Responsive: Below 1024px the cards form one column. Media remains 16:9 and transcript content expands the card in normal flow.
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. A centered introduction leads a three-column lg:grid-cols-3 grid by 48px. Cards have 24px p-6 padding and 24px gaps. Each 16:9 media region is followed by a quote after 20px, byline after 16px and a divided disclosure after 20px.
States: Each native details opens its own transcript and rotates the chevron. Summary controls show a 2px outline with 2px offset. Video placeholders are static.

Desktop wireframe

┌──────────────────────────────────────────────────────────────┐
│             Heading for customer video stories               │
│ ┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐  │
│ │      Video      │ │      Video      │ │      Video      │  │
│ └─────────────────┘ └─────────────────┘ └─────────────────┘  │
│ Short quote         Short quote         Short quote          │
│ AR Name / Role      JL Name / Role      SK Name / Role       │
│ [Read transcript v] [Read transcript v] [Read transcript v]  │
└──────────────────────────────────────────────────────────────┘

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 — Video stories with transcripts

Pattern notes

More in Testimonials

Testimonials — Audience and outcome table

Testimonials — Before and after columns

Testimonials — Card grid