CSS Components / Avatars

Avatars

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

Sizes

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.

In Context

Chrome Header

Menus

Playground