Types
By default, a user’s avatar is their initials. In the small version, this will be their first initial only. When a user has uploaded a photo, that image should replace their initials.
Placement
Grouping
Desktop
Stack horizontally with a -8px overlap
Native app
- Groups of 2: stack horizontally at a 30º angle with a -8px overlap
- Groups of 3: stack in an upside-down triangle
- Groups of 4 or more: stack in an upside-down triangle, with the bottom avatar housing the overflow count (see below)
Best practices
Hover
While the avatar itself does not have a hover effect, if the name paired with it is truncated, then the name will have a tooltip.
Overflow
For each avatar size, there is a max number of digits that can be displayed.
- Small avatar: 2 digits
- Medium avatar: 3 digits
- Large avatar: 3 digits
- XL avatar: 3 digits
Max digits
- Small size avatar: plus then one digit, ex: +3
- Medium size avatar: plus then two digits, ex: +12
Exceeding max digits
- Small size avatar: one digit then +, ex: 9+
- Medium size avatar: two digits then +, ex: 99+
Pre-set channels
(Native App)
For pre-set channels, use a generic “group” icon and 8px rounded corner square. Pre-set channels may include: Entire Team, Celebrations, Everyone Working Today, Everyone Working Tomorrow
Resources
(internal only)