Skip to content

AvatarStack

  • Stable
  • Not reviewed for accessibility

Stacked avatars can be used to show multiple collaborators or participants when there is limited space available. When you hover over the stack, the avatars will reveal themselves.

Based on the number of avatars in the stack, add these modifier classes:

  • AvatarStack--two for 2 avatars.
  • AvatarStack--three-plus for 3 or more avatars.

If you have more than three avatars, add a div with the classes avatar avatar-more as the third avatar in the stack, as such:

You can also link individual avatars. To do this shift the avatar class over to the anchor:

Use AvatarStack--right to right-align the avatar stack. Remember to switch the alignment of tooltips when making this change.

Edit this page on GitHub
1 contributorsimurai
Last edited by simurai on December 16, 2022