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.

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.

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.

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.

Patterns and usage

Generic avatars represent any unknown filetypes or media load failure fallbacks
Audio avatars may represent any HTML5 supported audio type
Email avatars may represent EML, EMAIL, and WDSEML files
Image avatars may represent any HTML5 supported image type
Presentation avatars represent PPT, PPTX and Keynote files
Spreadsheet avatars represent a large range of spreadsheet file types
Text avatars may represent PDFs and a large range of text-based file types
URL avatars represent an attached link
Video avatars may represent any HTML5 supported video type
Object-type avatars, such as File type, are presented in a rounded square

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.

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