Main Menu

Avatar

Lorem ipsum dolor sit amet

Avatar Default
Avatar A Avatar Avatar Avatar 

        <!-- Avatar Default -->
        <span class="avatar bg-info rounded-circle">
        <img class="avatar-img rounded-circle" src="assets/img/1.jpg" alt="Avatar">
        </span>
        <span class="avatar bg-blue text-white rounded-circle">
        <span class="avatar-initials rounded-circle">A</span>
        </span>
        <span class="avatar rounded-circle">
        <img class="avatar-img rounded-circle" src="assets/img/2.jpg" alt="Avatar">
        </span>
        <span class="avatar rounded-circle">
        <img class="avatar-img rounded-circle" src="assets/img/3.jpg" alt="Avatar">
        </span>
        <span class="avatar rounded-circle">
        <img class="avatar-img rounded-circle" src="assets/img/2.jpg" alt="Avatar">
        </span>
Avatar Group
Avatar A Avatar Avatar 2+ 

        <!-- Avatar Group -->
        <span class="avatar bg-info rounded-circle">
        <img class="avatar-img rounded-circle" src="assets/img/1.jpg" alt="Avatar">
        </span>
        <span class="avatar bg-blue text-white rounded-circle">
        <span class="avatar-initials rounded-circle">A</span>
        </span>
        <span class="avatar rounded-circle">
        <img class="avatar-img rounded-circle" src="assets/img/2.jpg" alt="Avatar">
        </span>
        <span class="avatar rounded-circle">
        <img class="avatar-img rounded-circle" src="assets/img/3.jpg" alt="Avatar">
        </span>
        <span class="avatar bg-gray-300 rounded-circle">
        <span class="avatar-initials rounded-circle">2+</span>
        </span>
Avatar Label
VP VP VP VP 

    <!-- Avatar Label -->
    <span class="avatar bg-blue text-white rounded-circle">
        <span class="avatar-initials">VP</span>
    </span>
    <span class="avatar bg-dark text-white rounded-circle">
        <span class="avatar-initials">VP</span>
    </span>
    <span class="avatar bg-danger text-white rounded-circle">
        <span class="avatar-initials">VP</span>
    </span>
    <span class="avatar bg-gray text-white rounded-circle">
        <span class="avatar-initials">VP</span>
    </span>
Avatar Styles
Avatar VP Avatar VP Avatar VP Avatar VP 

    <!-- Avatar Styles -->
    <span class="avatar rounded-0">
        <img class="avatar-img" src="assets/img/2.jpg" alt="Avatar">
    </span>
    <span class="avatar bg-blue text-white">
        <span class="avatar-initials">VP</span>
    </span>
    <span class="avatar rounded-circle">
        <img class="avatar-img" src="assets/img/3.jpg" alt="Avatar">
    </span>
    <span class="avatar bg-gray text-white rounded-circle">
        <span class="avatar-initials">VP</span>
    </span>
    
    <span class="avatar rounded-1">
        <img class="avatar-img" src="assets/img/2.jpg" alt="Avatar">
    </span>
    <span class="avatar bg-blue text-white">
        <span class="avatar-initials">VP</span>
    </span>
    <span class="avatar rounded-circle avatar-outline-primary">
        <img class="avatar-img" src="assets/img/3.jpg" alt="Avatar">
    </span>
    <span class="avatar rounded-circle bg-light avatar-outline-primary">
        <span class="avatar-initials">VP</span>
    </span>
Avatar Sizes
Avatar Avatar Avatar Avatar Avatar Avatar Avatar 

    <!-- Avatar Sizes -->
    <span class="avatar avatar-xs rounded-circle">
        <img class="avatar-img rounded-circle" src="assets/img/1.jpg" alt="Avatar">
    </span>
    <span class="avatar avatar-sm rounded-circle">
        <img class="avatar-img rounded-circle" src="assets/img/1.jpg" alt="Avatar">
    </span>
    <span class="avatar rounded-circle">
        <img class="avatar-img rounded-circle" src="assets/img/1.jpg" alt="Avatar">
    </span>
    <span class="avatar avatar-lg rounded-circle">
        <img class="avatar-img rounded-circle" src="assets/img/1.jpg" alt="Avatar">
    </span>
    <span class="avatar avatar-xl rounded-circle">
        <img class="avatar-img rounded-circle" src="assets/img/1.jpg" alt="Avatar">
    </span>
    <span class="avatar avatar-xxl rounded-circle">
        <img class="avatar-img rounded-circle" src="assets/img/1.jpg" alt="Avatar">
    </span>
    <span class="avatar avatar-xxxl rounded-circle">
        <img class="avatar-img rounded-circle" src="assets/img/1.jpg" alt="Avatar">
    </span>
Avatar Status with Shape
VP VP Avatar Avatar
VP VP VP VP
VP VP Avatar Avatar 

    <!-- Avatar Status with Shape -->
    <span class="avatar avatar-sm bg-blue text-white rounded-circle">
        <span class="avatar-initials">VP</span>
        <span class="avatar-status avatar-sm-status bg-primary"></span>
    </span>
    <span class="avatar avatar-sm bg-dark text-white rounded-circle">
        <span class="avatar-initials">VP</span>
        <span class="avatar-status avatar-sm-status bg-success"></span>
    </span>
    
    <span class="avatar avatar-sm avatar-outline-primary rounded-1 ms-5">
        <img class="avatar-img rounded-1" src="assets/img/2.jpg" alt="Avatar">
        <span class="avatar-status avatar-sm-status bg-primary"></span>
    </span>
    <span class="avatar avatar-sm avatar-outline-danger rounded-1">
        <img class="avatar-img rounded-1" src="assets/img/3.jpg" alt="Avatar">
        <span class="avatar-status avatar-sm-status bg-danger"></span>
    </span>
    <hr>
    <span class="avatar bg-danger text-white rounded-circle">
        <span class="avatar-initials">VP</span>
        <span class="avatar-status avatar-status bg-blue"></span>
    </span>
    <span class="avatar bg-gray text-white rounded-circle">
        <span class="avatar-initials">VP</span>
        <span class="avatar-status avatar-status bg-info"></span>
    </span>
    
    <span class="avatar bg-danger text-white rounded-1 ms-5">
        <span class="avatar-initials">VP</span>
        <span class="avatar-status avatar-status bg-blue"></span>
    </span>
    <span class="avatar bg-gray text-white rounded-1">
        <span class="avatar-initials">VP</span>
        <span class="avatar-status avatar-status bg-info"></span>
    </span>
    <hr>
    <span class="avatar avatar-lg bg-success text-white rounded-circle">
        <span class="avatar-initials">VP</span>
        <span class="avatar-status avatar-lg-status bg-blue"></span>
    </span>
    <span class="avatar avatar-lg bg-info text-white rounded-circle">
        <span class="avatar-initials">VP</span>
        <span class="avatar-status avatar-lg-status bg-info"></span>
    </span>
    
    <span class="avatar avatar-lg bg-success text-white rounded-circle ms-5">
        <img class="avatar-img  rounded-circle" src="assets/img/1.jpg" alt="Avatar">
        <span class="avatar-status avatar-lg-status bg-primary"></span>
    </span>
    <span class="avatar avatar-lg bg-info text-white rounded-circle">
        <img class="avatar-img  rounded-circle" src="assets/img/2.jpg" alt="Avatar">
        <span class="avatar-status avatar-lg-status bg-danger"></span>
    </span>