Testimonial cards — Centred quote with logo

A centred logo and balanced quote sit above a vertically stacked avatar, name and role. Use it for a short statement that should read as a single focal point.

ReactHTML

1440 × 480

Open in new tab

Component.tsx16 lines

export default function TestimonialCardCenteredQuote() {
  return (
    <figure className="w-72 rounded-lg border border-neutral-200 bg-white p-6 text-center text-neutral-900 sm:w-96 sm:p-8">
      <div className="flex items-center justify-center gap-2 font-semibold"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-6"><path d="M12 3 3 8v8l9 5 9-5V8l-9-5ZM3 8l9 5 9-5M12 13v8" /></svg><span>Logo</span></div>
      <blockquote className="mt-5 text-base font-medium text-balance sm:text-xl">
        Quote that captures the main benefit in the author's own words.
      </blockquote>
      <figcaption className="mt-5">
        <span aria-hidden="true" className="mx-auto flex size-12 items-center justify-center rounded-full bg-neutral-200 text-sm font-medium text-neutral-600">AR</span>
        <p className="mt-2 text-sm font-semibold">Alex Rivera</p>
        <p className="mt-1 text-xs text-neutral-500">Role, Company</p>
      </figcaption>
    </figure>
  )
}

Pattern notes

When to use: Use for a concise recommendation that can carry a centred card. Pick testimonial-card-quote-author for a longer left-aligned quote or testimonial-card-metric-lead when an outcome figure deserves the strongest emphasis. Variations: shorten the quote to two lines, omit the logo row, or use a single role line below the name.
Hierarchy: The quote is the main focal point, 16px medium with balanced wrapping, increasing to 20px from 640px. A 16px semibold logo precedes it. Attribution uses a 14px semibold name and 12px neutral-500 role/company. The avatar is decorative with initials. Slots: quote at most 20 words, name up to 3, role/company up to 4, logo label up to 2.
Responsive: Everything stays in a centred column at both widths. At 640px the width changes from 288px to 384px, padding from 24px to 32px, and quote size from 16px to 20px. The avatar remains 48px and the attribution retains its fixed gaps.
Layout: A centred 288px w-72 figure with 24px p-6 padding, 1px border and 8px radius. At 640px it becomes 384px sm:w-96 with 32px sm:p-8 padding. The logo row is centred with a 24px glyph and 8px gap. The quote begins 20px below; the figcaption follows after another 20px. A centred 48px size-12 avatar sits above the name by 8px and the role by a further 4px.
States: All regions are static. There are no controls and no hover, focus, open, selected or disabled states. The logo glyph and avatar are aria-hidden, while the visible name is connected to the blockquote through figcaption.

Desktop wireframe

┌──────────────────────────────────────────────┐
│                     Logo                     │
│                Centred quote                 │
│            about the main benefit            │
│                     (AR)                     │
│                 Alex Rivera                  │
│                Role, Company                 │
└──────────────────────────────────────────────┘

View all

Testimonial cards — Attribution rail beside quote
Layout tags: sidebar,compact
Testimonial cards — Before and after statements
Layout tags: stacked,compact
Testimonial cards — Criteria scores with quote
Layout tags: list,numbers,compact

Testimonial cards — Centred quote with logo

Pattern notes

More in Testimonial cards

Testimonial cards — Attribution rail beside quote

Testimonial cards — Before and after statements

Testimonial cards — Criteria scores with quote