Testimonial cards — Social post

An author-first post card with a handle, platform glyph, mention and timestamp doubles as a link to the source. Use it for public feedback whose original context matters.

ReactHTML

1440 × 480

Open in new tab

Component.tsx20 lines

export default function TestimonialCardSocialPost() {
  return (
    <article className="relative w-72 rounded-lg border border-neutral-200 bg-white p-6 text-neutral-900 transition-colors hover:bg-neutral-50 sm:w-[22rem]">
      <header className="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 flex-1">
          <a href="#" aria-label="Read Alex Rivera's original post" className="text-sm 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 after:absolute after:inset-0">Alex Rivera</a>
          <p className="mt-1 text-xs text-neutral-500">@handle</p>
        </div>
        <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-5 shrink-0 text-neutral-500"><path d="M4 4h16v12H9l-5 4V4ZM8 8h8M8 12h5" /></svg>
      </header>
      <p className="mt-4 text-sm text-pretty text-neutral-600">Post text that describes the experience with <span className="font-medium text-neutral-900">@mention</span> and names a concrete benefit in the author's own words.</p>
      <footer className="mt-4 flex flex-wrap items-center justify-between gap-x-3 gap-y-1 text-xs text-neutral-500">
        <time dateTime="2026-03-14T09:41:00">Mar 14, 9:41 AM</time>
        <span>3 replies</span>
      </footer>
    </article>
  )
}

Pattern notes

When to use: Use for public feedback that readers can follow to its original post. Pick testimonial-card-quote-author for a formal attributed quotation or testimonial-card-rating-review for rating and verification metadata. Variations: omit the reply count, show a relative timestamp, or replace the mention with an emphasized benefit.
Hierarchy: The author reads first as a 14px medium underlined source link above a 12px muted handle with a 4px gap. The 14px neutral-600 post includes a neutral-900 medium mention. The timestamp and reply count are 12px neutral-500, and time has a machine-readable date/time. Slots: name up to 3 words, handle up to 16 characters, post up to 25 words, mention up to 12 characters, reply count up to 3 digits.
Responsive: Only the root width changes at 640px. The avatar, author and platform glyph remain a single row. Post text wraps, and timestamp/reply metadata can wrap while retaining the same padding and type sizes. Unlike testimonial-card-quote-author, the author is in the header and there is no logo or divided attribution footer.
Layout: A relative 288px w-72 article, 352px sm:w-[22rem] from 640px, with 24px p-6 padding, 1px border and 8px radius. Its header has a 40px avatar, flexible min-w-0 author/handle column and a fixed 20px platform glyph separated by 12px gaps. The post starts 16px below; a wrapping space-between timestamp/reply footer follows after another 16px, with 12px horizontal and 4px vertical gaps.
States: The author link's absolute inset-0 after pseudo-element covers the whole relative card and has the accessible name Read Alex Rivera's original post. Hover fills the article neutral-50 with a 150ms colour transition and changes the link to neutral-600. Keyboard focus shows a 2px neutral-900 outline offset 2px on the link. There are no open, selected or disabled states.

Desktop wireframe

┌──────────────────────────────────────────────┐
│ (AR)  [Alex Rivera]              Glyph       │
│       @handle                                │
│ Post about the experience, including         │
│ an @mention and a concrete benefit.          │
│ Mar 14, 9:41 AM              3 replies       │
└──────────────────────────────────────────────┘

View all

Testimonial cards — Attribution rail beside quote
Layout tags: sidebar,compact
Testimonial cards — Before and after statements
Layout tags: stacked,compact
Testimonial cards — Centred quote with logo
Layout tags: centered,spacious

Testimonial cards — Social post

Pattern notes

More in Testimonial cards

Testimonial cards — Attribution rail beside quote

Testimonial cards — Before and after statements

Testimonial cards — Centred quote with logo