Is documented
The component is fully documented
Initials avatars are used as a fallback for people when no images are available.
These avatars are randomly assigned one of the following primary or secondary background colors
Image avatars are used for people who have uploaded a profile image.
Stacks can be used when multiple users have interacted with a particular resource or item. Large avatar stacks can be used in places like page headings, where the small stacks should be used within tables or inline content.
The stroke of the avatar stack should be inherited from the background of the parent container it sits in. For instance, a stack of avatars placed in a gray table row should use a gray stroke, and the white stroke variant for a white table row.
Avatars come in multiple sizes: 24px, 32px, 40px and 64px.
Default to the larger size, but use the smaller size when you need to de-emphasize the content.
Whenever you have need to display a member's name (e.g., as the person who last updated a document, or who created a document), consider replacing it with, or prepending it with an accompanying avatar. This personalizes the experience, and emphasizes the collaborative aspects of Iterable.
Is documented
The component is fully documented
Accessibile
Tested against WCAG 2.1 AAA accessibility guidelines
Tokens
This component uses tokens in both Figma and code
Figma component
Includes a link to a Figma component that has been imported to Supernova
Storybook
Includes a link to an external code repository
Status
The component has a health status indicated
Is documented
The component is fully documented
Accessibile
Tested against WCAG 2.1 AAA accessibility guidelines
Tokens
This component uses tokens in both Figma and code
Figma component
Includes a link to a Figma component that has been imported to Supernova
Storybook
Includes a link to an external code repository
Status
The component has a health status indicated