An avatar group is an element that communicates to the user that there is more than 1 person associated to an item.

About Avatar Group#

The Avatar Group contains two Avatar components with modifying classes. Both Avatars in the group get slds-avatar-grouped applied to them. Then, slds-avatar-grouped__primary is applied to the first Avatar and slds-avatar-grouped__secondary on the second. Avatars of the image variety are preferred within an Avatar Group.

Design Guidelines
Avatar Groups should only be used to represent people and NOT groups of salesforce objects.

Base#

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

With Icon#

Icon Avatars can be put into a group. In this case, on the slds-icon_container apply the slds-avatar-grouped__icon class.

Description of icon when neededDescription of icon when needed

<span class="slds-avatar-group">
  <span class="slds-avatar slds-avatar-grouped slds-avatar-grouped__primary">
    <span class="slds-icon_container slds-icon-standard-user slds-avatar-grouped__icon" title="Description of icon when needed">
      <svg class="slds-icon" aria-hidden="true">

With User Initials#

User Initials Avatars can be put into a group. In this case, on the <abbr> apply the slds-avatar-grouped__initials class.

WWWW

<span class="slds-avatar-group">
  <span class="slds-avatar slds-avatar-grouped slds-avatar-grouped__primary">
    <abbr class="slds-avatar__initials slds-avatar-grouped__initials" title="Person name">WW</abbr>
  </span>

Inversed#

Inversed User Initials Avatars can also be used in a group when on a dark background. To achieve the lighter background for the Avatar, additionally apply the slds-avatar-grouped_inverse class along with the slds-avatar-grouped class.

WWWW

<span class="slds-avatar-group">
  <span class="slds-avatar slds-avatar-grouped slds-avatar-grouped__primary slds-avatar-grouped_inverse">
    <abbr class="slds-avatar__initials slds-avatar__initials_inverse slds-avatar-grouped__initials" title="Person name">WW</abbr>
  </span>

With Mixed Avatar types#

Avatars of type image, icon, or initials can be used in combination with each other in a group.

Description of icon when neededDescription of icon when neededWWWW

<span class="slds-avatar-group">
  <span class="slds-avatar slds-avatar-grouped slds-avatar-grouped__primary">
    <img alt="Person 1 name" src="/assets/images/avatar1.jpg" title="Person 1 name" />
  </span>

Sizes#

Avatar Groups come in 4 different sizes: x-small, small, medium, and large by applying a slds-avatar-group_{size} modifier class on slds-avatar-group. If the size modifier class is not used, medium is also the default size.

With Images#

X-Small

<span class="slds-avatar-group slds-avatar-group_x-small">
  <span class="slds-avatar slds-avatar-grouped slds-avatar-grouped__primary">
    <img alt="Person 2 name" src="/assets/images/avatar2.jpg" title="Person 2 name" />
  </span>
  <span class="slds-avatar slds-avatar-grouped slds-avatar-grouped__secondary">
    <img alt="Person 2 name" src="/assets/images/avatar2.jpg" title="Person 2 name" />
  </span>
</span>

Small

<span class="slds-avatar-group slds-avatar-group_small">
  <span class="slds-avatar slds-avatar-grouped slds-avatar-grouped__primary">
    <img alt="Person 2 name" src="/assets/images/avatar2.jpg" title="Person 2 name" />
  </span>
  <span class="slds-avatar slds-avatar-grouped slds-avatar-grouped__secondary">
    <img alt="Person 2 name" src="/assets/images/avatar2.jpg" title="Person 2 name" />
  </span>
</span>

Medium

<span class="slds-avatar-group slds-avatar-group_medium">
  <span class="slds-avatar slds-avatar-grouped slds-avatar-grouped__primary">
    <img alt="Person 2 name" src="/assets/images/avatar2.jpg" title="Person 2 name" />
  </span>
  <span class="slds-avatar slds-avatar-grouped slds-avatar-grouped__secondary">
    <img alt="Person 2 name" src="/assets/images/avatar2.jpg" title="Person 2 name" />
  </span>
</span>

Large

