Avatar group

Basic

For the single portrait, sizes, and indicator, see Avatar. .avatar-group is purely visual stacking, and lets every member keep its own paint. Wrap two or more .avatar children in .avatar-group. Members overlap via a negative inline margin, and the group turns the per-avatar ring on so adjacent shapes read as separate objects.

Composition with avatar modifiers

The group is shape- and size-agnostic. Mix in any .avatar modifier (--sm, --lg, --circle) and the stack composes flat.

Overflow tail

Add .avatar-group__more as the final child to summarize the rest. It's a regular.avatar, so size and shape modifiers compose; the modifier just retints the paint to read as "more."

Retint the tail to a brand color by overriding --avatar-bg / --avatar-color on the element. Same vars the base .avatar reads.

Overlap density

Tighten or loosen the stack by overriding --avatar-group-overlap on the group — the negative inline margin per neighbor. Set it to zero for a non-overlapping strip with the ring still applied, or to half the avatar size for a tight stack.

On a tinted surface

The per-member ring tracks the page background by default. On a tinted surface, publish a matching --avatar-group-ring-color on the group so the ring blends with the host instead of punching through it.

Customization

Three variables retune .avatar-group. Per-member paint comes from the avatar's own variables (see Avatar).