Avatars

Avatars are the visual representation of users in Quantum Workplace's software. Avatars are how users can identify themselves and create a persona in our system. They make identifying each individual user easy, efficient, and memorable.

We use two types of avatars in Voyager: Personalized and anonymous. Personalized avatars are either the user's initials or an image. Anonymous avatars are used when the identity of a user is confidential or unknown.

Personalized

                    HTML
                    
                        Copy
                    
<img src="~/img/spaceman.png" alt="Spaceman Spiff profile picture" class="qw-avatar" />

The initial-based avatar colors are assigned by the product based on the characters in the name, to ensure consistency across the product. There are currently 5 colors used, incrementing from .qw-avatar-color-1 to .qw-avatar-color-5

                    HTML
                    
                        Copy
                    
<div class="qw-avatar qw-avatar-color-4 qw-avatar-text" aria-hidden="true">MM</div>

Anonymous

                    HTML
                    
                        Copy
                    
<div class="qw-avatar qw-avatar-icon" aria-label="Anonymous user">
    <span class="fa fa-user" aria-hidden="true"></span>
</div>

Variants

To modify the avatar from the default, wrap it in a div with any modifier classes applied that parent div.

Sizes

The default size for our avatars is the Small avatar size. To vary the size of the avatar, wrap the avatar using a size class from the list below.

X-small

                        HTML
                        
                            Copy
                        
<div class="qw-avatar-xs">
    <img src="~/Content/img/spaceman.png" alt="Spaceman Spiff profile picutre" class="qw-avatar" />
</div>

Small

                        HTML
                        
                            Copy
                        
<img src="~/Content/img/spaceman.png" alt="Spaceman Spiff profile picutre" class="qw-avatar" />

Medium

                        HTML
                        
                            Copy
                        
<div class="qw-avatar-md">
    <img src="~/Content/img/spaceman.png" alt="Spaceman Spiff profile picutre" class="qw-avatar" />
</div>

Large

                        HTML
                        
                            Copy
                        
<div class="qw-avatar-lg">
    <img src="~/Content/img/spaceman.png" alt="Spaceman Spiff profile picutre" class="qw-avatar" />
</div>

X-Large

                        HTML
                        
                            Copy
                        
<div class="qw-avatar-xl">
    <img src="~/Content/img/spaceman.png" alt="Spaceman Spiff profile picutre" class="qw-avatar" />
</div>

XXL

                        HTML
                        
                            Copy
                        
<div class="qw-avatar-xxl">
    <img src="~/Content/img/spaceman.png" alt="Spaceman Spiff profile picutre" class="qw-avatar" />
</div>

Mega

The .mega class size icon should only be used in instances where the user is known, and is of utmost importance on the screen, i.e. the profile page.

                        HTML
                        
                            Copy
                        
<div class="qw-avatar-mega">
    <img src="~/Content/img/spaceman.png" alt="Spaceman Spiff profile picutre" class="qw-avatar" />
</div>

Linked Avatars

                    HTML
                    
                        Copy
                    
<a href="#" class="qw-avatar-link">
    <img src="~/Content/img/spaceman.png" alt="Spaceman Spiff profile picutre" class="qw-avatar" />
</a>

Showing Status

User Status (Deactivated)

A deactived state is available for personalized avatars. Add .qw-avatar-deactivated to the .qw-avatar.

                        HTML
                        
                            Copy
                        
<img src="~/img/spaceman.png" class="qw-avatar qw-avatar-deactivated" />
<div class="qw-avatar qw-avatar-text qw-avatar-color-4 qw-avatar-deactivated">MM</div>

User activity status

Show status on an avatar by adding .qw-avatar-status and a status type class to the .qw-avatar element's parent. This will add a status circle to the bottom right corner of the avatar.

Status indicators use pseudo-content shapes and are not announced to assistive technologies. Use visually hidden content to convey meaning.

                    HTML
                    
                        Copy
                    
<div class="qw-avatar-status qw-avatar-selected">
    <img src="~/Content/img/spaceman.png" alt="Spaceman Spiff profile picutre" class="qw-avatar" />
    <div class="sr-only">Status: Not Started</div>
</div>

Overview of CSS classes

Selector	Summary
.qw-avatar	Creates the avatar component
.qw-avatar-text	Used for fallback avatars of user's initials
.qw-avatar-icon	Used for fallback avatars of anonymous users
.qw-avatar-deactivated	State modifier for avatar - Inactive
.qw-avatar-square	Makes avatar a square (applied to parent container)
.qw-avatar-link	State modifier for avatar - Link (applied to parent container)
.qw-avatar-xs	Size modifier for avatar - x-small (applied to parent container)
.qw-avatar-md	Size modifier for avatar - medium (applied to parent container)
.qw-avatar-lg	Size modifier for avatar - large (applied to parent container)
.qw-avatar-xl	Size modifier for avatar - x-large (applied to parent container)
.qw-avatar-xxl	Size modifier for avatar - xx-large (applied to parent container)
.qw-avatar-mega	Size modifier for avatar - mega (applied to parent container)
.qw-avatar-status	State modifier for avatar - required for indicating state (applied to parent container)