Live Demo
Avatar
KM
Groups
KM
Groups with count
+4
Anatomy
Avatars are visual representations of people or entities and are often displayed within lists or cards.
Container with the following optional variations:
- Image
- Placeholder
- Text
Layout and spacing
Variations
The avatar comes in three variations: text, icon, or image. Whenever feasible, using images to depict individuals or organizations is advised. In cases where images are absent, icons from the icon library can serve as alternatives. The default avatar employs the person icon.
- Individual Avatar
- Avatar Group
Size
Avatars can be displayed in x-large, large, medium, small and x-small sizes.
Examples
Guidelines
- 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.