← All patterns

Testimonials · HTML + CSS starter

Let your customers talk

A spacious customer quote with attribution and a supporting introduction.

Make it your own

Starter example. Replace the sample content and links before publishing. Paste into an HTML page, or adapt the markup and styles to your framework.

          <section class="pp-section" aria-labelledby="section-title">
  <p class="pp-label">A fresh perspective</p>
  <h2 id="section-title">“Finally, a little room to think bigger.”</h2>
  <p>Make something that feels like you. Start with a strong foundation and make it your own.</p>
  <p>Alex Morgan · Example customer</p>
</section>
<style>
.pp-section{background:#0F1521;color:#fff;padding:clamp(2rem,8vw,6rem);font:1rem/1.6 system-ui,sans-serif;border-radius:1.5rem}.pp-section h2{font-size:clamp(2rem,5vw,4rem);line-height:1.05;letter-spacing:-.05em;max-width:16ch;margin:1rem 0}.pp-section p{max-width:52ch}.pp-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.12em}.pp-action{display:inline-block;background:#0F1521;color:#fff;border-radius:5rem;padding:1rem 1.5rem;margin-top:1.5rem;text-decoration:none}.pp-columns{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr));gap:1.5rem;margin-top:2rem}.pp-columns article{padding:1.5rem;background:#fff;color:#0F1521;border-radius:1rem}.pp-section details{padding:1rem 0;border-bottom:.0625rem solid currentColor}.pp-section summary{cursor:pointer}
</style>