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.