Avatar

Avatars are used to represent users, groups, and entities.

Examples

To render an avatar, apply the class a-avatar to a div element and place an image inside.

Base

avatar
<div class="a-avatar">
  <img src="path/to/image.jpg">
</div>

Icon Avatars

Icon avatars can be used when an image is not available. To use, wrap any Chi icon with a-avatar.

<div class="a-avatar">
  <i class="a-icon icon-user"></i>
</div>
<div class="a-avatar a-icon">
  <svg>
    <use xlink:href="#icon-user"></use>
  </svg>
</div>

Initial avatars

Initial avatars can also be used when an image is not available. They are more versatile than icon avatars and support up to two letters. Text utility classes such as -text--uppercase, -text--lowercase, and -text--capitalized can be applied to force specific casing.

AA
M
<div class="a-avatar">AA</div>

Customizations

Color

Both icon and initial avatars support Chi colors. To color an icon, apply any of the following color classes: -grey, -red, -pink, -purple, -indigo, -navy, -blue, -teal, -mint, -green, -yellow, -orange, -secondary, -primary

AA

grey

AA

red

AA

pink

AA

purple

AA

indigo

AA

navy

AA

blue

AA

teal

AA

mint

AA

green

AA

yellow

AA

orange

AA

primary

<div class="a-avatar -grey">AA</div>
<div class="a-avatar -red">AA</div>
<div class="a-avatar -pink">AA</div>
<div class="a-avatar -purple">AA</div>
<div class="a-avatar -indigo">AA</div>
<div class="a-avatar -navy">AA</div>
<div class="a-avatar -blue">AA</div>
<div class="a-avatar -teal">AA</div>
<div class="a-avatar -mint">AA</div>
<div class="a-avatar -green">AA</div>
<div class="a-avatar -yellow">AA</div>
<div class="a-avatar -orange">AA</div>
<div class="a-avatar -primary">AA</div>

grey

red

pink

purple

indigo

navy

blue

teal

mint

green

yellow

orange

primary

<div class="a-avatar -grey">
  <i class="a-icon icon-user"></i>
</div>
<div class="a-avatar -red">
  <i class="a-icon icon-user"></i>
</div>
<div class="a-avatar -pink">
  <i class="a-icon icon-user"></i>
</div>
<div class="a-avatar -purple">
  <i class="a-icon icon-user"></i>
</div>
<div class="a-avatar -indigo">
  <i class="a-icon icon-user"></i>
</div>
<div class="a-avatar -navy">
  <i class="a-icon icon-user"></i>
</div>
<div class="a-avatar -blue">
  <i class="a-icon icon-user"></i>
</div>
<div class="a-avatar -teal">
  <i class="a-icon icon-user"></i>
</div>
<div class="a-avatar -mint">
  <i class="a-icon icon-user"></i>
</div>
<div class="a-avatar -green">
  <i class="a-icon icon-user"></i>
</div>
<div class="a-avatar -yellow">
  <i class="a-icon icon-user"></i>
</div>
<div class="a-avatar -orange">
  <i class="a-icon icon-user"></i>
</div>
<div class="a-avatar -primary">
  <i class="a-icon icon-user"></i>
</div>

Light and transparent background

Both icon and initial avatars support light and transparent versions for dark backgrounds.

AA
AA
<div class="-bg--black">
  <div class="a-avatar -light">AA</div>
  <div class="a-avatar -secondary -transparent">AA</div>
  <div class="a-avatar -light">
    <i class="a-icon icon-user"></i>
  </div>
  <div class="a-avatar -secondary -transparent">
    <i class="a-icon icon-user"></i>
  </div>
</div>

Size

All three avatar styles support a full spectrum of sizes: -xs, -sm, -sm--2, -sm--3, -md, -lg, -xl, -xxl. -md is the default size.

AA

xs

AA

sm

AA

sm--2

AA

sm--3

AA

md

AA

lg

AA

xl

AA

xxl

<div class="a-avatar -xs">AA</div>
<div class="a-avatar -sm">AA</div>
<div class="a-avatar -sm--2">AA</div>
<div class="a-avatar -sm--3">AA</div>
<div class="a-avatar -md">AA</div>
<div class="a-avatar -lg">AA</div>
<div class="a-avatar -xl">AA</div>
<div class="a-avatar -xxl">AA</div>

xs

sm

sm--2

sm--3

md

lg

xl

xxl

<div class="a-avatar -xs">
  <i class="a-icon icon-user"></i>
</div>
<div class="a-avatar -sm">
  <i class="a-icon icon-user"></i>
</div>
<div class="a-avatar -sm--2">
  <i class="a-icon icon-user"></i>
</div>
<div class="a-avatar -sm--3">
  <i class="a-icon icon-user"></i>
</div>
<div class="a-avatar -md">
  <i class="a-icon icon-user"></i>
</div>
<div class="a-avatar -lg">
  <i class="a-icon icon-user"></i>
</div>
<div class="a-avatar -xl">
  <i class="a-icon icon-user"></i>
</div>
<div class="a-avatar -xxl">
  <i class="a-icon icon-user"></i>
</div>
avatar

xs

avatar

sm

avatar

sm--2

avatar

sm--3

avatar

md

avatar

lg

avatar

xl

avatar

xxl

<div class="a-avatar -xs">
  <img src="path/to/image.jpg">
</div>
<div class="a-avatar -sm">
  <img src="path/to/image.jpg">
</div>
<div class="a-avatar -sm--2">
  <img src="path/to/image.jpg">
</div>
<div class="a-avatar -sm--3">
  <img src="path/to/image.jpg">
</div>
<div class="a-avatar -md">
  <img src="path/to/image.jpg">
</div>
<div class="a-avatar -lg">
  <img src="path/to/image.jpg">
</div>
<div class="a-avatar -xl">
  <img src="path/to/image.jpg">
</div>
<div class="a-avatar -xxl">
  <img src="path/to/image.jpg">
</div>

Avatar Groups

Use avatar groups to group multiple avatars or add descriptive text such as a users name. Render an avatar group by wrapping an avatar in the class m-avatarGroup.

L
Label grey
L
Label red
L
Label pink
L
Label purple
L
Label indigo
L
Label navy
L
Label blue
L
Label teal
L
Label mint
L
Label green
L
Label yellow
L
Label orange
L
Label primary
<div class="m-avatarGroup">
  <div class="a-avatar">L</div>Label text
</div>