Styling of user, project and group avatars
Currently, all avatars in GitLab use a circular mask. In gitlab-design#193 (closed), a proposal was made to adopt a circular mask for people (users) and rounded square mask for content (projects and groups). This design pattern will be added to our design system https://gitlab.com/gitlab-org/design.gitlab.com/issues/129.
This will help distinguish different entities when they are displayed in the same context. For example, the mentions dropdown in the comment form displays both groups and users in the same list.
Designs
Sizes | Name | Border radius for Project/Group Avatars |
---|---|---|
16px | XS | 2px |
24px | S | 4px |
32px | M | 4px |
64px | L | 8px |
96px | XL | 8px |
- Avatars of project and group are identical – they both have a rounded square mask.
- The above table shows valid avatar sizes, their name and the appropriate border radius.
- All avatars should have a solid border of
1px
width and colorrgba(0,0,0,0.1)
.