Social proof

Why a visitor should believe you: what other people said, who uses you, and the numbers.

Testimonial cardsQuote bannerLogo stripStats row

Testimonial cards

sections/social-proof/testimonial-cards.html

Three short quotes, each with a name, a role and an initials avatar, so nobody needs a headshot.

  • Use real quotes from real customers, with their permission. Made-up testimonials are worse than none.
<section class="mx-auto max-w-6xl px-6 py-16 sm:py-24">
  <h2 class="mt-0! mb-0! border-t-0! pt-0! text-center text-3xl! font-bold! leading-tight! tracking-tight sm:text-4xl!">What clients say</h2>
  <div class="mt-12 grid gap-6 md:grid-cols-3">
    <figure class="my-0! flex flex-col justify-between gap-6 rounded-2xl border border-black/10 p-6 dark:border-white/10">
      <blockquote class="my-0! border-l-0! pl-0! text-base leading-relaxed! text-black/80! dark:text-white/80!">They quoted a real price the same day, and the invoice matched it to the cent. That alone put them ahead of everyone else we called.</blockquote>
      <figcaption class="flex items-center gap-3">
        <span class="flex size-10 shrink-0 items-center justify-center rounded-full bg-brand-50 text-sm font-semibold text-brand-600 dark:bg-brand-500/15 dark:text-brand-50">MR</span>
        <span class="text-sm"><span class="block font-semibold">Maria R.</span><span class="block text-black/60 dark:text-white/60">Homeowner</span></span>
      </figcaption>
    </figure>
    <figure class="my-0! flex flex-col justify-between gap-6 rounded-2xl border border-black/10 p-6 dark:border-white/10">
      <blockquote class="my-0! border-l-0! pl-0! text-base leading-relaxed! text-black/80! dark:text-white/80!">Same two people every visit. They know which beds to leave alone and never need reminding.</blockquote>
      <figcaption class="flex items-center gap-3">
        <span class="flex size-10 shrink-0 items-center justify-center rounded-full bg-brand-50 text-sm font-semibold text-brand-600 dark:bg-brand-500/15 dark:text-brand-50">DK</span>
        <span class="text-sm"><span class="block font-semibold">Daniel K.</span><span class="block text-black/60 dark:text-white/60">Café owner</span></span>
      </figcaption>
    </figure>
    <figure class="my-0! flex flex-col justify-between gap-6 rounded-2xl border border-black/10 p-6 dark:border-white/10">
      <blockquote class="my-0! border-l-0! pl-0! text-base leading-relaxed! text-black/80! dark:text-white/80!">The design fit how little time we actually have. Two years on it still looks the way it did in the drawing.</blockquote>
      <figcaption class="flex items-center gap-3">
        <span class="flex size-10 shrink-0 items-center justify-center rounded-full bg-brand-50 text-sm font-semibold text-brand-600 dark:bg-brand-500/15 dark:text-brand-50">AS</span>
        <span class="text-sm"><span class="block font-semibold">Anna S.</span><span class="block text-black/60 dark:text-white/60">Homeowner</span></span>
      </figcaption>
    </figure>
  </div>
</section>

Quote banner

sections/social-proof/testimonial-banner.html

One big quote on its own. For the single testimonial that says it best.

<section class="px-6 py-16 sm:py-24">
  <figure class="mx-auto my-0! max-w-3xl text-center">
    <svg class="mx-auto size-10 text-brand-500" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M4 18v-5c0-4 2-7 6-8l1 2c-2 1-3 3-3 5h3v6H4zm9 0v-5c0-4 2-7 6-8l1 2c-2 1-3 3-3 5h3v6h-7z"/></svg>
    <blockquote class="mt-6! mb-0! border-l-0! pl-0! text-2xl font-semibold leading-snug! tracking-tight text-black! sm:text-3xl dark:text-white!">We booked direct after finding the villa online, and it was the easiest part of the whole trip. The pool was worth it, but the extra bedroom for the kids sealed it.</blockquote>
    <figcaption class="mt-8 text-sm"><span class="font-semibold">Sofia and Marco</span><span class="text-black/60 dark:text-white/60"> · stayed in July</span></figcaption>
  </figure>
