Avatar ​

Avatars add additional visual information about a user or team.

Avatar overview

Usage guidelines ​

When to use ​

  • To show a user's image along contextual information.

Writing guidelines ​

User name length

  • To display user information, you can add a user name with a recommended maximum number of 20 characters and 30 characters for the description text.
  • Use three dots if the user name is longer than 20 characters.
Use three dots if the user name is longer than 20 characters.
Do not add user names longer than 20 characters and descriptions longer than 30 characters.

Specifications ​

Anatomy ​

Avatar - dropdown
  • Background circle: Can be in Zurich Blue, White, or a Main secondary color palette
  • Initials, user icon or image
  • Notification badge(optional): can display a numerical value or an icon.
  • Status badge(optional): displays the user status.
  • Dropdown (optional): triggers a menu with additional commands

Types ​

Three types of avatar are available: Horizontal text, Vertical text and Dropdown.

Avatar types

Sizes ​

Avatar comes in three different sizes:

Avatar Sizes

Styling ​

Avatar is available in Solid, Outline or Image style. Read more about the different variants and colors within these three options in Profile.

Accessibility guidelines ​

  • Color: Make sure there is enough contrast between the component and the surrounding background.