Avatar

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

Examples

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

Base #

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

Icon Avatars #

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

<div class="chi-avatar">
  <i class="chi-icon icon-user" aria-hidden="true"></i>
</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="chi-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, -green, -yellow, -orange, -secondary, -primary

AA

grey

AA

red

AA

pink

AA

purple

AA

indigo

AA

navy

AA

blue

AA

cyan

AA

teal

AA

green

AA

yellow

AA

orange

AA

primary

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

grey

AA

red

AA

pink

AA

purple

AA

indigo

AA

navy

AA

blue

AA

cyan

AA

teal

AA

green

AA

yellow

AA

orange

AA

primary

<div class="chi-avatar -grey">
<i class="chi-icon icon-user" aria-hidden="true"></i>
</div>
<div class="chi-avatar -red">
<i class="chi-icon icon-user" aria-hidden="true"></i>
</div>
<div class="chi-avatar -pink">
<i class="chi-icon icon-user" aria-hidden="true"></i>
</div>
<div class="chi-avatar -purple">
<i class="chi-icon icon-user" aria-hidden="true"></i>
</div>
<div class="chi-avatar -indigo">
<i class="chi-icon icon-user" aria-hidden="true"></i>
</div>
<div class="chi-avatar -navy">
<i class="chi-icon icon-user" aria-hidden="true"></i>
</div>
<div class="chi-avatar -blue">
<i class="chi-icon icon-user" aria-hidden="true"></i>
</div>
<div class="chi-avatar -cyan">
<i class="chi-icon icon-user" aria-hidden="true"></i>
</div>
<div class="chi-avatar -teal">
<i class="chi-icon icon-user" aria-hidden="true"></i>
</div>
<div class="chi-avatar -green">
<i class="chi-icon icon-user" aria-hidden="true"></i>
</div>
<div class="chi-avatar -yellow">
<i class="chi-icon icon-user" aria-hidden="true"></i>
</div>
<div class="chi-avatar -orange">
<i class="chi-icon icon-user" aria-hidden="true"></i>
</div>
<div class="chi-avatar -primary">
<i class="chi-icon icon-user" aria-hidden="true"></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="chi-avatar -light">AA</div>
  <div class="chi-avatar -secondary -transparent">AA</div>
  <div class="chi-avatar -light">
    <i class="chi-icon icon-user" aria-hidden="true"></i>
  </div>
  <div class="chi-avatar -secondary -transparent">
    <i class="chi-icon icon-user" aria-hidden="true"></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="chi-avatar -xs">AA</div>
<div class="chi-avatar -sm">AA</div>
<div class="chi-avatar -sm--2">AA</div>
<div class="chi-avatar -sm--3">AA</div>
<div class="chi-avatar -md">AA</div>
<div class="chi-avatar -lg">AA</div>
<div class="chi-avatar -xl">AA</div>
<div class="chi-avatar -xxl">AA</div>
AA

xs

AA

sm

AA

sm--2

AA

sm--3

AA

md

AA

lg

AA

xl

AA

xxl

<div class="chi-avatar -xs">
  <i class="chi-icon icon-user" aria-hidden="true"></i>
</div>
<div class="chi-avatar -sm">
  <i class="chi-icon icon-user" aria-hidden="true"></i>
</div>
<div class="chi-avatar -sm--2">
  <i class="chi-icon icon-user" aria-hidden="true"></i>
</div>
<div class="chi-avatar -sm--3">
  <i class="chi-icon icon-user" aria-hidden="true"></i>
</div>
<div class="chi-avatar -md">
  <i class="chi-icon icon-user" aria-hidden="true"></i>
</div>
<div class="chi-avatar -lg">
  <i class="chi-icon icon-user" aria-hidden="true"></i>
</div>
<div class="chi-avatar -xl">
  <i class="chi-icon icon-user" aria-hidden="true"></i>
</div>
<div class="chi-avatar -xxl">
  <i class="chi-icon icon-user" aria-hidden="true"></i>
</div>
AA

xs

AA

sm

AA

sm--2

AA

sm--3

AA

md

AA

lg

AA

xl

AA

xxl

<div class="chi-avatar -xs">
  <img src="path/to/image.jpg">
</div>
<div class="chi-avatar -sm">
  <img src="path/to/image.jpg">
</div>
<div class="chi-avatar -sm--2">
  <img src="path/to/image.jpg">
</div>
<div class="chi-avatar -sm--3">
  <img src="path/to/image.jpg">
</div>
<div class="chi-avatar -md">
  <img src="path/to/image.jpg">
</div>
<div class="chi-avatar -lg">
  <img src="path/to/image.jpg">
</div>
<div class="chi-avatar -xl">
  <img src="path/to/image.jpg">
</div>
<div class="chi-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 chi-avatar-group.

L
Label grey
L
Label red
L
Label pink
L
Label purple
L
Label indigo
L
Label navy
L
Label blue
L
Label cyan
L
Label teal
L
Label green
L
Label yellow
L
Label orange
L
Label primary
<div class="chi-avatar-group">
  <div class="chi-avatar">L</div>Label text
</div>

Web Component

Properties

Web component coming soon

Accessibility

Accessibility guidelines coming soon