Components

Facepile

Overlapping round avatars: .wckd-facepile with a tiles wrapping img (often alt="" when the link has aria-label). CSS only; no kit JS.

Jump to:

Download & setup

Download WCKD UI Style guide

Load the kit from Get Started; use the style guide for utilities and tokens while wiring this component.

Default implementation

Default: wckd-facepile

Each tile: a + img; name goes in aria-label when alt="".

Markup

<div class="wckd-facepile">
  <a href="/people/alex" aria-label="Alex Chen">
    <img src="/avatars/alex-64.jpg" width="64" height="64" alt="" />
  </a>
</div>

When to use

  • Team or document presence (“who is here”), reactions, or assignee lists.
  • Social proof on marketing blocks (faces without a full testimonial carousel).
  • Compact collaborator rows next to titles, bylines, or “Shared with” metadata.

Implementation notes

  • No kit JS: wire href to profile routes, overlays, or drawers yourself.
  • Give each a a clear aria-label (or visible text nearby) so the row is not anonymous photos.
  • Use empty alt on avatars when the link label already names the person.
  • Overlap uses floats; pair flex / align-middle on the wrapper to align with adjacent copy.

Developer checklist

  • Confirm keyboard focus order if links lead to different destinations; avoid trapping focus inside the row.
  • If more than a handful of people belong in the story, consider “+N” overflow text or a single link to a full list instead of an endless stack.
  • Pair with the Images component page for image-xs / thumbnail sizing and with Overlays when opening a modal roster.

← All components