Design
Component checklist
Up to date
React
Up to date
Variants
User profile
For the user profile, there are two naming options: using the user's name or email.
There is an option to choose between an image, initials, or without an image, depending on the situation in which you want to use it. Use the initials avatar when the user hasn't uploaded an image in the Emplifi settings. Use the empty avatar when the account in other tools doesn't have an image filled in the profile settings.
Depending on the context, you have the option to include additional details or not
Social profile
Soul differentiates three tag variants used in social profile info avatars: regular, narrow, and short. Usage depends on the context. The recommended tag variant is regular. If there is limited space, use short. In tables, use narrow.
In case social profile social profilehas dedicated color, use a colored indicator to promote it.
User group
Depending on the context, you have the option to include additional details or not
Sizes
The labeled avatar size depends on the context. The recommended sizes are medium and small, and they should be used in most of cases. However, when there is limited space, Soul allows to use the tiny or micro size. For a spacious interface, consider using the large size.
