Testimonial card

How to use it

Use to show one short, attributed quote from a real customer near a sign-up or pricing section. Do not invent quotes or attach real people's names without their permission; the person here is fictional and must be replaced. For several quotes, repeat the card in a grid; keep each quote under about forty words.

Accessibility

A <figure> pairs a <blockquote> with a <figcaption>, so the quote and the person it came from are announced together; the person's role and organisation follow the name in the <figcaption>. The initials avatar is aria-hidden="true" because the name is already written next to it, and the card has no interactive parts. The quote #0f172a on #f8fafc is 17.06:1, the name #0f172a on #f8fafc 17.06:1, the role #475569 on #f8fafc 7.24:1, and the avatar's white initials on #1e3a8a 10.36:1.

Source (copy-ready)

Copy code

<figure class="dcl-testimonial">
  <blockquote class="dcl-testimonial__quote">
    <p class="dcl-testimonial__text">We used to spend Monday mornings working out who was doing what. Now the board answers that before anyone asks, and our weekly planning call is down to ten minutes.</p>
  </blockquote>
  <figcaption class="dcl-testimonial__person">
    <span class="dcl-testimonial__avatar" aria-hidden="true">MO</span>
    <span class="dcl-testimonial__who">
      <span class="dcl-testimonial__name">Mara Okafor</span>
      <span class="dcl-testimonial__role">Operations lead, Harbor Street Bakery</span>
    </span>
  </figcaption>
</figure>
<style>
.dcl-testimonial { display: flex; flex-direction: column; gap: 1.25rem; max-width: 30rem; margin: 0; padding: 1.5rem; border: 1px solid #e2e8f0; border-left: 4px solid #1e3a8a; border-radius: 0.75rem; font: inherit; color: #0f172a; background-color: #f8fafc; box-sizing: border-box; }
.dcl-testimonial__quote { margin: 0; }
.dcl-testimonial__text { margin: 0; font-size: 1.125rem; line-height: 1.6; color: #0f172a; background-color: #f8fafc; }
.dcl-testimonial__person { display: flex; align-items: center; gap: 0.75rem; }
.dcl-testimonial__avatar { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; font-weight: 700; color: #ffffff; background-color: #1e3a8a; }
.dcl-testimonial__who { display: flex; flex-direction: column; min-width: 0; }
.dcl-testimonial__name { font-weight: 600; color: #0f172a; background-color: #f8fafc; }
.dcl-testimonial__role { font-style: normal; font-size: 0.9rem; color: #475569; background-color: #f8fafc; }
</style>