The avatar is a visual representation of a user, commonly displayed in profiles, comments, or messaging apps, enhancing user engagement and recognition.
Appearance
The Platforms code Design System presents a diverse range of avatar variations, customized to meet varied design needs.
Types
Avatars are available in three types:
- Initial: Displays the initials of the username or user name.
- Image: Displays the user's image, whether it's pre-uploaded from the system or uploaded by the user.
- Icon: Displays an icon representing the user, used when the system doesn't allow the user to change the avatar or when the user hasn't yet changed their avatar.
Avatar size
Avatars in the Platforms code design system come in various sizes, depending on the container size:
- 24px and 32px (Small): Suitable for small spaces, such as in components like table cells or small components.
- 40px and 48px (Medium): The standard size used in most interface components such as profile panels or cards.
- 64px, 80px and 120px (Large): Used sparingly to highlight user or in spacious areas. When using large avatars, ensure they maintain balance with other components in the user interface.
Consider the size of the icon and surrounding elements when selecting the appropriate size to ensure visual harmony and balance.
Style
Avatars in the Platforms code are available in two distinct forms: the standard circular shape and a rectangular shape, offering increased versatility to meet different design contexts and user interface needs.