<span class="slds-avatar-group slds-avatar-group_large">
  <span class="slds-avatar slds-avatar-grouped slds-avatar-grouped__primary">
    <img alt="Person 2 name" src="/assets/images/avatar2.jpg" title="Person 2 name" />
  </span>
  <span class="slds-avatar slds-avatar-grouped slds-avatar-grouped__secondary">
    <img alt="Person 2 name" src="/assets/images/avatar2.jpg" title="Person 2 name" />
  </span>
</span>

With Icons#

X-Small

Description of icon when neededDescription of icon when needed

<span class="slds-avatar-group slds-avatar-group_x-small">
  <span class="slds-avatar slds-avatar-grouped slds-avatar-grouped__primary">
    <span class="slds-icon_container slds-icon-standard-user slds-avatar-grouped__icon" title="Description of icon when needed">
      <svg class="slds-icon" aria-hidden="true">
        <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#user"></use>
      </svg>
      <span class="slds-assistive-text">Description of icon when needed</span>
    </span>
  </span>
  <span class="slds-avatar slds-avatar-grouped slds-avatar-grouped__secondary">
    <span class="slds-icon_container slds-icon-standard-user slds-avatar-grouped__icon" title="Description of icon when needed">
      <svg class="slds-icon" aria-hidden="true">
        <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#user"></use>
      </svg>
      <span class="slds-assistive-text">Description of icon when needed</span>
    </span>
  </span>
</span>

Small

Description of icon when neededDescription of icon when needed

<span class="slds-avatar-group slds-avatar-group_small">
  <span class="slds-avatar slds-avatar-grouped slds-avatar-grouped__primary">
    <span class="slds-icon_container slds-icon-standard-user slds-avatar-grouped__icon" title="Description of icon when needed">
      <svg class="slds-icon" aria-hidden="true">
        <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#user"></use>
      </svg>
      <span class="slds-assistive-text">Description of icon when needed</span>
    </span>
  </span>
  <span class="slds-avatar slds-avatar-grouped slds-avatar-grouped__secondary">
    <span class="slds-icon_container slds-icon-standard-user slds-avatar-grouped__icon" title="Description of icon when needed">
      <svg class="slds-icon" aria-hidden="true">
        <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#user"></use>
      </svg>
      <span class="slds-assistive-text">Description of icon when needed</span>
    </span>
  </span>
</span>

Medium

Description of icon when neededDescription of icon when needed

<span class="slds-avatar-group slds-avatar-group_medium">
  <span class="slds-avatar slds-avatar-grouped slds-avatar-grouped__primary">
    <span class="slds-icon_container slds-icon-standard-user slds-avatar-grouped__icon" title="Description of icon when needed">
      <svg class="slds-icon" aria-hidden="true">
        <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#user"></use>
      </svg>
      <span class="slds-assistive-text">Description of icon when needed</span>
    </span>
  </span>
  <span class="slds-avatar slds-avatar-grouped slds-avatar-grouped__secondary">
    <span class="slds-icon_container slds-icon-standard-user slds-avatar-grouped__icon" title="Description of icon when needed">
      <svg class="slds-icon" aria-hidden="true">
        <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#user"></use>
      </svg>
      <span class="slds-assistive-text">Description of icon when needed</span>
    </span>
  </span>
</span>

Large

Description of icon when neededDescription of icon when needed

<span class="slds-avatar-group slds-avatar-group_large">
  <span class="slds-avatar slds-avatar-grouped slds-avatar-grouped__primary">
    <span class="slds-icon_container slds-icon-standard-user slds-avatar-grouped__icon" title="Description of icon when needed">
      <svg class="slds-icon" aria-hidden="true">
        <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#user"></use>
      </svg>
      <span class="slds-assistive-text">Description of icon when needed</span>
    </span>
  </span>
  <span class="slds-avatar slds-avatar-grouped slds-avatar-grouped__secondary">
    <span class="slds-icon_container slds-icon-standard-user slds-avatar-grouped__icon" title="Description of icon when needed">
      <svg class="slds-icon" aria-hidden="true">
        <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#user"></use>
      </svg>
      <span class="slds-assistive-text">Description of icon when needed</span>
    </span>
  </span>
</span>

With User Initials#

X-Small

WWWW

