Avatar Stack

An avatar stack can include any avatar type defined in the component such as initials, images, or icons. There can be scenarios where all three avatar types can appear in the same list.

There can be a maximum of 5 avatars displayed. If there is more than 5, the fifth avatar will be used as an overflow button and the remaining number will be displayed. The overflow will cap at 99 and display as 99+.

If a user is inactive, the avatar will use the component’s disabled state. Users who are active will be grouped at the top of the stack. Inactive users will be organized at the bottom of the stack. The avatars within the popover will also reflect the users active or inactivity. Within each group the users will be organized as most recently active to least.

On hover, a popover appears with the name of the person or company. Simultaneously, the avatar will shift to sit above the other avatars in the stack. The popover will have a max width of 248px. For additional information regarding these components, please seepopover and avatar.
‍
Content within the popover is using the contact item component.

If a user hovers over the overflow a popover will a appear with a list of names. The list will cap off at a max of four. When this happens, a ‘View All’ link will appear. Clicking 
on the link will trigger a modal with the complete list. The modal will have a max width of 528px.

If an item is a group, the amount of members in the group will not be reflected in the item count in the modal title and the group will be counted as 1 item.

Avatar colors are organized in a specific order to enhance contrast for accessibility purposes. They should always appear in this order: blue, purple, orange, and lastly gray. If there are images used in the avatar, the next initials or company avatar will have the next color in the patern. The overflow will always have the same fill color.

For avatar-specific styling, please see avatar.