Avatar Group

<afp-avatar-group>

stable

This component uses the light DOM, so its markup and styles are part of the regular document flow.

An avatar group component to display multiple avatars together.

<afp-avatar-group>
  <afp-avatar></afp-avatar>
  <afp-avatar></afp-avatar>
  <afp-avatar></afp-avatar>
</afp-avatar-group>

<afp-avatar-group>
  <afp-avatar></afp-avatar>
  <afp-avatar></afp-avatar>
  <afp-avatar></afp-avatar>
</afp-avatar-group>

<AfpAvatarGroup>
  <AfpAvatar></AfpAvatar>
  <AfpAvatar></AfpAvatar>
  <AfpAvatar></AfpAvatar>
</AfpAvatarGroup>

<AfpAvatarGroup>
  <AfpAvatar></AfpAvatar>
  <AfpAvatar></AfpAvatar>
  <AfpAvatar></AfpAvatar>
</AfpAvatarGroup>

Examples #

Basic #

Display a group of avatars.

<afp-avatar-group>
  <afp-avatar image="https://picsum.photos/100"></afp-avatar>
  <afp-avatar image="https://picsum.photos/200"></afp-avatar>
  <afp-avatar image="https://picsum.photos/300"></afp-avatar>
  <afp-avatar image="https://picsum.photos/400"></afp-avatar>
  <afp-avatar image="https://picsum.photos/500"></afp-avatar>
  <afp-avatar image="https://picsum.photos/600"></afp-avatar>
</afp-avatar-group>

<afp-avatar-group>
  <afp-avatar [image]="'https://picsum.photos/100'"></afp-avatar>
  <afp-avatar [image]="'https://picsum.photos/200'"></afp-avatar>
  <afp-avatar [image]="'https://picsum.photos/300'"></afp-avatar>
  <afp-avatar [image]="'https://picsum.photos/400'"></afp-avatar>
  <afp-avatar [image]="'https://picsum.photos/500'"></afp-avatar>
  <afp-avatar [image]="'https://picsum.photos/600'"></afp-avatar>
</afp-avatar-group>

<AfpAvatarGroup>
  <AfpAvatar image="https://picsum.photos/100"></AfpAvatar>
  <AfpAvatar image="https://picsum.photos/200"></AfpAvatar>
  <AfpAvatar image="https://picsum.photos/300"></AfpAvatar>
  <AfpAvatar image="https://picsum.photos/400"></AfpAvatar>
  <AfpAvatar image="https://picsum.photos/500"></AfpAvatar>
  <AfpAvatar image="https://picsum.photos/600"></AfpAvatar>
</AfpAvatarGroup>

<AfpAvatarGroup>
  <AfpAvatar :image="'https://picsum.photos/100'"></AfpAvatar>
  <AfpAvatar :image="'https://picsum.photos/200'"></AfpAvatar>
  <AfpAvatar :image="'https://picsum.photos/300'"></AfpAvatar>
  <AfpAvatar :image="'https://picsum.photos/400'"></AfpAvatar>
  <AfpAvatar :image="'https://picsum.photos/500'"></AfpAvatar>
  <AfpAvatar :image="'https://picsum.photos/600'"></AfpAvatar>
</AfpAvatarGroup>

Sizes #

Set the size attribute on the <avatar-group> to apply it to all child avatars.

<div class="afp-stack">
  <div class="afp-cluster afp-align-center">
    <afp-avatar-group size="small">
      <afp-avatar></afp-avatar>
      <afp-avatar></afp-avatar>
      <afp-avatar></afp-avatar>
    </afp-avatar-group>
  </div>
  <div class="afp-cluster afp-align-center">
    <afp-avatar-group size="medium">
      <afp-avatar></afp-avatar>
      <afp-avatar></afp-avatar>
      <afp-avatar></afp-avatar>
    </afp-avatar-group>
  </div>
  <div class="afp-cluster afp-align-center">
    <afp-avatar-group size="large">
      <afp-avatar></afp-avatar>
      <afp-avatar></afp-avatar>
      <afp-avatar></afp-avatar>
    </afp-avatar-group>
  </div>
</div>

<div class="afp-stack">
  <div class="afp-cluster afp-align-center">
    <afp-avatar-group [size]="'small'">
      <afp-avatar></afp-avatar>
      <afp-avatar></afp-avatar>
      <afp-avatar></afp-avatar>
    </afp-avatar-group>
  </div>
  <div class="afp-cluster afp-align-center">
    <afp-avatar-group [size]="'medium'">
      <afp-avatar></afp-avatar>
      <afp-avatar></afp-avatar>
      <afp-avatar></afp-avatar>
    </afp-avatar-group>
  </div>
  <div class="afp-cluster afp-align-center">
    <afp-avatar-group [size]="'large'">
      <afp-avatar></afp-avatar>
      <afp-avatar></afp-avatar>
      <afp-avatar></afp-avatar>
    </afp-avatar-group>
  </div>
