Avatar list ​

...

Browser support ​

...

Parameters ​

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

The parametrization of the component can be done with the following custom HTML params:

NameTypeDescription
z-avatar-liststringCustom attribute for the avatar list component

INFO

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

Playground ​

Customization ​

HTML Examples ​

Imports
html
<link rel="stylesheet" href="/0.3.6/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.3.6/@zurich/css-components/AvatarList.css" />
<link rel="stylesheet" href="/0.3.6/@zurich/css-components/Profile.css" />
Code
html
<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>