Avatars

Avatars
img img img 
<span class="avatar me-2 avatar-radius-0">
        <img src="https://laravelui.spruko.com/vertix/build/assets/images/faces/1.jpg" alt="img">
    </span>
    <span class="avatar me-2">
        <img src="https://laravelui.spruko.com/vertix/build/assets/images/faces/2.jpg" alt="img">
    </span>
    <span class="avatar me-2 avatar-rounded">
        <img src="https://laravelui.spruko.com/vertix/build/assets/images/faces/3.jpg" alt="img">
    </span>
Avatar Sizes

Avatars of different sizes

img img img img img img 
<span class="avatar avatar-xs me-2">
        <img src="https://laravelui.spruko.com/vertix/build/assets/images/faces/4.jpg" alt="img">
    </span>
    <span class="avatar avatar-sm me-2">
        <img src="https://laravelui.spruko.com/vertix/build/assets/images/faces/5.jpg" alt="img">
    </span>
    <span class="avatar avatar-md me-2">
        <img src="https://laravelui.spruko.com/vertix/build/assets/images/faces/6.jpg" alt="img">
    </span>
    <span class="avatar avatar-lg me-2">
        <img src="https://laravelui.spruko.com/vertix/build/assets/images/faces/7.jpg" alt="img">
    </span>
    <span class="avatar avatar-xl me-2">
        <img src="https://laravelui.spruko.com/vertix/build/assets/images/faces/8.jpg" alt="img">
    </span>
    <span class="avatar avatar-xxl me-2">
        <img src="https://laravelui.spruko.com/vertix/build/assets/images/faces/9.jpg" alt="img">
    </span>
Avatar With Icons

Avatar contains icons to perform respective action.

img img img img img img 
<span class="avatar avatar-xs me-2 avatar-rounded">
        <img src="https://laravelui.spruko.com/vertix/build/assets/images/faces/2.jpg" alt="img">
        <a href="javascript:void(0);" class="badge bg-success rounded-pill avatar-badge"><i class="fe fe-camera"></i></a>
    </span>
    <span class="avatar avatar-sm me-2 avatar-rounded">
        <img src="https://laravelui.spruko.com/vertix/build/assets/images/faces/3.jpg" alt="img">
        <a href="javascript:void(0);" class="badge rounded-pill bg-secondary avatar-badge"><i class="fe fe-edit"></i></a>
    </span>
    <span class="avatar avatar-md me-2 avatar-rounded">
        <img src="https://laravelui.spruko.com/vertix/build/assets/images/faces/14.jpg" alt="img">
        <a href="javascript:void(0);" class="badge rounded-pill bg-warning avatar-badge"><i class="fe fe-plus"></i></a>
    </span>
    <span class="avatar avatar-lg me-2 avatar-rounded">
        <img src="https://laravelui.spruko.com/vertix/build/assets/images/faces/13.jpg" alt="img">
        <a href="javascript:void(0);" class="badge rounded-pill bg-info avatar-badge"><i class="fe fe-edit"></i></a>
    </span>
    <span class="avatar avatar-xl me-2 avatar-rounded">
        <img src="https://laravelui.spruko.com/vertix/build/assets/images/faces/15.jpg" alt="img">
        <a href="javascript:void(0);" class="badge rounded-pill bg-success avatar-badge"><i class="fe fe-camera"></i></a>
    </span>
    <span class="avatar avatar-xxl me-2 avatar-rounded">
        <img src="https://laravelui.spruko.com/vertix/build/assets/images/faces/9.jpg" alt="img">
        <a href="javascript:void(0);" class="badge rounded-pill bg-danger avatar-badge"><i class="fe fe-plus"></i></a>
    </span>
Avatar With Online Status Indicators

avatars having online status indicator.

img img img img img img 
<span class="avatar avatar-xs me-2 online avatar-rounded">
        <img src="https://laravelui.spruko.com/vertix/build/assets/images/faces/8.jpg" alt="img">
    </span>
    <span class="avatar avatar-sm online me-2 avatar-rounded">
        <img src="https://laravelui.spruko.com/vertix/build/assets/images/faces/10.jpg" alt="img">
    </span>
    <span class="avatar avatar-md me-2 online avatar-rounded">
        <img src="https://laravelui.spruko.com/vertix/build/assets/images/faces/12.jpg" alt="img">
    </span>
    <span class="avatar avatar-lg me-2 online avatar-rounded">
        <img src="https://laravelui.spruko.com/vertix/build/assets/images/faces/13.jpg" alt="img">
    </span>
    <span class="avatar avatar-xl me-2 online avatar-rounded">
        <img src="https://laravelui.spruko.com/vertix/build/assets/images/faces/14.jpg" alt="img">
    </span>
    <span class="avatar avatar-xxl me-2 online avatar-rounded">
        <img src="https://laravelui.spruko.com/vertix/build/assets/images/faces/15.jpg" alt="img">
    </span>
Avatar With Offline Status Indicators

avatars having a offline status indicator.

