Avatar
Examples#
To render an avatar, apply the class chi-avatar to a div element and place an image inside.
Base#
<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.
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
grey
red
pink
purple
indigo
navy
blue
cyan
teal
green
yellow
orange
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>
grey
red
pink
purple
indigo
navy
blue
cyan
teal
green
yellow
orange
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.
<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.
xs
sm
sm--2
sm--3
md
lg
xl
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>
xs
sm
sm--2
sm--3
md
lg
xl
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>xs
sm
sm--2
sm--3
md
lg
xl
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.
<div class="chi-avatar-group">
<div class="chi-avatar">L</div>Label text
</div>