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.

Icon Avatars #

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

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

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

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

Light and transparent background #

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

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

AA

xs

AA

sm

AA

sm--2

AA

sm--3

AA

md

AA

lg

AA

xl

AA

xxl

AA

xs

AA

sm

AA

sm--2

AA

sm--3

AA

md

AA

lg

AA

xl

AA

xxl

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

Web Component

Properties

Web component coming soon

Accessibility

Accessibility guidelines coming soon