avatar-group

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" />

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">

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>

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>

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" />

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" />

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" />

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" />

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" />

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">

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">

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">

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">

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>

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>

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>

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>