Avatar
Displaying the full name of a person in an interface can take up way more space than needed and can disrupt rhythm. Use avatars in place of a user’s name (but include the name in content readable by assistive technology).
Structure
Elements
- Container
- Image
Variations
Size
Fixed sizes are available to provide consistency across layouts.
| Size | Dimensions (square) |
|---|---|
| Extra small | 24 px |
| Small | 36 px |
| Medium | 48 px |
| Large | 72 px |
| Extra large | 96 px |
Profile
When part of the page hierarchy, give the avatar a visual boost by adding a shadow.
Badge
Sometimes you need to dress up an avatar with a little bling. Common examples would be an online/offline indicator or a descriptive icon.
Stacked
To display a horizontal row of avatars, use the stacked avatar component.
Style
Style specifications are available to inspect via Abstract. The following link will take you to their web-based interface.
Theming
The following table lists the theme properties used to style this component and any variations as well as a sample value.
A full list of properties used within the design system—as well as general usage guidelines—is available on the Theme properties page.
Examples of each theme property may be referenced by clicking a property name in the “property” column.
| Sample | Property | Sample value |
|---|---|---|
bodyTextSecondaryColor
Medium dark text color used for secondary or muted content in layouts |
#64707DFF
|
|
secondaryContentBackgroundColor
|
#DEE4ECFF
|