</div>

<div class="afp-stack">
  <div class="afp-cluster afp-align-center">
    <AfpAvatarGroup size="small">
      <AfpAvatar></AfpAvatar>
      <AfpAvatar></AfpAvatar>
      <AfpAvatar></AfpAvatar>
    </AfpAvatarGroup>
  </div>
  <div class="afp-cluster afp-align-center">
    <AfpAvatarGroup size="medium">
      <AfpAvatar></AfpAvatar>
      <AfpAvatar></AfpAvatar>
      <AfpAvatar></AfpAvatar>
    </AfpAvatarGroup>
  </div>
  <div class="afp-cluster afp-align-center">
    <AfpAvatarGroup size="large">
      <AfpAvatar></AfpAvatar>
      <AfpAvatar></AfpAvatar>
      <AfpAvatar></AfpAvatar>
    </AfpAvatarGroup>
  </div>
</div>

<div class="afp-stack">
  <div class="afp-cluster afp-align-center">
    <AfpAvatarGroup :size="'small'">
      <AfpAvatar></AfpAvatar>
      <AfpAvatar></AfpAvatar>
      <AfpAvatar></AfpAvatar>
    </AfpAvatarGroup>
  </div>
  <div class="afp-cluster afp-align-center">
    <AfpAvatarGroup :size="'medium'">
      <AfpAvatar></AfpAvatar>
      <AfpAvatar></AfpAvatar>
      <AfpAvatar></AfpAvatar>
    </AfpAvatarGroup>
  </div>
  <div class="afp-cluster afp-align-center">
    <AfpAvatarGroup :size="'large'">
      <AfpAvatar></AfpAvatar>
      <AfpAvatar></AfpAvatar>
      <AfpAvatar></AfpAvatar>
    </AfpAvatarGroup>
  </div>
</div>

Spacing #

Adjust the space between avatars by setting the --afp-avatar-group-space CSS variable.

<afp-avatar-group style="--afp-avatar-group-space: 0; --afp-avatar-border-width: 0">
  <afp-avatar></afp-avatar>
  <afp-avatar></afp-avatar>
  <afp-avatar></afp-avatar>
</afp-avatar-group>

<afp-avatar-group [style]="'--afp-avatar-group-space: 0; --afp-avatar-border-width: 0'">
  <afp-avatar></afp-avatar>
  <afp-avatar></afp-avatar>
  <afp-avatar></afp-avatar>
</afp-avatar-group>

<AfpAvatarGroup style="--afp-avatar-group-space: 0; --afp-avatar-border-width: 0">
  <AfpAvatar></AfpAvatar>
  <AfpAvatar></AfpAvatar>
  <AfpAvatar></AfpAvatar>
</AfpAvatarGroup>

<AfpAvatarGroup :style="'--afp-avatar-group-space: 0; --afp-avatar-border-width: 0'">
  <AfpAvatar></AfpAvatar>
  <AfpAvatar></AfpAvatar>
  <AfpAvatar></AfpAvatar>
</AfpAvatarGroup>

Border #

Change the border to all avatars in a group by setting the --afp-avatar-border-color and --afp-avatar-border-width CSS variables.

<afp-avatar-group style="--afp-avatar-border-color: red; --afp-avatar-border-width: 3px">
  <afp-avatar></afp-avatar>
  <afp-avatar></afp-avatar>
  <afp-avatar></afp-avatar>
</afp-avatar-group>

<afp-avatar-group [style]="'--afp-avatar-border-color: red; --afp-avatar-border-width: 3px'">
  <afp-avatar></afp-avatar>
  <afp-avatar></afp-avatar>
  <afp-avatar></afp-avatar>
</afp-avatar-group>

<AfpAvatarGroup style="--afp-avatar-border-color: red; --afp-avatar-border-width: 3px">
  <AfpAvatar></AfpAvatar>
  <AfpAvatar></AfpAvatar>
  <AfpAvatar></AfpAvatar>
</AfpAvatarGroup>

<AfpAvatarGroup :style="'--afp-avatar-border-color: red; --afp-avatar-border-width: 3px'">
  <AfpAvatar></AfpAvatar>
  <AfpAvatar></AfpAvatar>
  <AfpAvatar></AfpAvatar>