<span class="slds-avatar-group slds-avatar-group_x-small">
  <span class="slds-avatar slds-avatar-grouped slds-avatar-grouped__primary">
    <abbr class="slds-avatar__initials slds-avatar-grouped__initials" title="Person name">WW</abbr>
  </span>
  <span class="slds-avatar slds-avatar-grouped slds-avatar-grouped__secondary">
    <abbr class="slds-avatar__initials slds-avatar-grouped__initials" title="Person name">WW</abbr>
  </span>
</span>

Small

WWWW

<span class="slds-avatar-group slds-avatar-group_small">
  <span class="slds-avatar slds-avatar-grouped slds-avatar-grouped__primary">
    <abbr class="slds-avatar__initials slds-avatar-grouped__initials" title="Person name">WW</abbr>
  </span>
  <span class="slds-avatar slds-avatar-grouped slds-avatar-grouped__secondary">
    <abbr class="slds-avatar__initials slds-avatar-grouped__initials" title="Person name">WW</abbr>
  </span>
</span>

Medium

WWWW

<span class="slds-avatar-group slds-avatar-group_medium">
  <span class="slds-avatar slds-avatar-grouped slds-avatar-grouped__primary">
    <abbr class="slds-avatar__initials slds-avatar-grouped__initials" title="Person name">WW</abbr>
  </span>
  <span class="slds-avatar slds-avatar-grouped slds-avatar-grouped__secondary">
    <abbr class="slds-avatar__initials slds-avatar-grouped__initials" title="Person name">WW</abbr>
  </span>
</span>

Large

WWWW

<span class="slds-avatar-group slds-avatar-group_large">
  <span class="slds-avatar slds-avatar-grouped slds-avatar-grouped__primary">
    <abbr class="slds-avatar__initials slds-avatar-grouped__initials" title="Person name">WW</abbr>
  </span>
  <span class="slds-avatar slds-avatar-grouped slds-avatar-grouped__secondary">
    <abbr class="slds-avatar__initials slds-avatar-grouped__initials" title="Person name">WW</abbr>
  </span>
</span>

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-group`
Summary	Creates an Avatar Group
Support	dev-ready
Restrict	`div, span`
Variant	True

Selector	`.slds-avatar-grouped`
Summary	Variant of an Avatar in an Avatar Group
Restrict	`.slds-avatar-group span`
Variant	True

Selector	`.slds-avatar-grouped_inverse`
Summary	Variant of an Avatar with inverse background in an Avatar Group
Restrict	`.slds-avatar-grouped`
Modifier	True

Selector	`.slds-avatar-grouped__primary`
Summary	Modifier for the primary Avatar in an Avatar Group
Restrict	`.slds-avatar-grouped`
Modifier	True

Selector	`.slds-avatar-grouped__initials`
Summary	Modifier for the Avatar that contains User Initials in an Avatar Group
Restrict	`.slds-avatar-grouped`
Modifier	True

Selector	`.slds-avatar-grouped__secondary`
Summary	Modifier for the secondary Avatar in an Avatar Group
Restrict	`.slds-avatar-grouped`
Modifier	True

Selector	`.slds-avatar-group_x-small`
Summary	Creates an extra small Avatar Group
Restrict	`.slds-avatar-group`
Modifier	True

Selector	`.slds-avatar-group_small`
Summary	Creates a small Avatar Group
Restrict	`.slds-avatar-group`
Modifier	True

Selector	`.slds-avatar-group_medium`
Summary	Creates a medium Avatar Group
Restrict	`.slds-avatar-group`
Modifier	True

Selector	`.slds-avatar-group_large`
Summary	Creates a large Avatar Group
Restrict	`.slds-avatar-group`
Modifier	True

Avatar Group Release Notes

2.8.0

Added

Added a new blueprint and docs for Avatar Group component that is used for communicating to users that more than one person is associated with an item.

Sections

About Avatar Group#

Design Guidelines

Base#

With Icon#

With User Initials#

Inversed#

With Mixed Avatar types#

Sizes#

With Images#

With Icons#

With User Initials#

Overview of CSS Classes#

What are these categories?

Avatar Group Release Notes

2.8.0

Added