Design Pattern Library: Avatars
Problem
We currently do not have a documented set of sizes for avatars.
Solution
It was discussed in #193 (closed) to adopt circular avatars for users and rounded square avatars for projects and groups.
Example(s)
Current avatar sizes
Sizes | Example |
---|---|
24px | Issue/MR Sidebar - Participants |
32px | Issue/MR Sidebar - Assignees |
40px | Comments, Project list, Group list, etc. |
70px | Group overview page |
90px | User Profile Page |
Proposed sizes
Sizes | Name | Border radius for Project/Group Avatars |
---|---|---|
16px | XS | 2px |
24px | S | 4px |
32px | M | 4px |
64px | L | 8px |
96px | XL | 8px |
Usage
An avatar is a graphical representation of a user or the user's profile.
Dos and dont's
|
|
---|---|
Use the correct avatar size based on the need | Do not resize avatars or stray from the preset sizes |
Related patterns
(List any related or similar solutions. If none, write: No related patterns)
Links / references
Pattern checklist
Make sure these are completed before closing the issue, with a link to the relevant commit, if applicable.
-
Ensure that you have broken things down into atoms, molecules, and organisms. -
Check that you have not created a duplicate of an existing pattern. -
Ensure that you have used the proper method for creating the pattern depending on the complexity. Atoms and molecules are symbols, organisms are groups. -
Make sure that typography is using text styles. When applicable used shared styles for colors. -
QA check by another UXer -
Add changes to the pattern library -
Create an issue to add the pattern documentation to the Design System. Mark it as related to this issue. -
Add an agenda item to the next UX weekly call to inform everyone (if new pattern, not yet used in the application)
Edited by Jeethu Karthik