Avatar

Use to represent a user or a brand (with a logo or branded graphic). When the user did not upload any picture yet, avatar should present user’s initials in Grape on Lilac background, details are provided below.

Avatar / Size=XL, Show Photo=True
Avatar / Size=XL, Show Photo=False

 

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.

Avatar-Example-Types

 

Placement

Grouping

Desktop

Stack horizontally with a -8px overlap

Avatars-Example-Grouping-Web

 

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)
Avatars-Example-Grouping-Native-App

 

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.

Avatars-Example-Hover

 

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
Avatars-Example-Overflow-Max

 

Exceeding max digits

  • Small size avatar: one digit then +, ex: 9+
  • Medium size avatar: two digits then +, ex: 99+
Avatars-Example-Overflow-Exceeding-Max

 

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

Avatars-Example-Preset-Channels

 

Resources

(internal only)

Figma

Storybook

Enhancements