Avatar โ
Avatars add additional visual information about a user or team.
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.
Specifications โ
Anatomy โ
- 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.
Sizes โ
Avatar comes in three different 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.