Avatar

Avatar

An avatar component represents an object or entity

Base

Preview

No content has been added for this component.

No content has been added for this component.

<span class="slds-avatar">
  <img alt="Person name" src="/assets/images/avatar2.jpg" title="User avatar" />
</span>

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

Restrictdiv, span, a
VariantTrue
Selector.slds-avatar_x-small
Summary

Size modifier for avatars - x-small

Restrict.slds-avatar
ModifierTrue
Selector.slds-avatar_small
Summary

Size modifier for avatars - small

Restrict.slds-avatar
ModifierTrue
Selector.slds-avatar_medium
Summary

Size modifier for avatars - medium

Restrict.slds-avatar
ModifierTrue
Selector.slds-avatar_large
Summary

Size modifier for avatars - large

Restrict.slds-avatar
ModifierTrue
Selector.slds-avatar_circle
Summary

Make avatar a circle

Restrict.slds-avatar
ModifierTrue
Selector.slds-avatar__initials
Summary

Used for initials inside an avatar

Restrict.slds-avatar abbr