Atmos
Search…
Avatar
Create and group avatars of different sizes and shapes with a single component.

Avatar Sizes

1
<div class="avatar avatar-xxl">
2
<img src="assets/img/users/user-1.jpg" alt="..." class="avatar-img rounded-circle">
3
</div>
4
5
<div class="avatar avatar-xl">
6
<img src="assets/img/users/user-2.jpg" alt="..." class="avatar-img rounded-circle">
7
</div>
8
9
<div class="avatar avatar-lg">
10
<img src="assets/img/users/user-3.jpg" alt="..." class="avatar-img rounded-circle">
11
</div>
12
13
<div class="avatar">
14
<img src="assets/img/users/user-4.jpg" alt="..." class="avatar-img rounded-circle">
15
</div>
16
17
<div class="avatar avatar-sm">
18
<img src="assets/img/users/user-5.jpg" alt="..." class="avatar-img rounded-circle">
19
</div>
20
21
<div class="avatar avatar-xs">
22
<img src="assets/img/users/user-6.jpg" alt="..." class="avatar-img rounded-circle">
23
</div>
Copied!

Avatar with text placeholders

1
<div class="avatar avatar-xxl">
2
<span class="avatar-title rounded-circle ">AR</span>
3
</div>
4
5
<div class="avatar avatar-xl">
6
<span class="avatar-title rounded-circle ">EQ</span>
7
</div>
8
9
<div class="avatar avatar-lg">
10
<span class="avatar-title rounded-circle ">VV</span>
11
</div>
12
13
<div class="avatar">
14
<span class="avatar-title rounded-circle ">SM</span>
15
</div>
16
17
<div class="avatar avatar-sm">
18
<span class="avatar-title rounded-circle ">XS</span>
19
</div>
20
21
<div class="avatar avatar-xs">
22
<span class="avatar-title rounded-circle ">SS</span>
23
</div>
Copied!

Avatar Status

1
<div class="avatar avatar-online">
2
<img src="assets/img/users/user-4.jpg" alt="..." class="avatar-img rounded-circle">
3
</div>
4
<div class="avatar avatar-away">
5
<img src="assets/img/users/user-4.jpg" alt="..." class="avatar-img rounded-circle">
6
</div>
7
<div class="avatar avatar-dnd">
8
<img src="assets/img/users/user-4.jpg" alt="..." class="avatar-img rounded-circle">
9
</div>
10
<div class="avatar avatar-offline">
11
<img src="assets/img/users/user-4.jpg" alt="..." class="avatar-img rounded-circle">
12
</div>
Copied!

Avatar Group

1
<div class="avatar-group">
2
<div class="avatar ">
3
<img src="assets/img/users/user-2.jpg" alt="..."
4
class="avatar-img rounded-circle">
5
</div>
6
7
<div class="avatar ">
8
<img src="assets/img/users/user-3.jpg" alt="..."
9
class="avatar-img rounded-circle">
10
</div>
11
12
<div class="avatar">
13
<img src="assets/img/users/user-4.jpg" alt="..."
14
class="avatar-img rounded-circle">
15
</div>
16
17
<div class="avatar ">
18
<img src="assets/img/users/user-5.jpg" alt="..."
19
class="avatar-img rounded-circle">
20
</div>
21
22
<div class="avatar ">
23
<span class="avatar-title rounded-circle">AB</span>
24
</div>
25
</div>
Copied!

Avatar Shape

1
<div class="avatar avatar-xl">
2
<img src="assets/img/users/user-2.jpg" alt="..." class="avatar-img ">
3
</div>
4
5
<div class="avatar avatar-xl">
6
<img src="assets/img/users/user-3.jpg" alt="..." class="avatar-img rounded">
7
</div>
8
9
<div class="avatar avatar-xl">
10
<img src="assets/img/users/user-3.jpg" alt="..." class="avatar-img rounded-circle">
11
</div>
Copied!

Avatar as file picker in forms

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

Markup

1
<label class="avatar-input">
2
<span class="avatar avatar-lg">
3
<img src="assets/img/users/user-9.jpg" alt="..."
4
class="avatar-img rounded-circle">
5
<span class="avatar-input-icon rounded-circle">
6
<i class="mdi mdi-upload mdi-24px"></i>
7
</span>
8
</span>
9
<input type="file" class="avatar-file-picker" >
10
</label>
Copied!

JS Code for picker

1
function readFile(input) {
2
if (input.files && input.files[0]) {
3
var reader = new FileReader();
4
5
reader.onload = function (e) {
6
$(input).parents('.avatar-input').find('.avatar-img').attr('src', e.target.result);
7
};
8
9
reader.readAsDataURL(input.files[0]);
10
}
11
}
12
$('.avatar-file-picker').on('change', function () {
13
readFile(this);
14
});
15
Copied!
Please note file picker does not upload image on selection