'/%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
Parameters are the attributes that can be used to customize the component when using it in a project. They apply to the WebComponents implementation and wrappers and to the Vue and React CSS implementations. Some parameters names change between the implementations, in order to follow the conventions of each technology and framework.
For example, the param model is named ngModel in Angular, modelValue in Vue, but stays as model in React.
By default, all the parameters are optional or can be set in different, except for the ones marked as required
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
...