'/%3e%3cellipse%20rx='11'%20ry='4.2'%20transform='rotate(120)'/%3e%3c/g%3e%3c/svg%3e "React")
Skip to content 
PC CSS Components Web Components '%20d='M61.1%2031.4H141L123.4.7H78.7zm53.7%2031.9H159l-15.9-26.8H98.8'%20opacity='.9'/%3e%3cpath%20fill='url(%23b)'%20d='M141.3%20100.3H61l17.6%2030.5h45zm-26.5-31.9H159l-15.9%2026.8H98.8'%20opacity='.9'/%3e%3cpath%20fill='%23010101'%20d='M78.6%20130.8%2041%2065.8%2079.1.8H37.9L.4%2065.8l37.5%2065z'/%3e%3c/g%3e%3c/svg%3e "Vanilla")
Avatar list
Avatar lists are groups of more than one avatar (e.g. to show a group of people pertaining to the same team).
An avatar list is made up of several Profile components; read the specification in the Profile page to learn more about it.
UX/UI Guidelines
Check the design documentation of the component in ZeroHeight.
Implementations
The component AvatarList is available in the following technologies:
Parameters
Parameters
Make sure you have read about the parameters in here.
The parametrization of the component can be done with the following custom params or properties:
| Name | Type | Slot | Description |
|---|---|---|---|
profiles | Object[] | The profiles to display | |
custom | object | A record of key-value pairs to set the CSS custom tokens. It's a complex attribute set as an JS object in stringified JSON format. Example: html Check the available values in the customization section. | |
custom-str | string | The stringified version of the Example: html | |
z-theme | string | Sets the theme of the component. The possible values are html |
From Figma to code
You can check the Figma implementation here. This are the available properties:
- Size
select - Items
select
Customization
INFO
Check everything about the customization mechanics in the "How it works" documentation.
| CSS Variable | Type | Description |
|---|---|---|
--z-avatar-list--bg-1 | color | Background color for the first avatar |
--z-avatar-list--bg-2 | color | Background color for the second avatar |
--z-avatar-list--bg-3 | color | Background color for the third avatar |
--z-avatar-list--bg-4 | color | Background color for the fourth avatar |
--z-avatar-list--bg-5 | color | Background color for the fifth avatar |
Each background color of the avatar in the list can be customized by using the CSS custom token --z-avatar-list--bg-1 to a maximum of 5 with --z-avatar-list--bg-5
Accessibility
...