Solaris Design System

Avatars

Avatars are used to display users’ profile images. There are two typse of avatars: ones with just the avatar, and ones with titles.

The table below shows the following avatar examples and its properties.

NOTE

Unfortunately these references are images so note that on theme dark that the tooltips and the titles need to change to a lighter colour text and background colour for the tooltip.

Avatar only

States :app-avatar-large
Size: 120px		 :app-avatar-thumb
Size: 48px		 :app-avatar-icon
Size: 32px
:passive Passive large avatar Passive thumb avatar Passive icon avatar
:hover Hover avatar large theme light Hover avatar large theme dark Hover avatar thumb theme light Hover avatar thumb theme dark Hover avatar icon theme light Hover avatar icon theme dark
:focus Focus large avatar Focus thumb avatar Focus icon avatar

Avatar with titles

States :app-avatar-large
Size: 120px		 :app-avatar-thumb
Size: 48px		 :app-avatar-icon
Size: 32px
:avatar-titles-vertical Vertical large avatar theme light Vertical large avatar theme dark Vertical thumb avatar theme light Vertical thumb avatar theme dark Vertical icon avatar theme light Vertical icon avatar theme dark
:avatar-titles-horizontal Horizontal large avatar theme light Horizontal large avatar theme dark Horizontal thumb avatar theme light Horizontal thumb avatar theme dark Horizontal icon avatar theme light Horizontal icon avatar theme dark

Usage

Avatars are used to show the user’s profile. If the user does not provide a photo, Codebots usually generates one for them.

Type Use
Avatar only Used for areas where it is not required to show the description of the avatar/user. Often used in most places apart from user profile.
With text Used for areas where description of the user is required to know their name and role.