MODULE — M03

Testimonial

A quotation, whoever said it, and a rail of client marks beside them.

Quote and client rail

“Shipped the thing our last two agencies described as impossible, then wrote the documentation for it.”

IMG

Client name Role, Company

NORTHWIND

ACME

CONTOSO

INITECH

UMBRELLA

GLOBEX

HTML

<div class="testimonial" style="width:100%">
  <div class="testimonial-body">
    <blockquote class="testimonial-quote">“Shipped the thing our last two agencies described as impossible, then wrote the documentation for it.”</blockquote>
    <div class="byline">
      <span class="avatar avatar-56 avatar-empty">IMG</span>
      <div class="byline-text">
        <span class="byline-name">Client name</span>
        <span class="byline-role">Role, Company</span>
      </div>
    </div>
  </div>
  <div class="hairline-grid hairline-grid-tight">
    <div class="hairline-cell hairline-cell-flush client-mark">NORTHWIND</div>
    <div class="hairline-cell hairline-cell-flush client-mark">ACME</div>
    <div class="hairline-cell hairline-cell-flush client-mark">CONTOSO</div>
    <div class="hairline-cell hairline-cell-flush client-mark">INITECH</div>
    <div class="hairline-cell hairline-cell-flush client-mark">UMBRELLA</div>
    <div class="hairline-cell hairline-cell-flush client-mark">GLOBEX</div>
  </div>
</div>

Reference

Read from modules/testimonial.css when this page was built, so it cannot fall behind the stylesheet.

CLASSES.testimonial.testimonial-body.testimonial-quote.client-mark

READS--ds-client-mark-h--ds-font-display--ds-gap--ds-gap-block--ds-ink--ds-ink-faint--ds-testimonial-col--ds-testimonial-gap--ds-text-h2--ds-text-meta--ds-track-meta--ds-track-snug--ds-weight-display

Notes

WHY IT DOES NOT REUSE .prose blockquote

That one is a pull quote inside an article — indented, ruled, quieter than the body around it. This is the loudest thing in its section. Same element, opposite job, so they are two rules rather than one with a modifier.

The quotation marks are in the text, not drawn with ::before. A generated quote mark enters the accessibility tree as a decorative character with no closing partner, and screen readers announce it inconsistently.