COMPONENTS
Avatar
Avatars use images, icons or text to visually represent people or companies.
Avatars are visual representations of people or entities and are often displayed within lists or cards.
- Container with the following optional variations:
- Image
- Icon
- Text
Avatar has three variations — text, icon or image. It is recommended to use imagery to represent people or companies whenever possible. If images are unavailable, icons from the icon library can be used. By default, avatar uses the person icon.
Avatars can be bold or subtle depending on how prominent its display should be.
Avatars can be displayed in x-large, large, medium, small and x-small sizes.
- Place avatars alongside additional information about the people or companies the avatars represent.
- Avatars can be displayed in lists that are searchable and selectable.
- Use inline avatars to mention people in a sentence.
- Prioritize images and icons over text.
Contents