Social

Social proof — avatar stack with headline

Named avatar cluster paired with a social-proof headline and count.

simple5 in Social

AvatarAvatarGroupLabelText

Demo

Joined by 2,411 developers this week

See why teams choose this stack for production Astro sites.

---
import { Avatar, AvatarGroup } from "astro-ui";
---

<div class="block-social-proof-label">
  <AvatarGroup>
    {["Ada Lovelace", "Grace Hopper", "Alan Turing", "Edsger Dijkstra", "Barbara Liskov"].map((name) => (
      <Avatar
        name={name}
        src={"https://i.pravatar.cc/150?img=" + (47 + ["Ada Lovelace", "Grace Hopper", "Alan Turing", "Edsger Dijkstra", "Barbara Liskov"].indexOf(name))}
        status={name === "Ada Lovelace" ? "online" : undefined}
      />
    ))}
  </AvatarGroup>
  <div class="block-social-proof-label__text">
    <p class="block-social-proof-label__headline">Joined by 2,411 developers this week</p>
    <p class="block-social-proof-label__sub">See why teams choose this stack for production Astro sites.</p>
  </div>
</div>

<style is:global>
  .block-social-proof-label { display: flex; align-items: center; gap: var(--ui-space-4); flex-wrap: wrap; }
  .block-social-proof-label__text { display: flex; flex-direction: column; gap: var(--ui-space-1); }
  .block-social-proof-label__headline { margin: 0; font-weight: var(--ui-font-semibold); color: var(--ui-foreground); font-size: var(--ui-text-base); }
  .block-social-proof-label__sub { margin: 0; color: var(--ui-muted-foreground); font-size: var(--ui-text-sm); }
</style>

Zero new CSS — every element reads the library tokens. Switch to the Code tab and hit Copy for paste-ready source; form ids here are prefixed per instance so multiple copies can coexist on one page.