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:
Name | Type | Description |
---|---|---|
profiles | Object[] | 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.0/@zurich/web-components/styles.css" />
<script type="module" src="/0.5.0/@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>