CSS only

Avatar

A user image or initials. SCSS-only: a ng-avatar that holds an <img> or text, with sizes, shapes and a status dot.

Put an <img> or initials inside ng-avatar. Pick a size (xs … xl), make it round with circle, and stack several with ng-avatar-group.

Sizes

xs, sm, md, lg, xl (plus md2x / lg2x).

XS SM MD LG XL

avatar.html

<span class="ng-avatar xs circle">XS</span>
<span class="ng-avatar sm circle">SM</span>
<span class="ng-avatar md circle">MD</span>
<span class="ng-avatar lg circle">LG</span>
<span class="ng-avatar xl circle">XL</span>

Shape

Default, circle, and ring for an outlined edge.

JD JD JD

avatar.html

<span class="ng-avatar lg">JD</span>
<span class="ng-avatar lg circle">JD</span>
<span class="ng-avatar lg circle ring">JD</span>

Images

Put an <img> inside the avatar; it is clipped to the shape.

avatar.html

<span class="ng-avatar sm circle"><img src="https://i.pravatar.cc/120?img=5" alt="User"></span>
<span class="ng-avatar md circle"><img src="https://i.pravatar.cc/120?img=12" alt="User"></span>
<span class="ng-avatar lg circle"><img src="https://i.pravatar.cc/120?img=32" alt="User"></span>
<span class="ng-avatar xl circle"><img src="https://i.pravatar.cc/120?img=48" alt="User"></span>

Status

Add a ng-avatar-dot (coloured with a bg-* helper) for presence.

avatar.html

<span class="ng-avatar lg circle"><img src="https://i.pravatar.cc/120?img=15" alt="User"><span class="ng-avatar-dot bg-success"></span></span>
<span class="ng-avatar lg circle"><img src="https://i.pravatar.cc/120?img=20" alt="User"><span class="ng-avatar-dot bg-mute"></span></span>

Group

Overlap avatars with ng-avatar-group; the last item can be a counter.

avatar.html

<div class="ng-avatar-group">
    <span class="ng-avatar md circle"><img src="https://i.pravatar.cc/120?img=1" alt="User"></span>
    <span class="ng-avatar md circle"><img src="https://i.pravatar.cc/120?img=8" alt="User"></span>
    <span class="ng-avatar md circle"><img src="https://i.pravatar.cc/120?img=24" alt="User"></span>
    <span class="ng-avatar md circle">+5</span>
</div>

Anatomy

ng-avatar ng-avatar-dot ng-avatar-badge ng-avatar-group

Sizes & shape

xs sm md lg xl md2x lg2x circle ring

Reference

Generated from the component source (_ng_avatar.scss).

Component info

Name	`Avatar`
Type	`css`
Version	`1.0.1`
Status	`css`
CSS	`/assets/css/components/_ng_avatar.scss`

Classes

.ng-avatar .ng-avatar-badge .ng-avatar-dot .ng-avatar-group

Tokens

--ng-avatar-bg --ng-avatar-border --ng-avatar-border-color --ng-avatar-border-group --ng-avatar-color --ng-avatar-gap --ng-avatar-radius --ng-avatar-size