Avatar list - Web Component ​

Browser support ​

Detected engine:  

  • Chromium

  • Webkit

  • Gecko

Parameters ​

The Web component uses the <z-avatar-list> tag:

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

NameTypeDescriptionSlot
profilesObject[]The profiles to display

profiles ​

The profiles attribute is used to set the list of profiles to be displayed. Each object in the list should have the following properties: initials, color and image-src if we want to insert an image.

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;

Playground ​

Customization ​

HTML Examples ​

Imports
html
<link rel="stylesheet" href="/0.5.3/@zurich/web-components/styles.css" />
<script type="module" src="/0.5.3/@zurich/web-components/avatar-list.js"></script>
Code
html
<z-avatar-list
  profiles='[{ "initials": "AZ", "color": 2 },{ "initials": "AZ", "color": 4},{ "initial": "AZ", "color": 3, "image-src": "../sample.webp" }]'>
</z-avatar-list>