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.