Navigation

 v0.0.4
Marketing blocks

Testimonials

What customers say, in their words and under their names.

A testimonial is a customer's words under a customer's name. The block is a quote: one large, when a single voice carries the page, or a few side by side.

Testimonials

<section class="container-inline px-lg py-4xl" aria-label="What customers say">  <blockquote class="quote quote-lg max-w(720) mx-auto">    <p class="quote-text">We moved forty services to Atlas in a quarter and stopped keeping a deploy calendar. Friday is an ordinary day now.</p>    <footer class="quote-source">      <span class="avatar">        <img class="avatar-image" src="/demo/portrait-3.svg" alt>      </span>      <span>        <span class="quote-name">Katherine Johnson</span>Engineering lead, Orbit</span>    </footer>  </blockquote></section>

Blocks are markup to copy. They take the page's own text color and size; the previews set fg-text-body text-sm on the body. Each block is a size container, so it reflows by its own width.

#What is in it

  • quote quote-lg in a measure. The pull quote sets its own opening mark and balances its lines; max-w(720) mx-auto gives it a column.
  • A source that is a person. A face, a name in ink and a role with a company. An anonymous quotation persuades nobody.
  • Nothing else. No stars, no logos, no carousel. One strong sentence does more than five rotating ones a visitor never waits for.

#Several

Three quotations on sheets in a tray, one column until 56rem of block and three from there. Each card is a flex box so the quote can grow and keep the sources on one line across the row.

Several

<section class="container-inline px-lg py-4xl" aria-labelledby="quotes-title">  <div class="flex flex-col gap-xl max-w(1040) mx-auto">    <header class="flex flex-col gap-sm max-w(560)">      <p class="eyebrow">Customers</p>      <h2 class="heading heading-2xl" id="quotes-title">Teams that ship with Atlas.</h2>    </header>    <ul class="tray grid gap(4) m(0) grid-cols(3)@container(--4xl)">      <li class="sheet sheet-raised flex p-lg">        <blockquote class="quote grow(1)">          <p class="quote-text">Previews changed how we review. Nobody argues about a screenshot any more; they click the link and look.</p>          <footer class="quote-source">            <span class="avatar avatar-sm">              <img class="avatar-image" src="/demo/portrait-1.svg" alt>            </span>            <span>              <span class="quote-name">Grace Hopper</span>Design lead, Northwind</span>          </footer>        </blockquote>      </li>      <li class="sheet sheet-raised flex p-lg">        <blockquote class="quote grow(1)">          <p class="quote-text">Cold builds went from a minute and a half to under a minute the week we moved. We changed nothing.</p>          <footer class="quote-source">            <span class="avatar avatar-sm">              <img class="avatar-image" src="/demo/portrait-2.svg" alt>            </span>            <span>              <span class="quote-name">Alan Turing</span>Staff engineer, Halcyon</span>          </footer>        </blockquote>      </li>      <li class="sheet sheet-raised flex p-lg">        <blockquote class="quote grow(1)">          <p class="quote-text">Rolling back used to be a meeting. Now it is a button, and it takes less time than explaining why.</p>          <footer class="quote-source">            <span class="avatar avatar-sm">              <img class="avatar-image" src="/demo/portrait-3.svg" alt>            </span>            <span>              <span class="quote-name">Katherine Johnson</span>Engineering lead, Orbit</span>          </footer>        </blockquote>      </li>    </ul>  </div></section>

Keep them the same length, within a line or two. A wall of cards with ragged feet looks unedited.

#Accessibility

  • Each is a <blockquote>, with the source in a <footer> inside it.
  • The avatar repeats the name beside it, so its alt is empty.
  • Use words people said, with their permission, and link to the source when it is public.