Testimonial

A customer quote with stars, avatar, name and role, styled as a card, for social proof on landing pages.

CSS only components/testimonial.css

In an auto grid

A Card: same surface, border, radius and padding. Avatar beside name and role (smaller), then the quote, then the stars in the accent colour. Every part is optional; the stars sit at the bottom, so quotes of different lengths line up.

Jana KolářováOwner, Studio Kolo

Invoices go out in a minute and clients finally pay on time. The reminders do the awkward part for us.

Petra LiškováAccountant

Bank sync saves me an afternoon every month.

Martin NovákNovama

Simple enough that the whole team uses it.

<div class="dsgn-grid" data-cols="auto">
  <figure class="dsgn-card dsgn-testimonial"><figcaption class="dsgn-testimonial-author"><span class="dsgn-avatar"><img src="portrait.jpg" alt=""></span><span class="dsgn-testimonial-person"><span class="dsgn-testimonial-name">Jana Kolářová</span><span class="dsgn-testimonial-role">Owner, Studio Kolo</span></span></figcaption><blockquote class="dsgn-testimonial-quote"><p>Invoices go out in a minute and clients finally pay on time. The reminders do the awkward part for us.</p></blockquote><span class="dsgn-rating" role="img" aria-label="5 out of 5 stars"><span class="dsgn-icon" data-fill aria-hidden="true">star</span><span class="dsgn-icon" data-fill aria-hidden="true">star</span><span class="dsgn-icon" data-fill aria-hidden="true">star</span><span class="dsgn-icon" data-fill aria-hidden="true">star</span><span class="dsgn-icon" data-fill aria-hidden="true">star</span></span></figure>
  <figure class="dsgn-card dsgn-testimonial"><figcaption class="dsgn-testimonial-author"><span class="dsgn-avatar"><img src="portrait.jpg" alt=""></span><span class="dsgn-testimonial-person"><span class="dsgn-testimonial-name">Petra Lišková</span><span class="dsgn-testimonial-role">Accountant</span></span></figcaption><blockquote class="dsgn-testimonial-quote"><p>Bank sync saves me an afternoon every month.</p></blockquote><span class="dsgn-rating" role="img" aria-label="4 out of 5 stars"><span class="dsgn-icon" data-fill aria-hidden="true">star</span><span class="dsgn-icon" data-fill aria-hidden="true">star</span><span class="dsgn-icon" data-fill aria-hidden="true">star</span><span class="dsgn-icon" data-fill aria-hidden="true">star</span><span class="dsgn-icon" aria-hidden="true">star</span></span></figure>
  <figure class="dsgn-card dsgn-testimonial"><figcaption class="dsgn-testimonial-author"><span class="dsgn-avatar" data-intent="accent" aria-hidden="true">MN</span><span class="dsgn-testimonial-person"><span class="dsgn-testimonial-name">Martin Novák</span><span class="dsgn-testimonial-role">Novama</span></span></figcaption><blockquote class="dsgn-testimonial-quote"><p>Simple enough that the whole team uses it.</p></blockquote><span class="dsgn-rating" role="img" aria-label="5 out of 5 stars"><span class="dsgn-icon" data-fill aria-hidden="true">star</span><span class="dsgn-icon" data-fill aria-hidden="true">star</span><span class="dsgn-icon" data-fill aria-hidden="true">star</span><span class="dsgn-icon" data-fill aria-hidden="true">star</span><span class="dsgn-icon" data-fill aria-hidden="true">star</span></span></figure>
</div>

Centred

data-align="center": a 48 px avatar on the top edge, half outside the card, then name, role, quote and stars. The card adds space-24 on top for the avatar. Without an avatar it starts with the name.

Jana KolářováOwner, Studio Kolo

Invoices go out in a minute and clients finally pay on time.

Martin NovákNovama

Simple enough that the whole team uses it.

Eva MaláFreelance designer

Good, but we miss multi-currency.

