Sparic - Laravel Multipurpose Responsive Bootstrap5 Dashboard Template

Square Avatars

Avatars of different sizes

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

Stacked Avatars

Group of avatars stacked together.

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

Avatar Sizes

Avatars of different sizes

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

Square Avatar With Icons

Avatar contains icons to perform respective action.

<span class="avatar avatar-xs me-2">
        <img src="https://laravelui.spruko.com/sparic/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">
        <img src="https://laravelui.spruko.com/sparic/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">
        <img src="https://laravelui.spruko.com/sparic/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">
        <img src="https://laravelui.spruko.com/sparic/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">
        <img src="https://laravelui.spruko.com/sparic/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">
        <img src="https://laravelui.spruko.com/sparic/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>

Square Avatar With Online Status Indicators

avatars having online status indicator.

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

Square Avatar With Offline Status Indicators

avatars having a offline status indicator.

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

Square Avatars With Number Badges

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

<span class="avatar avatar-xs me-2">
        <img src="https://laravelui.spruko.com/sparic/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">
        <img src="https://laravelui.spruko.com/sparic/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">
        <img src="https://laravelui.spruko.com/sparic/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">
        <img src="https://laravelui.spruko.com/sparic/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">
        <img src="https://laravelui.spruko.com/sparic/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">
        <img src="https://laravelui.spruko.com/sparic/build/assets/images/faces/9.jpg" alt="img">
        <span class="badge rounded-pill bg-danger avatar-badge">9</span>
    </span>

Square 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>

Avatars with Radius

Avatars of different radius

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

Rounded Avatar Sizes

Avatar contains icons to perform respective action.

<span class="avatar avatar-xs me-2 avatar-rounded">
        <img src="https://laravelui.spruko.com/sparic/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/sparic/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/sparic/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/sparic/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/sparic/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/sparic/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>

Rounded Avatar With Icons

Avatar contains icons to perform respective action.

<span class="avatar avatar-xs me-2 avatar-rounded">
        <img src="https://laravelui.spruko.com/sparic/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/sparic/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/sparic/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/sparic/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/sparic/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/sparic/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.

<span class="avatar avatar-xs me-2 online avatar-rounded">
        <img src="https://laravelui.spruko.com/sparic/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/sparic/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/sparic/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/sparic/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/sparic/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/sparic/build/assets/images/faces/15.jpg" alt="img">
    </span>

Avatar With Offline Status Indicators

avatars having a offline status indicator.

<span class="avatar avatar-xs me-2 offline avatar-rounded">
        <img src="https://laravelui.spruko.com/sparic/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/sparic/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/sparic/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/sparic/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/sparic/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/sparic/build/assets/images/faces/7.jpg" alt="img">
    </span>

Avatars With Number Badges

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

<span class="avatar avatar-xs me-2 avatar-rounded">
        <img src="https://laravelui.spruko.com/sparic/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/sparic/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/sparic/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/sparic/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/sparic/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/sparic/build/assets/images/faces/9.jpg" alt="img">
        <span class="badge rounded-pill bg-danger avatar-badge">9</span>
    </span>

Rounded Stacked Avatars

Group of avatars stacked together.

<div class="avatar-list-stacked">
        <span class="avatar avatar-rounded">
            <img src="https://laravelui.spruko.com/sparic/build/assets/images/faces/2.jpg" alt="img">
        </span>
        <span class="avatar avatar-rounded">
            <img src="https://laravelui.spruko.com/sparic/build/assets/images/faces/8.jpg" alt="img">
        </span>
        <span class="avatar avatar-rounded">
            <img src="https://laravelui.spruko.com/sparic/build/assets/images/faces/2.jpg" alt="img">
        </span>
        <span class="avatar avatar-rounded">
            <img src="https://laravelui.spruko.com/sparic/build/assets/images/faces/10.jpg" alt="img">
        </span>
        <span class="avatar avatar-rounded">
            <img src="https://laravelui.spruko.com/sparic/build/assets/images/faces/4.jpg" alt="img">
        </span>
        <span class="avatar avatar-rounded">
            <img src="https://laravelui.spruko.com/sparic/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>

Switcher

Notifications

Maryam Naz

08:20 PM

Sahar Darya

08:00 PM

Maryam Naz

07:40 PM

Yolduz Rafi

07:20 PM

Nargis Hawa

07:00 PM

Khadija Mehr

06:10 PM

Khadija Mehr

05:20 PM

Rishab

Scarlet

Willson

Yolduz Rafi

New websites is created

Prepare for the next project

Decide the live discussion time

Team review meeting at yesterday at 3:00 pm

Prepare for presentation

Willson jake was created a task

Barina kilton commented on your designs

Juline klept shared a file-attachments

Robert veltz was completed project

Completed for the next meeting

Decide the live discussion time

Team review meeting at yesterday at 3:00 pm