Design Pattern Library: Avatars
We currently do not have a documented set of sizes for avatars.
It was discussed in #193 (closed) to adopt circular avatars for users and rounded square avatars for projects and groups.
Current avatar sizes
|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|
|Sizes||Name||Border radius for Project/Group Avatars|
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|
(List any related or similar solutions. If none, write: No related patterns)
Links / references
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)