Avatar > Add text, overlapping, and grid variations
Problem
Adds solutions for variations options when using avatars, such as including text alongside it, positioning avatars inline, and in a grid.
Solution
Avatars may also be adjacent to a text alternative, such as a user or project name. In these cases, a null
alt
text should be used so that they can be ignored by assistive technologies.Todo: Add avatar with text demo
Displaying multiple avatars
Some features require the display of multiple avatars, side by side.
Overlap
When space is tight, overlap avatars slightly. If there are too many for the space, use a badge to display the number of additional avatars as a placeholder.
Todo: Add overlap demo with badge count
Grid
When space allows, display avatars in grid.
Todo: Add grid demo
In areas where the avatar grid would expand multiple lines, provide an option to expand and collapse the additional avatars.
Todo: Add grid demo with expand/collapse
Example(s)
Related patterns
Badges
Pattern checklist
Make sure these are completed before closing the issue, with a link to the relevant commit, if applicable.
-
Read our contribution guidelines, especially the For GitLabbers section. -
Add your changes to the pattern library. When copying things over, watch out for duplicated symbols, layer styles, and text styles. Some of our recommended plugins can help you find and remove duplicates. -
QA of pattern library by the reviewer. -
Create an issue in the Design System to add the pattern documentation. Mark it as related to this issue. -
Add an agenda item to the next UX weekly call to inform everyone (if it's a new pattern, not yet used in the application).