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>