Avatars

Avatars are used to represent the user’s identity onscreen with simple visuals.

Code
Angular
Guidelines

Base

Avatars are used to show a thumbnail representation of an individual or business in the interface.

If an image is unavailable, up to two letters can be used instead. Text is best applied with a data attribute - data-text=”{value}”.

Icons can also be used if relevent to the context.

<span class="c-avatar" >
  <img src="https://unsplash.it/200?image=1027">
</span>
<span class="c-avatar c-avatar-primary">
<i class="fas fa-robot"></i>
</span>
<span class="c-avatar c-avatar-success" data-text="AB"></span>
<div class="c-avatar" data-text="YZ" data-status="success"></div>

HTML

Color Examples

Below are the available theme colors for the Avatar element.

<div class="c-avatar c-avatar-primary"><i class="fas fa-robot"></i></div>
  
<div class="c-avatar c-avatar-secondary"><i class="fas fa-robot"></i></div>
  
<div class="c-avatar c-avatar-success"><i class="fas fa-robot"></i></div>
  
<div class="c-avatar c-avatar-warning"><i class="fas fa-robot"></i></div>
  
<div class="c-avatar c-avatar-danger"><i class="fas fa-robot"></i></div>

HTML

Extended Palette

Avatar are also available with the extended color palette.

<div class="c-avatar c-avatar-dark"><i class="fas fa-robot"></i></div>
  
<div class="c-avatar c-avatar-cyan"><i class="fas fa-robot"></i></div>
  
<div class="c-avatar c-avatar-grape"><i class="fas fa-robot"></i></div>
  
<div class="c-avatar c-avatar-indigo"><i class="fas fa-robot"></i></div>
  
<div class="c-avatar c-avatar-lime"><i class="fas fa-robot"></i></div>
  
<div class="c-avatar c-avatar-orange"><i class="fas fa-robot"></i></div>
  
<div class="c-avatar c-avatar-pink"><i class="fas fa-robot"></i></div>
  
<div class="c-avatar c-avatar-teal"><i class="fas fa-robot"></i></div>
  
<div class="c-avatar c-avatar-violet"><i class="fas fa-robot"></i></div>
  
<div class="c-avatar c-avatar-primary-light"><i class="fas fa-robot"></i></div>
  
<div class="c-avatar c-avatar-success-light"><i class="fas fa-robot"></i></div>
  
<div class="c-avatar c-avatar-warning-light"><i class="fas fa-robot"></i></div>
  
<div class="c-avatar c-avatar-danger-light"><i class="fas fa-robot"></i></div>
  
<div class="c-avatar c-avatar-cyan-light"><i class="fas fa-robot"></i></div>
  
<div class="c-avatar c-avatar-grape-light"><i class="fas fa-robot"></i></div>
  
<div class="c-avatar c-avatar-indigo-light"><i class="fas fa-robot"></i></div>
  
<div class="c-avatar c-avatar-lime-light"><i class="fas fa-robot"></i></div>
  
<div class="c-avatar c-avatar-orange-light"><i class="fas fa-robot"></i></div>
  
<div class="c-avatar c-avatar-pink-light"><i class="fas fa-robot"></i></div>
  
<div class="c-avatar c-avatar-teal-light"><i class="fas fa-robot"></i></div>
  
<div class="c-avatar c-avatar-violet-light"><i class="fas fa-robot"></i></div>

HTML

Size Examples

In addition to the default size, Avatar are also available in x-small, small, large, & X-Large.

<span class="c-avatar c-avatar-xs" data-text="A"></span>
<span class="c-avatar c-avatar-sm" data-text="AB"></span>
<span class="c-avatar" data-text="AB"></span>
<span class="c-avatar c-avatar-lg" data-text="AB"></span>
<span class="c-avatar c-avatar-xl" data-text="AB"></span>

HTML

Square Examples

Avatars can also be square at any of the available sizes.

<span class="c-avatar c-avatar-square c-avatar-sm" data-text="AB"></span>
<span class="c-avatar c-avatar-square" data-text="AB"></span>
<span class="c-avatar c-avatar-square c-avatar-lg" data-text="AB"></span>
<span class="c-avatar c-avatar-square c-avatar-xl" data-text="AB"></span>

HTML

Status

In addition you can add a status to the avatar to alert the user. Status is applied with a data attribute - data-status=”{value}”.

<span class="c-avatar" data-status="success">
  <img src="https://unsplash.it/200?image=1011">
</span>
<span class="c-avatar c-avatar-primary" data-status="success">
  <i class="fas fa-star"></i>
</span>
<span class="c-avatar c-avatar-secondary" data-text="CD" data-status="primary"></span>
<span class="c-avatar c-avatar-success" data-text="EF" data-status="danger"></span>
<span class="c-avatar c-avatar-danger" data-text="GH" data-status="warning"></span>
<span class="c-avatar c-avatar-warning" data-text="HI" data-status="success"></span>

HTML

Groups

Avatars can also be grouped.

<div class="c-avatar-group">
  <div class="c-avatar"><i class="fas fa-robot"></i></div>
  <div class="c-avatar c-avatar-primary"><i class="fas fa-robot"></i></div>
  <div class="c-avatar c-avatar-grape"><i class="fas fa-robot"></i></div>
  <div class="c-avatar c-avatar-danger"><i class="fas fa-robot"></i></div>
  <div class="c-avatar c-avatar-warning"><i class="fas fa-robot"></i></div>
  <div class="c-avatar c-avatar-teal"><i class="fas fa-robot"></i></div>
</div>

HTML

Avatar with Icon

Avatar with Initials

Avatar with Image

Overview

Avatars are used to represent the user’s identity onscreen with simple visuals.

Usage

As a user profile icon in the header
As an icon in a table
As contact thumbnails

Versions

People Version

The user version is circular and should only be used for individual users.

Company Version

The company version is square and should only be used for company users

Types

Default Avatars

First and last name or company initials

Company initials can vary and will appear as the following:

Placeholder

User icon for when the user does not provide name

User Supplied Image

Image of user’s choice if uploaded

Best practices

Always use a circular avatar for a personal user and a square avatar for a company user
Always use light colored avatars on dark backgrounds and the dark colored avatars on light backgrounds
Always use colors that do not conflict with danger, information, and success colors

Examples

A user profile icon in the header

Avatar icons in a table

Contact thumbnails