Avatar

Avatars are circular components used to wrap an image or an icon. They can be used to represent a person or an object.

Basic Avatar

  
<div class="avatar avatar-xl"><img src="https://picsum.photos/100" /></div>
<div class="avatar avatar-lg"><img src="https://picsum.photos/100" /></div>
<div class="avatar avatar-md"><img src="https://picsum.photos/100" /></div>
<div class="avatar avatar-sm"><img src="https://picsum.photos/100" /></div>
<div class="avatar avatar-xs"><img src="https://picsum.photos/100" /></div>
  

Text Avatar

SK
SK
SK
SK
SK

<div class="avatar-text avatar-xl">SK</div>
<div class="avatar-text avatar-lg">SK</div>
<div class="avatar-text avatar-md">SK</div>
<div class="avatar-text avatar-sm">SK</div>
<div class="avatar-text avatar-xs">SK</div>