Components

Facepile

Small circular images (often people) that overlap on a row and loosen on hover, often called a facepile or avatar stack. In the kit it is implemented as .wckd-facepile in wckd-ui-components.css. It is not a photo gallery grid; use the Images page for size tokens and the Carousel or Overlays patterns when you need many full-size assets.

Jump to:

Download & setup

Download WCKD UI Style guide

Start with the package download and setup steps in Get Started, then use the style guide for utility and token references while implementing this component.

Default implementation

Default: wckd-facepile

Each item is typically an a wrapping a small img (often image-xs or similar). Negative horizontal margins create the overlap; hover relaxes spacing and border so the active thumb reads larger. Pair with flex, flex-group, and align-middle when you need the row to sit inline with copy or buttons.

Links can open a profile, a lightbox, or a team drawer, the kit does not ship JavaScript for this row.

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

  • Portrait stacks are dense UI: give each a a clear aria-label (or visible text nearby) so the row is not a row of anonymous photos.
  • Use empty alt on decorative avatars when the name or role is already stated in the label or adjacent copy.
  • The sheet uses float: left on items for overlap; the flex utilities on the wrapper keep the row aligned with surrounding layout, override borders or --background-color in your theme if the ring clashes with the page background.
  • For prefers-reduced-motion, consider toning down transitions in a project layer; the default transition is short (0.2s).

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