Avatar
- HTML/CSS:Dev Ready
- Layout:Responsive
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
- The CSS class being referred to.
- Summary
- A description of what the class does.
- Support
- 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).
- Restrict
- The selector that the class name is allowed to be used on.
- Variant
- 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.
- Modifier
- 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.
| Selector | .slds-avatar |
|---|---|
| Summary | Creates an avatar component |
| Support | dev-ready |
| 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 |
| Support | dev-ready |
| Restrict | .slds-avatar abbr |
| Variant | True |
| Selector | .slds-avatar-grouped__initials |
|---|---|
| Summary | Modifier for the initials Avatar in an Avatar Group |
| Restrict | .slds-avatar__initials |
| Modifier | True |
| Selector | .slds-avatar__initials_inverse |
|---|---|
| Summary | Used for initials that are dark text on light background |
| Restrict | .slds-avatar__initials |
| Modifier | True |