Testimonial cards — Star rating review

A star rating and verified badge lead a review title and body, with reviewer, date and usage details below a divider. Use it for a review where rating and provenance matter.

ReactHTML

1440 × 480

Open in new tab

Component.tsx23 lines

export default function TestimonialCardRatingReview() {
  return (
    <figure className="w-72 rounded-lg border border-neutral-200 bg-white p-6 text-neutral-900 sm:w-80">
      <div className="flex flex-wrap items-center justify-between gap-3">
        <span role="img" aria-label="Rated 4 out of 5" className="flex gap-1">
          <svg aria-hidden="true" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-4"><path d="m12 3 2.8 5.7 6.3.9-4.5 4.4 1.1 6.2-5.7-3-5.7 3 1.1-6.2L3 9.6l6.2-.9L12 3Z" /></svg>
          <svg aria-hidden="true" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-4"><path d="m12 3 2.8 5.7 6.3.9-4.5 4.4 1.1 6.2-5.7-3-5.7 3 1.1-6.2L3 9.6l6.2-.9L12 3Z" /></svg>
          <svg aria-hidden="true" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-4"><path d="m12 3 2.8 5.7 6.3.9-4.5 4.4 1.1 6.2-5.7-3-5.7 3 1.1-6.2L3 9.6l6.2-.9L12 3Z" /></svg>
          <svg aria-hidden="true" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-4"><path d="m12 3 2.8 5.7 6.3.9-4.5 4.4 1.1 6.2-5.7-3-5.7 3 1.1-6.2L3 9.6l6.2-.9L12 3Z" /></svg>
          <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-4"><path d="m12 3 2.8 5.7 6.3.9-4.5 4.4 1.1 6.2-5.7-3-5.7 3 1.1-6.2L3 9.6l6.2-.9L12 3Z" /></svg>
        </span>
        <span className="inline-flex items-center rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium">Verified purchase</span>
      </div>
      <h2 className="mt-5 text-base font-semibold">Review title</h2>
      <blockquote className="mt-2 text-sm text-pretty text-neutral-600">Review body that describes the experience, names a useful detail and explains who would find this a good fit.</blockquote>
      <figcaption className="mt-5 border-t border-neutral-200 pt-4">
        <div className="flex items-center justify-between gap-3 text-sm"><span className="font-semibold">Alex Rivera</span><time dateTime="2026-03-14" className="text-xs text-neutral-500">Mar 14</time></div>
        <p className="mt-2 text-xs text-neutral-500">Variant label · Usage duration</p>
      </figcaption>
    </figure>
  )
}

Pattern notes

When to use: Use for a review where rating, verification and usage context help readers assess it. Pick testimonial-card-quote-author for an unrated recommendation or testimonial-card-social-post for a linked public post. Variations: show a service review, change the verification wording, or replace variant details with review duration.
Hierarchy: Four filled currentColor stars and one outlined star expose Rated 4 out of 5 through a labelled image role; each SVG is decorative. The verified pill is 12px medium. The 16px semibold title precedes a 14px neutral-600 quote. The reviewer is 14px semibold; date and usage are 12px muted. Slots: title up to 4 words, review up to 25 words, name up to 3, date up to 6 characters, variant and usage up to 3 words each.
Responsive: The root grows from 288px to 320px at 640px with fixed padding and type sizes. The star cluster and verified badge wrap into two rows when they do not fit. The quote and footer remain stacked, with reviewer and date side by side.
Layout: A 288px w-72 figure, 320px sm:w-80 from 640px, with 24px p-6 padding, a 1px border and an 8px radius. The top row wraps a five-star cluster and verified badge with a 12px gap; stars are 16px with 4px gaps. The review title starts 20px below and the quote follows after 8px. The footer has a 20px margin, hairline and 16px top padding. Reviewer/date share a space-between row; usage details sit 8px below.
States: The card is static with no controls and no hover, focus, open, selected or disabled states. The rating uses an accessible text label and the verified state is written in the badge. The time element carries a machine-readable date.

Desktop wireframe

┌──────────────────────────────────────────────┐
│ ****o                [Verified purchase]     │
│ Review title                                 │
│ Review body that describes the               │
│ experience and a useful detail.              │
│ ────────────────────────────────────────     │
│ Alex Rivera                       Mar 14     │
│ Variant label          Usage duration        │
└──────────────────────────────────────────────┘

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 — Star rating review

Pattern notes

More in Testimonial cards

Testimonial cards — Attribution rail beside quote

Testimonial cards — Before and after statements

Testimonial cards — Centred quote with logo