Profile
Profile is used to represent a user and add visual information in form of an icon, initials or image.
Usage guidelines
When to use
- To present a user in a generic or personalized way.
When not to use
- To show a user's image along contextual information, such as Name or description. Use Avatar instead.
- To represent a group of people when avatars are stacked. Use Avatar list instead.
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.
Variants
Size
Profile comes in three different sizes:
Within these different sizes, there are three different sizes of Notification and Status Badges:
- Extra small (14px), used for Profile Small.
- Small (18px), used for Profile Medium.
- Medium (22px), used for Profile Large.
Theme
For the Icon and Initials variants, there are twelve color options available:
- Dark theme: Zurich Blue, Moss, Teal, Candy, Lilac, Peach.
- Light theme: White, Mint, Lime, Lemon, Powder Candy.
Two additional Outline variants are available, one for each theme (in Zurich Blue for dark theme, in White for the light theme).
Notification and status badges
Notifications are always in Peach-AA and the copy in White. The circle border must use the same color as the background.
Badges can be used in three colors: use Moss for Online, Peach-AA for Busy and Gray-9 for Offline. Hide the badge if you don't need to display the status.