</section>

Logo strip

sections/social-proof/logo-strip.html

A row of customer or partner names, greyed out so they don't compete with your own brand. The example names are made up.

  • Swap each text wordmark for the real logo (an <img> or inline SVG), and only list companies that agreed to it.
<section class="mx-auto max-w-6xl px-6 py-12 sm:py-16">
  <p class="my-0! text-center text-sm font-semibold text-black/60 dark:text-white/60">Trusted by small teams everywhere</p>
  <ul class="mt-8! mb-0! flex list-none! flex-wrap items-center justify-center gap-x-10 gap-y-6 pl-0! text-black/45 dark:text-white/45">
    <li class="mt-0! flex items-center gap-2 text-lg font-bold tracking-tight"><svg class="size-6" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="12" cy="12" r="9"/></svg>Lumen</li>
    <li class="mt-0! flex items-center gap-2 text-lg font-bold tracking-tight"><svg class="size-6" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 3l9 16H3z"/></svg>Kestrel</li>
    <li class="mt-0! flex items-center gap-2 text-lg font-bold tracking-tight"><svg class="size-6" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><rect x="4" y="4" width="16" height="16" rx="4"/></svg>Fieldnote</li>
    <li class="mt-0! flex items-center gap-2 text-lg font-bold tracking-tight"><svg class="size-6" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2l3 7h7l-5.5 4.5 2 7.5L12 16.5 5.5 21l2-7.5L2 9h7z"/></svg>Brightside</li>
    <li class="mt-0! flex items-center gap-2 text-lg font-bold tracking-tight"><svg class="size-6" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M3 12a9 9 0 0 1 18 0H3z"/></svg>Oakline</li>
    <li class="mt-0! flex items-center gap-2 text-lg font-bold tracking-tight"><svg class="size-6" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M4 4h7v7H4zM13 13h7v7h-7z"/></svg>Harbor&amp;Co</li>
  </ul>
</section>

Stats row

sections/social-proof/stats.html

Three or four numbers with labels. Two columns on a phone, all in a row on a desktop.

<section class="mx-auto max-w-6xl px-6 py-16 sm:py-24">
  <h2 class="mt-0! mb-0! border-t-0! pt-0! text-center text-3xl! font-bold! leading-tight! tracking-tight sm:text-4xl!">Twelve years of gardens</h2>
  <dl class="mt-12! mb-0! grid grid-cols-2 gap-px overflow-hidden rounded-2xl bg-black/10 lg:grid-cols-4 dark:bg-white/10">
    <div class="flex flex-col-reverse gap-1 bg-white p-6 text-center sm:p-8 dark:bg-neutral-950">
      <dt class="text-sm text-black/60 dark:text-white/60">Gardens looked after</dt>
      <dd class="ml-0! text-4xl font-bold tracking-tight">340</dd>
    </div>
    <div class="flex flex-col-reverse gap-1 bg-white p-6 text-center sm:p-8 dark:bg-neutral-950">
      <dt class="text-sm text-black/60 dark:text-white/60">Quotes sent same day</dt>
      <dd class="ml-0! text-4xl font-bold tracking-tight">92%</dd>
    </div>
    <div class="flex flex-col-reverse gap-1 bg-white p-6 text-center sm:p-8 dark:bg-neutral-950">
      <dt class="text-sm text-black/60 dark:text-white/60">Clients who stay a second year</dt>
      <dd class="ml-0! text-4xl font-bold tracking-tight">8 in 10</dd>
    </div>
    <div class="flex flex-col-reverse gap-1 bg-white p-6 text-center sm:p-8 dark:bg-neutral-950">
      <dt class="text-sm text-black/60 dark:text-white/60">Average rating</dt>
      <dd class="ml-0! text-4xl font-bold tracking-tight">4.9</dd>
    </div>
  </dl>
</section>