Avatar Group

Size

data-size on the group sizes every avatar. Where they overlap, each avatar leaves a real gap around the one in front.

AL GH AT KJ LT 5+

AL GH AT KJ LT 5+

AL GH AT KJ LT 5+

AL GH AT KJ LT 5+

AL GH AT KJ LT 5+

AL GH AT KJ LT 5+

AL GH AT KJ LT 5+

xs to 2xl, then without data-size.

Density

How tightly avatars sit, independent of their size: data-density compact, comfortable or spacious, on the group or any container.

compact

AL GH AT KJ LT 5+

AL GH AT KJ LT 5+

AL GH AT KJ LT 5+

comfortable

AL GH AT KJ LT 5+

AL GH AT KJ LT 5+

AL GH AT KJ LT 5+

spacious

AL GH AT KJ LT 5+

AL GH AT KJ LT 5+

AL GH AT KJ LT 5+

From a container, overriding the clickable default

Clickable avatars are spread out by default, so each is easy to hit; a container can still ask for compact.

AL GH AT KJ LT

Mixed content

Photos, initials, icons and the count of the rest in one group. The count is a plain avatar without a seed, so it is neutral.

AL GH AT LT 12+

Spotlight

data-spotlight on the group: the avatar under the pointer comes forward (on top, a little bigger, no longer cut by the one before it) while the others fade, and its name shows in a Tooltip. Keyboards reach them too: the group is one Tab stop, and the arrow keys move between its avatars. The name comes from the avatar (its fallback's aria-label); for more, point the avatar at your own Tooltip with interestfor, as the last one does with the rest's names.

AL GH AT KJ MH 3+

Linus Torvalds, Barbara Liskov, Dennis Ritchie

Apart, and clickable

AL GH AT

Clickable

Links to profiles, and a button that shows the rest. Tab through them.

AL GH AT KJ 8+

With status

An avatar's own cut-outs still work inside a group.

AL Online GH Away AT Busy KJ Offline 3+

Edge cases

On other surfaces

The gaps between avatars are real: the surface shows through.

AL GH AT KJ LT 5+

Right-to-left

The first avatar is on the right, still on top.

AL GH AT KJ LT 5+

Two

AL GH