Avatar
An avatar component represents an object or entity
Base
Preview
About Base
An image is the preferred format for an avatar
About Avatar
An avatar can be circular or a rounded rectangle, depending on usage. The
default is a rounded rectangle and requires .slds-avatar as the base class.
Use a circle for all people-oriented objects that could potentially render
as avatars. For a fully round avatar, add the .slds-avatar_circle class.
Four additional classes are available for sizing.
If an image is unavailable, up to two letters can be used instead. If the record name contains two words, like first and last name, use the first capitalized letter of each. For records that only have a single word name, use the first two letters of that word using one capital and one lower case letter. If either an image or initials are unavailable, use the object icon as a fallback.
Overview of CSS Classes
| Selector | .slds-avatar |
|---|---|
| Summary | Creates an avatar component |
| Restrict | div, span, a |
| Variant | True |
| Selector | .slds-avatar_group-image-small |
|---|---|
| Summary | Uses the small group image as the avatar icon |
| Restrict | .slds-avatar |
| Selector | .slds-avatar_group-image-medium |
|---|---|
| Summary | Uses the medium group image as the avatar icon |
| Restrict | .slds-avatar |
| Selector | .slds-avatar_group-image-large |
|---|---|
| Summary | Uses the large group image as the avatar icon |
| Restrict | .slds-avatar |
| Selector | .slds-avatar_profile-image-small |
|---|---|
| Summary | Uses the small user avatar image as the avatar icon |
| Restrict | .slds-avatar |
| Selector | .slds-avatar_profile-image-medium |
|---|---|
| Summary | Uses the medium user avatar image as the avatar icon |
| Restrict | .slds-avatar |
| Selector | .slds-avatar_profile-image-large |
|---|---|
| Summary | Uses the large user avatar image as the avatar icon |
| Restrict | .slds-avatar |
| Selector | .slds-avatar_x-small |
|---|---|
| Summary | Size modifier for avatars - X-Small |
| Restrict | .slds-avatar |
| Modifier | True |
| Selector | .slds-avatar_small |
|---|---|
| Summary | Size modifier for avatars - Small |
| Restrict | .slds-avatar |
| Modifier | True |
| Selector | .slds-avatar_medium |
|---|---|
| Summary | Size modifier for avatars - Medium |
| Restrict | .slds-avatar |
| Modifier | True |
| Selector | .slds-avatar_large |
|---|---|
| Summary | Size modifier for avatars - Large |
| Restrict | .slds-avatar |
| Modifier | True |
| Selector | .slds-avatar_circle |
|---|---|
| Summary | Make avatar a circle |
| Restrict | .slds-avatar |
| Modifier | True |
| Selector | .slds-avatar__initials |
|---|---|
| Summary | Used for initials inside an avatar |
| Restrict | .slds-avatar abbr |
| Variant | True |
| Selector | .slds-avatar__initials_inverse |
|---|---|
| Summary | Used for initials that are dark text on light background |
| Restrict | .slds-avatar__initials |
| Modifier | True |