Avatar list - CSS Component
Browser support
Detected engine:
Chromium
Webkit
Gecko
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
html
<link rel="stylesheet" href="/0.5.0/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.5.0/@zurich/css-components/AvatarList.css" />
<link rel="stylesheet" href="/0.5.0/@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.webp" alt="AZ" />
</div>