Avatar list - CSS Component ​

The AvatarList component can be used imported from:

Playground ​

Construction ​

The CSS component uses a <div> tag with the z-avatar-list HTML custom attribute.

z-avatar-list ​

The z-avatar-list parameter is the main parameter used to render the avatar list component.

Overflow ​

You can insert as many entries as you want, but we recommend a maximum of 5. If you insert more than 5 entries, we recommend to add (+xx) to the last entry. Check the guidelines here;

+2

INFO

Make sure you use the Profile component for each avatar inside the z-avatar-list component.

Browser support ​

Detected engine:  

  • Chromium

  • Webkit

  • Gecko

HTML Examples ​

CodeSandbox example ​