Avatars
Avatars are very flexible graphical symbols that can be used in many situations
Usage
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.
Styles
Beeline utilizes a preset selection of paired colors that work with our existing color palette.
Sizes
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.
Examples
Avatars are a very versatile UI element. Here are some examples and explanation of how they can be used
Cards
Avatars can be used to add context to a card
Top Candidates
Bill Lowry
Jackosnville FL, 322224
Karen Row
St. Augustine FL, 32080
Joe Walsh
Jacksonville FL, 32225
List Widgets
Avatars can be used to add context to list items. This can include icons, headshots, or initials
Mobile Actions
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.
As Initials
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.
Dashboard Widgets
Here we see avatars being use as status indicators, as well as, stat counters for our stat charts.