Avatars

Avatars

Avatars are small visual cues highlighting a user, group, file type, channel, or case type. Avatars are always at the beginning of a string of text or list item. In some cases, they may be customized to provide further personalization.


User Avatars

Overview

User avatars highlight individuals associated with specific content.

User avatar examples

Patterns and usage

  • Use user avatars whenever the content is highly personal (such as in conversations in Pulse) or if the user is critical to case information (such as Last updated data)
  • Non-customized user avatars display the first letter of the user's first name / given name and the first initial of the last name / family name
  • Very small renderings of the non-customized user avatars will display on the first letter of the first name
  • People-type avatars, such as User, are always presented in a circle


Group Avatars

Overview

Group avatars show a unique brand or collection of users associated with the current group or action.

Group avatar examples

Patterns and usage

  • Use group avatars whenever displaying a team, organization, or many contributors
  • Non-customized Group avatars should show only a single user when rendered very small


Channel Avatars

Overview

Channel avatars highlight the unique interaction paths a user is submitting feedback through. Examples include comments via Twitter or responses via email.

Channel avatar examples

Patterns and usage

  • Generic channels, such as chat, phone, chatbot, and email use Cosmos' generic palette
  • Brand-specific channel avatars, such as Facebook or Twitter, should adopt that brand's color palette
  • Due to the personal nature of the channel's relationship to a user, Channel avatars are similar to People-like avatars and be represented within a circle


File Attachment Avatars

Overview

File attachment avatars show the basic type of file attached. Visual assets (such as videos and images) will display a thumbnail or the poster image of the asset.

File type avatar examples

Patterns and usage



Object Avatars

Overview

Each Object or Case type within Cosmos should have an icon associated with it to make it much easier to discover similar types of work. Object avatars show up in an Object pages' header or within the app-wide search results.

Object avatar examples

Patterns and usage

  • Object-type avatars are presented in a rounded square
  • Non-customized Object avatars fallback to a briefcase icon


Last updated: May 2020