Avatar

avatar

.slds-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.

base

.slds-avatar — Creates an avatar component

base › Circle

base › Profile Avatar Image

base › Group Avatar Image

base › Fallback - User initials

base › Fallback - User icon

base › Fallback - Entity Initials

base › Fallback - Entity Icon

base › Fallback - User Initials Inversed

base › X-Small Image

base › Small Image

base › Medium Image

base › Large Image

base › Wrapped in a link

Small Group Image

.slds-avatar_group-image-small — Uses the small group image as the avatar icon

Medium Group Image

.slds-avatar_group-image-medium — Uses the medium group image as the avatar icon

Large Group Image

.slds-avatar_group-image-large — Uses the large group image as the avatar icon

Small User Profile Image

.slds-avatar_profile-image-small — Uses the small user avatar image as the avatar icon

Medium User Profile Image

.slds-avatar_profile-image-medium — Uses the medium user avatar image as the avatar icon

Large User Profile Image

.slds-avatar_profile-image-large — Uses the large user avatar image as the avatar icon

x-small

.slds-avatar_x-small — Size modifier for avatars - X-Small

small

.slds-avatar_small — Size modifier for avatars - Small

medium

.slds-avatar_medium — Size modifier for avatars - Medium

large

.slds-avatar_large — Size modifier for avatars - Large

circle

.slds-avatar_circle — Make avatar a circle

initials

.slds-avatar__initials — Used for initials inside an avatar

initials › Wrapped in a link

initials

.slds-avatar-grouped__initials — Modifier for the initials Avatar in an Avatar Group

inversed

.slds-avatar__initials_inverse — Used for initials that are dark text on light background