Theme:

Avatar

Avatars represent users or entities. They support images, placeholder initials, multiple sizes, ring borders, online/offline indicators, and grouping.

Sizes

XS

SM

MD

LG

XL

<div class="dui-avatar dui-avatar-placeholder dui-avatar-xs"><span>XS</span></div> <div class="dui-avatar dui-avatar-placeholder dui-avatar-sm"><span>SM</span></div> <div class="dui-avatar dui-avatar-placeholder"><span>MD</span></div> <div class="dui-avatar dui-avatar-placeholder dui-avatar-lg"><span>LG</span></div> <div class="dui-avatar dui-avatar-placeholder dui-avatar-xl"><span>XL</span></div>

Placeholder Initials

JD

AM

KZ

<div class="dui-avatar dui-avatar-placeholder"> <span>JD</span> </div>

Ring

JD

AM

<div class="dui-avatar dui-avatar-placeholder dui-avatar-ring"> <span>JD</span> </div>

Online / Offline Indicator

JD

AM

<div class="dui-avatar dui-avatar-placeholder dui-avatar-online"> <span>JD</span> </div> <div class="dui-avatar dui-avatar-placeholder dui-avatar-offline"> <span>AM</span> </div>

Avatar Group

JD

AM

KZ

+5

<div class="dui-avatar-group"> <div class="dui-avatar dui-avatar-placeholder"><span>JD</span></div> <div class="dui-avatar dui-avatar-placeholder"><span>AM</span></div> <div class="dui-avatar dui-avatar-placeholder"><span>KZ</span></div> <div class="dui-avatar dui-avatar-placeholder"><span>+5</span></div> </div>