UI: Components


An avatar is a graphical representation of a user or the user's character. It may take either a two-letter abbreviation or an image. This avatar is built with an abbr-tag and an img-tag.

KC Kim Cronos

Without image, using abbr-tag:


Avatar List

Wrapped in a list, using data-tooltip instead of abbr-tag.
For demo-purposes, tab-index has been added in order to show :focus-visible-styles.

With opposite color-scheme

With right-to-left

Avatar Color

Based on the initials — the innerText of the abbr-tag — a background-color is set using strToRGB.