Loading
Avatars
There are several classes for avatar sizing with prefix of avatar- like: *-xs, *-sm, *-md, *-lg and *-xl
user
user
user
user
user
                                        
    <div class="avatar avatar-*">
        <img src="..." alt="...">
    </div>
Avatars with content
user
John Deo

john.deo@xyz.com

user
John Deo

john.deo@xyz.com

user
John Deo

john.deo@xyz.com

                                        
    <div class="avatar-content">
        <div class="avatar avatar-*">
            <img src="..." alt="...">
        </div>
        <div class="avatar-desc">
            <span class="avatar-name">John Deo</span>
            <p>john.deo@xyz.com</p>
        </div>
    </div>
Avatar Styles
There are several classes for avatar styling with prefix of avatar- like: *-round, *-rounded
user
user
user
user
user
                                        
    <div class="avatar avatar-* avatar-*">
        <img src="..." alt="...">
    </div>
Avatar Group
There are several classes for avatar group sizing with prefix of avatar-group- like: *-xs, *-sm, *-md, *-lg and *-xl
Extra small avatar group
user
user
user
+2
Small avatar group
user
user
user
+2
Medium avatar group
user
user
user
+2
Large avatar group
user
user
user
+2
Extra large avatar group
user
user
user
+2
                                        
    <div class="avatar-group avatar-group-*">
        <div class="avatar avatar-*">
            <img src="..." alt="...">
        </div>
        <div class="avatar avatar-*">
            <img src="..." alt="...">
        </div>
        <div class="avatar avatar-*">
            <img src="..." alt="...">
        </div>
        <div class="avatar avatar-more">
            <span>+2</span>
        </div>
    </div>