</AfpAvatarGroup>

With Max and Badge #

Limit the number of visible avatars by setting the max attribute. A badge will show the number of additional avatars not displayed.

<afp-avatar-group max="3">
  <afp-avatar></afp-avatar>
  <afp-avatar></afp-avatar>
  <afp-avatar></afp-avatar>
  <afp-avatar></afp-avatar>
  <afp-avatar></afp-avatar>
  <afp-avatar></afp-avatar>
</afp-avatar-group>

<afp-avatar-group [max]=3>
  <afp-avatar></afp-avatar>
  <afp-avatar></afp-avatar>
  <afp-avatar></afp-avatar>
  <afp-avatar></afp-avatar>
  <afp-avatar></afp-avatar>
  <afp-avatar></afp-avatar>
</afp-avatar-group>

<AfpAvatarGroup max="3">
  <AfpAvatar></AfpAvatar>
  <AfpAvatar></AfpAvatar>
  <AfpAvatar></AfpAvatar>
  <AfpAvatar></AfpAvatar>
  <AfpAvatar></AfpAvatar>
  <AfpAvatar></AfpAvatar>
</AfpAvatarGroup>

<AfpAvatarGroup :max=3>
  <AfpAvatar></AfpAvatar>
  <AfpAvatar></AfpAvatar>
  <AfpAvatar></AfpAvatar>
  <AfpAvatar></AfpAvatar>
  <AfpAvatar></AfpAvatar>
  <AfpAvatar></AfpAvatar>
</AfpAvatarGroup>

Disabled #

Disable all avatars in a group by adding the disabled attribute to the <afp-avatar-group>

<afp-avatar-group disabled>
  <afp-avatar image="https://picsum.photos/100"></afp-avatar>
  <afp-avatar image="https://picsum.photos/200"></afp-avatar>
  <afp-avatar image="https://picsum.photos/300"></afp-avatar>
  <afp-avatar image="https://picsum.photos/301"></afp-avatar>
</afp-avatar-group>

<afp-avatar-group disabled>
  <afp-avatar [image]="'https://picsum.photos/100'"></afp-avatar>
  <afp-avatar [image]="'https://picsum.photos/200'"></afp-avatar>
  <afp-avatar [image]="'https://picsum.photos/300'"></afp-avatar>
  <afp-avatar [image]="'https://picsum.photos/301'"></afp-avatar>
</afp-avatar-group>

<AfpAvatarGroup disabled>
  <AfpAvatar image="https://picsum.photos/100"></AfpAvatar>
  <AfpAvatar image="https://picsum.photos/200"></AfpAvatar>
  <AfpAvatar image="https://picsum.photos/300"></AfpAvatar>
  <AfpAvatar image="https://picsum.photos/301"></AfpAvatar>
</AfpAvatarGroup>

<AfpAvatarGroup disabled>
  <AfpAvatar :image="'https://picsum.photos/100'"></AfpAvatar>
  <AfpAvatar :image="'https://picsum.photos/200'"></AfpAvatar>
  <AfpAvatar :image="'https://picsum.photos/300'"></AfpAvatar>
  <AfpAvatar :image="'https://picsum.photos/301'"></AfpAvatar>
</AfpAvatarGroup>

Properties

Learn more about properties.

Name Description Reflects

size

size of the avatar group

Type

AfpSize

Name	Description
`SMALL`	Small size with compact dimensions.
`MEDIUM`	Medium size with standard dimensions.
`LARGE`	Large size with expanded dimensions.

AfpSize

Default AfpSize.MEDIUM

max

Maximum number of avatars to display. Additional avatars are hidden.

Type number

disabled

Disabled property of avatar.

Type boolean

Slots

Learn more about slots.

Name	Description
`default`	The default slot for avatar elements.

Internationalization

Learn more about internationalization.

Key	Description
`avatar-group.aria-label`	The default `aria-label` text for Avatar Group
`avatar-group.count-text`	The default text for the hidden avatar count

CSS Parts

Learn more about CSS Parts.

Name	Description	Selector
`base`	The avatar group container wrapper.	`::part(base)`
`count`	The element that displays the hidden avatar count.	`::part(count)`

CSS Custom Properties

Name	Description	Default
`--afp-avatar-group-space`	The space between avatars in the group.	`0.3`

Dependencies

The component automatically brings in the listed items, including any nested dependencies that may exist.

afp-avatar

Importing

Using the bundle is the recommended method to include components. If you’d rather handle imports manually, you can use the code examples below.

import '@afp-design-system/core/dist/components/avatar-group/avatar-group.js';