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
<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.
<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
grey
red
pink
purple
indigo
navy
blue
teal
mint
green
yellow
orange
<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>
grey
red
pink
purple
indigo
navy
blue
teal
mint
green
yellow
orange
<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>
Inverse and transparent background
Both icon and initial avatars support inverse version and transparent background.
<div class="-bg--black">
<div class="a-avatar -inverse">AA</div>
<div class="a-avatar -mint">AA</div>
<div class="a-avatar -mint -transparent">AA</div>
<div class="a-avatar -inverse">
<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 -mint -transparent">
<i class="a-icon icon-user"></i>
</div>
</div>
Size
All three avatar styles support a full spectrum of sizes: -xs, -sm,
-sm2, -sm3, -md, -lg, -xl, -xxl.
-md is the default size.
xs
sm
sm2
sm3
md
lg
xl
xxl
<div class="a-avatar -xs">AA</div>
<div class="a-avatar -sm">AA</div>
<div class="a-avatar -sm2">AA</div>
<div class="a-avatar -sm3">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
sm2
sm3
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 -sm2">
<i class="a-icon icon-user"></i>
</div>
<div class="a-avatar -sm3">
<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>xs
sm
sm2
sm3
md
lg
xl
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 -sm2">
<img src="path/to/image.jpg">
</div>
<div class="a-avatar -sm3">
<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.
<div class="m-avatarGroup">
<div class="a-avatar">L</div>Label text
</div>