Social

Social proof — compact initials row

Initial-based avatar row with a trust line for signup and onboarding flows.

simple5 in Social

AvatarLabelText

Demo

Trusted by 2,400+ engineers

Ada Lovelace, Grace Hopper & 2,400 more

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

<div class="block-social-proof">
  <div class="block-social-proof__row">
    <Avatar name="Ada Lovelace" size="xs" status="online" />
    <Avatar name="Grace Hopper" size="xs" />
    <Avatar name="Alan Turing" size="xs" />
    <Avatar name="Edsger Dijkstra" size="xs" variant="primary" />
    <Avatar name="Barbara Liskov" size="xs" />
  </div>
  <p class="block-social-proof__label">Trusted by engineers at</p>
  <p class="block-social-proof__name">Ada Lovelace, Grace Hopper, Alan Turing, and 247 more</p>
</div>

<style is:global>
  .block-social-proof { display: flex; flex-direction: column; align-items: center; gap: var(--ui-space-2); padding: var(--ui-space-6); text-align: center; }
  .block-social-proof__row { display: flex; gap: var(--ui-space-2); }
  .block-social-proof__label { margin: 0; font-size: var(--ui-text-xs); color: var(--ui-muted-foreground); text-transform: uppercase; letter-spacing: 0.05em; }
  .block-social-proof__name { margin: 0; font-size: var(--ui-text-sm); color: var(--ui-foreground); max-width: 20rem; text-align: center; }
</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.