Creator Credit

Fetch pattern JSON: curl https://webspire.de/patterns/social-proof/creator-credit.json

creator-credit.html

<section class="ws-social-proof bg-[var(--ws-social-proof-bg)] py-20">
  <div class="mx-auto max-w-3xl px-6 text-center">

    <!-- Overlapping avatar stack -->
    <div class="mb-6 flex items-center justify-center">
      <div class="flex -space-x-3" role="group" aria-label="Contributors">
        <!-- Avatar 1 -->
        <div class="relative inline-flex h-10 w-10 items-center justify-center rounded-full border-2 border-[var(--ws-social-proof-bg)] bg-violet-500 text-sm font-semibold text-white ring-0" aria-label="Maria S.">
          <span aria-hidden="true">MS</span>
        </div>
        <!-- Avatar 2 -->
        <div class="relative inline-flex h-10 w-10 items-center justify-center rounded-full border-2 border-[var(--ws-social-proof-bg)] bg-sky-500 text-sm font-semibold text-white ring-0" aria-label="James K.">
          <span aria-hidden="true">JK</span>
        </div>
        <!-- Avatar 3 -->
        <div class="relative inline-flex h-10 w-10 items-center justify-center rounded-full border-2 border-[var(--ws-social-proof-bg)] bg-emerald-500 text-sm font-semibold text-white ring-0" aria-label="Priya N.">
          <span aria-hidden="true">PN</span>
        </div>
        <!-- Avatar 4 -->
        <div class="relative inline-flex h-10 w-10 items-center justify-center rounded-full border-2 border-[var(--ws-social-proof-bg)] bg-amber-500 text-sm font-semibold text-white ring-0" aria-label="Leo C.">
          <span aria-hidden="true">LC</span>
        </div>
        <!-- +N overflow badge -->
        <div class="relative inline-flex h-10 w-10 items-center justify-center rounded-full border-2 border-[var(--ws-social-proof-bg)] bg-[var(--ws-social-proof-border)] text-xs font-semibold text-[var(--ws-social-proof-text)]" aria-label="and 240 more">
          <span aria-hidden="true">+240</span>
        </div>
      </div>
    </div>

    <!-- Stat -->
    <p class="text-2xl font-bold text-[var(--ws-social-proof-text)]">
      244 developers already building with Webspire
    </p>

    <!-- Dotted-underline attribution credits -->
    <p class="mt-4 text-sm text-[var(--ws-social-proof-text-muted)]">
      Used by teams at
      <a href="#" class="border-b border-dotted border-[var(--ws-social-proof-text-muted)] font-medium text-[var(--ws-social-proof-text)] transition hover:border-solid">Vercel</a>,
      <a href="#" class="border-b border-dotted border-[var(--ws-social-proof-text-muted)] font-medium text-[var(--ws-social-proof-text)] transition hover:border-solid">Linear</a>,
      <a href="#" class="border-b border-dotted border-[var(--ws-social-proof-text-muted)] font-medium text-[var(--ws-social-proof-text)] transition hover:border-solid">Loom</a>, and
      <a href="#" class="border-b border-dotted border-[var(--ws-social-proof-text-muted)] font-medium text-[var(--ws-social-proof-text)] transition hover:border-solid">many more</a>.
    </p>

    <!-- Star rating row -->
    <div class="mt-5 flex items-center justify-center gap-2">
      <div class="flex gap-0.5" aria-label="5 out of 5 stars">
        <svg class="h-4 w-4 text-amber-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z" clip-rule="evenodd"/></svg>
        <svg class="h-4 w-4 text-amber-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z" clip-rule="evenodd"/></svg>
        <svg class="h-4 w-4 text-amber-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z" clip-rule="evenodd"/></svg>
        <svg class="h-4 w-4 text-amber-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z" clip-rule="evenodd"/></svg>
        <svg class="h-4 w-4 text-amber-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z" clip-rule="evenodd"/></svg>
      </div>
      <span class="text-xs text-[var(--ws-social-proof-text-muted)]">4.9 / 5 average</span>
    </div>

  </div>
</section>

Details

Family

social-proof

Tier

base

Kind

section

Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste

Stable Published

social-proofavatarsstackcreditattributionstarsratingtrust

Slots

Name	Required	Description
avatars	Yes	Overlapping avatar stack — initials or images, with +N overflow badge.
stat	Yes	Primary user count or social proof number.
attribution	No	"Used by teams at …" sentence with dotted-underline company links.
stars	No	Star rating row with average score.

The overlapping avatar stack uses -space-x-3 (negative horizontal spacing) and a border-2 that matches the background color — this creates the “cut-out” separation between overlapping circles without any custom CSS.

The dotted-underline attribution links (border-b border-dotted) are a subtle way to indicate company names are clickable without overloading the visual hierarchy.

With real avatar images

<img
  src="/avatars/maria.jpg"
  alt="Maria S."
  class="h-10 w-10 rounded-full border-2 border-[var(--ws-social-proof-bg)] object-cover"
>