Avatar component for Angular

The nuiAvatar component shows a picture, or the person’s initials when there is none or it fails to load. The initials sit on a color computed from the name, so the same person keeps the same color everywhere.

Every hue is capped to a lightness and chroma that keep white initials above a 4.5:1 contrast ratio, whatever the name and the theme.

Initials, pictures and status

Without a src, the initials and color come from name. status adds a presence dot.

Groups, sizes and shapes

nuiAvatarGroup overlaps a row of avatars. size takes sm, md or lg, and shape="square" suits teams and apps.