Component classes for styling your avatars. Use the settings menu controls to apply various layout and status styling treatments. Note that a foreground color style override should be used on .c-avatar elements to ensure internal status rings match the current background color. This page applies avatar status color overrides for dark mode and on menu item hover.

Types

• 

  .c-avatar

• 

  .c-avatar.c-avatar--system

Sizes

• 

  .c-avatar.c-avatar--xs

  

  .c-avatar.c-avatar--xs.c-avatar--system

• 

  .c-avatar.c-avatar--sm

  

  .c-avatar.c-avatar--sm.c-avatar--system

• 

  .c-avatar

  

  .c-avatar.c-avatar--system

• 

  .c-avatar.c-avatar--lg

  

  .c-avatar.c-avatar--lg.c-avatar--system

Variants

Along with a child <img>, avatars also support the display of text and SVG icons. In both of these cases, the background color of the .c-avatar must be overridden from its "transparent" default. Optionally, the foreground color (default "white") of the child text or SVG may be overridden. Foreground color override on the parent avatar is reserved for modification of internal status rings.

• G

  .c-avatar.c-avatar--xs .c-avatar__txt

• ZD

  .c-avatar.c-avatar--system.c-avatar--xs .c-avatar__txt

• A

  .c-avatar.c-avatar--sm .c-avatar__txt

• ZD

  .c-avatar.c-avatar--system.c-avatar--sm .c-avatar__txt

• R

  .c-avatar .c-avatar__txt

• ZD

  .c-avatar.c-avatar--system .c-avatar__txt

• DN

  .c-avatar.c-avatar--lg .c-avatar__txt

• ZD

  .c-avatar.c-avatar--system.c-avatar--lg .c-avatar__txt

• .c-avatar.c-avatar--xs > svg

• .c-avatar.c-avatar--system.c-avatar--xs > svg

• .c-avatar.c-avatar--sm > svg

• .c-avatar.c-avatar--system.c-avatar--sm > svg

• .c-avatar > svg

• .c-avatar.c-avatar--system.c-avatar--sm > svg

• .c-avatar.c-avatar--lg > svg

• .c-avatar.c-avatar--system.c-avatar--lg > svg

In Context