An avatar component represents an object or entity
An image is the preferred format for an 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
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
- The CSS class being referred to.
- A description of what the class does.
- Whether the class name is dev-ready (meaning it's fully vetted and tested and safe to use) or prototype (which means it's not fully vetted yet).
- The selector that the class name is allowed to be used on.
- The base level pattern for a component. A variant can be extended to create another variant of that component, for example, a stateful button is a derivative of the base button.
- A single class that can be added to an HTML element of a component to modify its output. Typically these will be colors, sizing and positioning.