Avatar list - CSS Component

Browser support

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.

Playground

Customization

HTML Examples

Imports

<link rel="stylesheet" href="/0.4.0/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.4.0/@zurich/css-components/AvatarList.css" />
<link rel="stylesheet" href="/0.4.0/@zurich/css-components/Profile.css" />

Code

<div z-avatar-list>
  <div z-profile="m:2">
    AZ
  </div>
  <div z-profile="m:4">
    AZ
  </div><img z-profile src="../sample.png" alt="AZ" />
</div>