Avatars are very flexible graphical symbols that can be used in many situations
Avatars are used in many components to provide the user a supported connection to content being reviewed. They provide a tangible icon representation of a entity. Or a personal headline of a contact.
Depending on what information is available from the target, the use of initial(s) provide a good way of supportive identification and emphasis. Images and logos can also be implemented within our avatars.
Beeline utilizes a preset selection of paired colors that work with our existing color palette.
For consistency, avatar sizes are limited to 3 sizes (32px, 48px, and 64px). Having these components fixed will keep all of our components uniform across every product. In mobile applications, we suggest using a 32px sized avatar.
Avatars are a very versatile UI element. Here are some examples and explanation of how they can be used
Selected readings and examples to show you how to get the most out of your VMS
Avatars can be used to add context to a card
Jackosnville FL, 322224
St. Augustine FL, 32080
Jacksonville FL, 32225
Avatars can be used to add context to list items. This can include icons, headshots, or initials
Avatars on mobile can be used to add visual context to clickable items.
Mobile Status Icons
Avatars can be used to show status icons to add additional visual context.
When an icon or image doesn't fit, avatars can be applied using initials. Here we show an example of our Agent chat experience and we see initals being used to indicate which user is related to which chat bubble.
Here we see avatars being use as status indicators, as well as, stat counters for our stat charts.