<div class="dsgn-grid" data-cols="auto">
  <figure class="dsgn-card dsgn-testimonial" data-align="center"><figcaption class="dsgn-testimonial-author"><span class="dsgn-avatar"><img src="portrait.jpg" alt=""></span><span class="dsgn-testimonial-person"><span class="dsgn-testimonial-name">Jana Kolářová</span><span class="dsgn-testimonial-role">Owner, Studio Kolo</span></span></figcaption><blockquote class="dsgn-testimonial-quote"><p>Invoices go out in a minute and clients finally pay on time.</p></blockquote><span class="dsgn-rating" role="img" aria-label="5 out of 5 stars"><span class="dsgn-icon" data-fill aria-hidden="true">star</span><span class="dsgn-icon" data-fill aria-hidden="true">star</span><span class="dsgn-icon" data-fill aria-hidden="true">star</span><span class="dsgn-icon" data-fill aria-hidden="true">star</span><span class="dsgn-icon" data-fill aria-hidden="true">star</span></span></figure>
  <figure class="dsgn-card dsgn-testimonial" data-align="center"><figcaption class="dsgn-testimonial-author"><span class="dsgn-avatar" data-intent="accent" aria-hidden="true">MN</span><span class="dsgn-testimonial-person"><span class="dsgn-testimonial-name">Martin Novák</span><span class="dsgn-testimonial-role">Novama</span></span></figcaption><blockquote class="dsgn-testimonial-quote"><p>Simple enough that the whole team uses it.</p></blockquote><span class="dsgn-rating" role="img" aria-label="4 out of 5 stars"><span class="dsgn-icon" data-fill aria-hidden="true">star</span><span class="dsgn-icon" data-fill aria-hidden="true">star</span><span class="dsgn-icon" data-fill aria-hidden="true">star</span><span class="dsgn-icon" data-fill aria-hidden="true">star</span><span class="dsgn-icon" aria-hidden="true">star</span></span></figure>
  <figure class="dsgn-card dsgn-testimonial" data-align="center"><figcaption class="dsgn-testimonial-author"><span class="dsgn-testimonial-person"><span class="dsgn-testimonial-name">Eva Malá</span><span class="dsgn-testimonial-role">Freelance designer</span></span></figcaption><blockquote class="dsgn-testimonial-quote"><p>Good, but we miss multi-currency.</p></blockquote><span class="dsgn-rating" role="img" aria-label="3 out of 5 stars"><span class="dsgn-icon" data-fill aria-hidden="true">star</span><span class="dsgn-icon" data-fill aria-hidden="true">star</span><span class="dsgn-icon" data-fill aria-hidden="true">star</span><span class="dsgn-icon" aria-hidden="true">star</span><span class="dsgn-icon" aria-hidden="true">star</span></span></figure>
</div>

Usage

Order: author (avatar beside name and role) → quote → stars. Every part is optional. It is a Card (.dsgn-card), so it takes data-surface="glass" and the Density, Radius, Lines and Elevation modes. The stars sit at the bottom, so testimonials of different lengths line up in a Grid (data-cols="auto": min 16rem each).

Centred — data-align="center": a 48 px avatar centred on the top edge, half of it outside the card, then name, role, quote and stars, all centred. The card gets space-24 of top margin so the avatar does not touch what is above it.

Details

Classes: .dsgn-testimonial .dsgn-card .dsgn-testimonial-author .dsgn-testimonial-person .dsgn-testimonial-name .dsgn-testimonial-role .dsgn-testimonial-quote .dsgn-rating .dsgn-avatar
Tokens used: --dsgn-font-size-body --dsgn-font-size-caption --dsgn-font-weight-medium --dsgn-inset --dsgn-line-height-body --dsgn-line-height-caption --dsgn-space-12 --dsgn-space-24 --dsgn-space-48 --dsgn-stack --dsgn-text-muted
In Figma: Testimonial · Rating · Avatar
Import alone: dsgn.systems/components/testimonial.css