Avatar + Badge
The Avatar + Badge Pattern is commonly used in many digital platforms to represent users and their accomplishments or roles. An Avatar is a small graphical representation of a user, often a profile picture or icon, while a Badge is a small visual element that is used with a short subtle message or indication to represent an achievement, alert or a status.

The Avatar + Badge Pattern comes with the styling flexibility provided by the Avatar and Badge that constitute its layout.
Size
The Avatar + Badge Pattern supports the same sizes the Avatar does:
- Large - Suitable for profile pages
- Medium - Appropriate for custom menus and visualizations
- Small - Easily embedded in a contact list and similar repetitive scenarios



Position
The Badge comes positioned in one of the four corners of the Avatar as shown below.
- Bottom Left
- Bottom Right
- Top Left
- Top Right

Details
The Avatar + Badge Pattern offers varying levels of details based on the size of the Avatar being used.



Facepile
Facepile is a widely used design element in digital platforms that visually represents a group of users or people. It typically displays a set of Avatar components in a compact and aesthetically pleasing format. Notably, Facepile supports the same sizes the Avatar does: Large, Medium and Small.



Additional Resources
Related topics:
Our community is active and always welcoming to new ideas.