Atmos
Search
K

Avatar

Create and group avatars of different sizes and shapes with a single component.

Avatar Sizes

<div class="avatar avatar-xxl">
<img src="assets/img/users/user-1.jpg" alt="..." class="avatar-img rounded-circle">
</div>
<div class="avatar avatar-xl">
<img src="assets/img/users/user-2.jpg" alt="..." class="avatar-img rounded-circle">
</div>
<div class="avatar avatar-lg">
<img src="assets/img/users/user-3.jpg" alt="..." class="avatar-img rounded-circle">
</div>
<div class="avatar">
<img src="assets/img/users/user-4.jpg" alt="..." class="avatar-img rounded-circle">
</div>
<div class="avatar avatar-sm">
<img src="assets/img/users/user-5.jpg" alt="..." class="avatar-img rounded-circle">
</div>
<div class="avatar avatar-xs">
<img src="assets/img/users/user-6.jpg" alt="..." class="avatar-img rounded-circle">
</div>

Avatar with text placeholders

<div class="avatar avatar-xxl">
<span class="avatar-title rounded-circle ">AR</span>
</div>
<div class="avatar avatar-xl">
<span class="avatar-title rounded-circle ">EQ</span>
</div>
<div class="avatar avatar-lg">
<span class="avatar-title rounded-circle ">VV</span>
</div>
<div class="avatar">
<span class="avatar-title rounded-circle ">SM</span>
</div>
<div class="avatar avatar-sm">
<span class="avatar-title rounded-circle ">XS</span>
</div>
<div class="avatar avatar-xs">
<span class="avatar-title rounded-circle ">SS</span>
</div>

Avatar Status

<div class="avatar avatar-online">
<img src="assets/img/users/user-4.jpg" alt="..." class="avatar-img rounded-circle">
</div>
<div class="avatar avatar-away">
<img src="assets/img/users/user-4.jpg" alt="..." class="avatar-img rounded-circle">
</div>
<div class="avatar avatar-dnd">
<img src="assets/img/users/user-4.jpg" alt="..." class="avatar-img rounded-circle">
</div>
<div class="avatar avatar-offline">
<img src="assets/img/users/user-4.jpg" alt="..." class="avatar-img rounded-circle">
</div>

Avatar Group

<div class="avatar-group">
<div class="avatar ">
<img src="assets/img/users/user-2.jpg" alt="..."
class="avatar-img rounded-circle">
</div>
<div class="avatar ">
<img src="assets/img/users/user-3.jpg" alt="..."
class="avatar-img rounded-circle">
</div>
<div class="avatar">
<img src="assets/img/users/user-4.jpg" alt="..."
class="avatar-img rounded-circle">
</div>
<div class="avatar ">
<img src="assets/img/users/user-5.jpg" alt="..."
class="avatar-img rounded-circle">
</div>
<div class="avatar ">
<span class="avatar-title rounded-circle">AB</span>
</div>
</div>

Avatar Shape

<div class="avatar avatar-xl">
<img src="assets/img/users/user-2.jpg" alt="..." class="avatar-img ">
</div>
<div class="avatar avatar-xl">
<img src="assets/img/users/user-3.jpg" alt="..." class="avatar-img rounded">
</div>
<div class="avatar avatar-xl">
<img src="assets/img/users/user-3.jpg" alt="..." class="avatar-img rounded-circle">
</div>

Avatar as file picker in forms

You can avatar file picker, this comes handy when you want to create profile picture updating scenarios

Markup

<label class="avatar-input">
<span class="avatar avatar-lg">
<img src="assets/img/users/user-9.jpg" alt="..."
class="avatar-img rounded-circle">
<span class="avatar-input-icon rounded-circle">
<i class="mdi mdi-upload mdi-24px"></i>
</span>
</span>
<input type="file" class="avatar-file-picker" >
</label>

JS Code for picker

function readFile(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$(input).parents('.avatar-input').find('.avatar-img').attr('src', e.target.result);
};
reader.readAsDataURL(input.files[0]);
}
}
$('.avatar-file-picker').on('change', function () {
readFile(this);
});
Please note file picker does not upload image on selection