Avatar component being used in the Back office
|
Component |
Usage |
User action |
|---|---|---|
|
Avatar |
An avatar acts as a proxy for a user or entity, that can be a user, but also an organization or a product. |
Avatars can be clickable, this action should give the user permission to re-upload the image |
Anatomy
Structure
|
1. avatar container |
|
avatar container |
Where the profile image is uploaded to (if the feature is available). If that feature is not available, then what should be shown is the user /organization acronym. e.g. CG (for Carlsberg Group).
If there is none of the above, the default image placeholder is the Users icon |
|
image upload indicator
|
For large and xlarge sizes (if the option of adding an image is available) the upload indicator shows up |
Sizes and Spaces
|
Use Avatars in the appropriate size for your need. On a dedicated profile page, maybe the xlarge version of the avatar is a good fit, but on a table of users, smaller sizes work better.
|
Properties
|
Property |
Value |
Description |
|---|---|---|
|
Container |
empty name image |
empty is when there is no data being provided. Neither a name nor an image. name display user/organization acronym. image the possibility to add an image to the avatar |
|
State |
default hover loading |
hover is only available, if there's the option of adding an image. loading state is available for edge case images. (e.g. an image with uncommon weight (MBs)) |
|
Size |
small medium large xlarge |
small and medium are a good option when there are many avatars on the same page/container (e.g. a list of users). These ones are NOT clickable.
large and xlarge work better when you have room to place your avatar, or it has its own page (e.g. a profile page) |
Behavior
Interaction
Avatar interaction on mouse hover
Guidelines
|
|
|
|