Design
Component checklist
Up to date
React
Up to date
Usage
For cases when more than one avatar is needed, Soul defines an Avata group. Avatar group is a horizontal stack of Avatar with a 1px border to separate them. Each avatar contains a hover interaction to populate a tooltip with information about the user or profile.
Overflow
We display a maximum of up to five avatars at a time. If there are six or more, we use a numbered avatar to represent the additional ones. For more information, see the documentation on overflow.
On hover of that number, the rest of the hidden elements are displayed in a tooltip.
Sizes
Avatar group can be displayed in five different sizes. The size should be responsibly chosen by context and space. As a default size, Soul defines Medium.
