Stacks

Pure-CSS avatar stack for displaying overlapping circular images or initials badges. Compose size presets, overlap densities, directions, hover animations, ring borders, and a +N counter badge entirely through CSS classes.

Quick Start

Wrap items in div.wf-stack-group and give each child the class wf-stack-item . Place an <img> inside each item — it fills the circle with object-fit: cover automatically.

+12

HTML Copy

<div class="wf-stack-group">
  <div class="wf-stack-item"><img src="avatar1.jpg" alt="User 1"></div>
  <div class="wf-stack-item"><img src="avatar2.jpg" alt="User 2"></div>
  <div class="wf-stack-item"><img src="avatar3.jpg" alt="User 3"></div>
</div>

Sizes

Add a size class to wf-stack-group to set the --wf-stack-size CSS variable for all child items. The default (no class) is wf-stack-md at 2.75rem.

xs · 1.75rem

sm · 2.25rem

md · 2.75rem (default)

lg · 3.5rem

xl · 4.5rem

HTML Copy

<div class="wf-stack-group wf-stack-xs">...</div>  <!-- 1.75rem -->
<div class="wf-stack-group wf-stack-sm">...</div>  <!-- 2.25rem -->
<div class="wf-stack-group wf-stack-md">...</div>  <!-- 2.75rem (default) -->
<div class="wf-stack-group wf-stack-lg">...</div>  <!-- 3.5rem -->
<div class="wf-stack-group wf-stack-xl">...</div>  <!-- 4.5rem -->

<!-- Custom size via CSS variable -->
<div class="wf-stack-group" style="--wf-stack-size: 5rem">...</div>

Overlap

Three overlap presets control how much each item covers its neighbor by adjusting a negative margin-inline-start . The default (no class) matches wf-stack-tight . You can also set --wf-gap directly for a custom value.

wf-stack-tight

wf-stack-normal

wf-stack-loose

HTML Copy

<div class="wf-stack-group wf-stack-tight">...</div>   <!-- items nearly touch -->
<div class="wf-stack-group wf-stack-normal">...</div>  <!-- medium overlap -->
<div class="wf-stack-group wf-stack-loose">...</div>   <!-- widely spaced -->

<!-- Custom overlap via CSS variable -->
<div class="wf-stack-group" style="--wf-gap: -0.5rem">...</div>

Direction

By default, items overlap left-to-right (first item on top). Use wf-stack-reverse to flip the order so items overlap right-to-left. Use wf-stack-vertical for a column with top overlap.

Default (left-to-right)

wf-stack-reverse

wf-stack-vertical

HTML Copy

<!-- Right-to-left overlap -->
<div class="wf-stack-group wf-stack-reverse">...</div>

<!-- Vertical column with top overlap -->
<div class="wf-stack-group wf-stack-vertical">...</div>

Hover Lift

Add wf-stack-hover to the group to make each item rise ( translateY(-3px) ) with a spring animation when hovered. The hovered item also gets a higher z-index so it appears above its neighbors.

DM

AL

CS

FW

KM

HTML Copy

<div class="wf-stack-group wf-stack-hover">
  <div class="wf-stack-item"><img src="avatar.jpg" alt="..."></div>
  <div class="wf-stack-item wf-stack-label wf-bg-secondary">AL</div>
</div>

Organic Lift

wf-stack-lift staggers the group into a gentle wave: odd-indexed items translate up 3px and even-indexed items translate down 3px , creating an organic hand-placed look.

HTML Copy

<div class="wf-stack-group wf-stack-lift">
  <div class="wf-stack-item"><img src="avatar.jpg" alt="..."></div>
  <div class="wf-stack-item"><img src="avatar.jpg" alt="..."></div>
  <div class="wf-stack-item"><img src="avatar.jpg" alt="..."></div>
</div>

Ring

wf-stack-ring adds a 2px white ring around every item using box-shadow . This separates overlapping items visually and works well on light backgrounds. For dark or transparent backgrounds use the wf-stack-item-transparent modifier on individual items to switch the ring to a translucent white.

Without ring

wf-stack-ring

HTML Copy

<!-- White ring on every item -->
<div class="wf-stack-group wf-stack-ring">...</div>

<!-- Translucent ring for dark/transparent backgrounds -->
<div class="wf-stack-group wf-stack-ring">
  <div class="wf-stack-item wf-stack-item-transparent">...</div>
  <div class="wf-stack-item wf-stack-item-transparent">...</div>
</div>

Shadow

wf-stack-shadow applies a soft drop shadow to every item. Combine it with wf-stack-ring for a more polished look, or use it alone for a floating effect.

wf-stack-shadow

wf-stack-ring + wf-stack-shadow

HTML Copy

<div class="wf-stack-group wf-stack-shadow">...</div>

<!-- Combined with ring -->
<div class="wf-stack-group wf-stack-ring wf-stack-shadow">...</div>

Counter Badge

Add a +N overflow count as the last child. Give it both wf-stack-item (for the circular shape and sizing) and wf-stack-counter (for the small bold typography). Supply a background color using a framework color utility or custom style.

+24

HTML Copy

<div class="wf-stack-group wf-stack-ring">
  <div class="wf-stack-item"><img src="avatar1.jpg" alt="User 1"></div>
  <div class="wf-stack-item"><img src="avatar2.jpg" alt="User 2"></div>
  <div class="wf-stack-item"><img src="avatar3.jpg" alt="User 3"></div>
  <div class="wf-stack-item wf-stack-counter" style="background: var(--wf-surface-2)">+24</div>
</div>

Class Reference

wf-stack-responsive reduces the item size to 2.25rem on viewports narrower than 42rem . Add it to the group alongside any size preset.