img img img img img img 
<span class="avatar avatar-xs me-2 offline avatar-rounded">
        <img src="https://laravelui.spruko.com/vertix/build/assets/images/faces/2.jpg" alt="img">
    </span>
    <span class="avatar avatar-sm offline me-2 avatar-rounded">
        <img src="https://laravelui.spruko.com/vertix/build/assets/images/faces/3.jpg" alt="img">
    </span>
    <span class="avatar avatar-md me-2 offline avatar-rounded">
        <img src="https://laravelui.spruko.com/vertix/build/assets/images/faces/4.jpg" alt="img">
    </span>
    <span class="avatar avatar-lg me-2 offline avatar-rounded">
        <img src="https://laravelui.spruko.com/vertix/build/assets/images/faces/5.jpg" alt="img">
    </span>
    <span class="avatar avatar-xl me-2 offline avatar-rounded">
        <img src="https://laravelui.spruko.com/vertix/build/assets/images/faces/6.jpg" alt="img">
    </span>
    <span class="avatar avatar-xxl me-2 offline avatar-rounded">
        <img src="https://laravelui.spruko.com/vertix/build/assets/images/faces/7.jpg" alt="img">
    </span>
Avatars With Number Badges

Avatar numbers indicates the no. of unread notififactions/messages.

img 2 img 5 img 1 img 7 img 3 img 9 
<span class="avatar avatar-xs me-2 avatar-rounded">
        <img src="https://laravelui.spruko.com/vertix/build/assets/images/faces/2.jpg" alt="img">
        <span class="badge rounded-pill bg-primary avatar-badge">2</span>
    </span>
    <span class="avatar avatar-sm me-2 avatar-rounded">
        <img src="https://laravelui.spruko.com/vertix/build/assets/images/faces/3.jpg" alt="img">
        <span class="badge rounded-pill bg-secondary avatar-badge">5</span>
    </span>
    <span class="avatar avatar-md me-2 avatar-rounded">
        <img src="https://laravelui.spruko.com/vertix/build/assets/images/faces/14.jpg" alt="img">
        <span class="badge rounded-pill bg-warning avatar-badge">1</span>
    </span>
    <span class="avatar avatar-lg me-2 avatar-rounded">
        <img src="https://laravelui.spruko.com/vertix/build/assets/images/faces/13.jpg" alt="img">
        <span class="badge rounded-pill bg-info avatar-badge">7</span>
    </span>
    <span class="avatar avatar-xl me-2 avatar-rounded">
        <img src="https://laravelui.spruko.com/vertix/build/assets/images/faces/15.jpg" alt="img">
        <span class="badge rounded-pill bg-success avatar-badge">3</span>
    </span>
    <span class="avatar avatar-xxl me-2 avatar-rounded">
        <img src="https://laravelui.spruko.com/vertix/build/assets/images/faces/9.jpg" alt="img">
        <span class="badge rounded-pill bg-danger avatar-badge">9</span>
    </span>
Avatar With Initials

Avatar contains intials when user profile doesn't exist.

xs SM MD LG XL XXL 
<span class="avatar avatar-xs me-2 bg-primary">
        xs
    </span>
    <span class="avatar avatar-sm me-2 bg-secondary">
        SM
    </span>
    <span class="avatar avatar-md me-2 bg-warning">
        MD
    </span>
    <span class="avatar avatar-lg me-2 bg-danger">
        LG
    </span>
    <span class="avatar avatar-xl me-2 bg-success">
        XL
    </span>
    <span class="avatar avatar-xxl me-2 bg-info">
        XXL
    </span>
Stacked Avatars

Group of avatars stacked together.

img img img img img img +8 
<div class="avatar-list-stacked">
        <span class="avatar">
            <img src="https://laravelui.spruko.com/vertix/build/assets/images/faces/2.jpg" alt="img">
        </span>
        <span class="avatar">
            <img src="https://laravelui.spruko.com/vertix/build/assets/images/faces/8.jpg" alt="img">
        </span>
        <span class="avatar">
            <img src="https://laravelui.spruko.com/vertix/build/assets/images/faces/2.jpg" alt="img">
        </span>
        <span class="avatar">
            <img src="https://laravelui.spruko.com/vertix/build/assets/images/faces/10.jpg" alt="img">
        </span>
        <span class="avatar">
            <img src="https://laravelui.spruko.com/vertix/build/assets/images/faces/4.jpg" alt="img">
        </span>
        <span class="avatar">
            <img src="https://laravelui.spruko.com/vertix/build/assets/images/faces/13.jpg" alt="img">
        </span>
        <a class="avatar bg-primary text-fixed-white" href="javascript:void(0);">
            +8
        </a>
    </div>
Rounded Stacked Avatars

Group of avatars stacked together.

img img img img img img +8 
<div class="avatar-list-stacked">
        <span class="avatar avatar-rounded">
            <img src="https://laravelui.spruko.com/vertix/build/assets/images/faces/2.jpg" alt="img">
        </span>
        <span class="avatar avatar-rounded">
            <img src="https://laravelui.spruko.com/vertix/build/assets/images/faces/8.jpg" alt="img">
        </span>
        <span class="avatar avatar-rounded">
            <img src="https://laravelui.spruko.com/vertix/build/assets/images/faces/2.jpg" alt="img">
        </span>
        <span class="avatar avatar-rounded">
            <img src="https://laravelui.spruko.com/vertix/build/assets/images/faces/10.jpg" alt="img">
        </span>
        <span class="avatar avatar-rounded">
            <img src="https://laravelui.spruko.com/vertix/build/assets/images/faces/4.jpg" alt="img">
        </span>
        <span class="avatar avatar-rounded">
            <img src="https://laravelui.spruko.com/vertix/build/assets/images/faces/13.jpg" alt="img">
        </span>
        <a class="avatar bg-primary avatar-rounded text-fixed-white" href="javascript:void(0);">
            +8
        </a>
    </div>