close

# Avatars

Redy-to-use avatar components, which are great to use everywhere when you want to display user related data.

##### BasicExclusive

Basic image avatars with sizing.

    <div class="avatar avatar-xxl">
        <img src="..." alt="">
    </div>
    <div class="avatar avatar-xl">
        <img src="..." alt="">
    </div>
    <div class="avatar">
        <img src="..." alt="">
    </div>
    <div class="avatar avatar-sm">
        <img src="..." alt="">
    </div>
    <div class="avatar avatar-xs">
        <img src="..." alt="">
    </div>

##### Status IndicatorExclusive

Avatars with status indicator. (Active, Unknown, Offline)

AC

    <div class="avatar avatar-xxl status status-online">
        <img src="..." alt="">
    </div>
    <div class="avatar avatar-xl status">
        <img src="..." alt="">
    </div>
    <div class="avatar status status-offline">
        <img src="..." alt="">
    </div>

##### StackedExclusive

You can stack avatars in a container and also they will have cool hover animation.

    <div class="avatar-container">
        <div class="avatar avatar-rounded">
            <img src="..." alt="">
        </div>
        <div class="avatar avatar-rounded">
            <img src="..." alt="">
        </div>
        <div class="avatar avatar-rounded">
            <img src="..." alt="">
        </div>
        <div class="avatar avatar-rounded">
            <img src="..." alt="">
        </div>
        <div class="avatar avatar-rounded">
            <img src="..." alt="">
        </div>
    </div>

##### InitialsExclusive

Some cool avatars with initials.

DB
AC
LK
OO
FR

    <div class="avatar avatar-xxl>
        <div class="avatar-title">DB</div>
    </div>
    <div class="avatar avatar-xl>
        <div class="avatar-title">AC</div>
    </div>
    <div class="avatar>
        <div class="avatar-title">LK</div>
    </div>
    <div class="avatar avatar-sm>
        <div class="avatar-title">OO</div>
    </div>
    <div class="avatar avatar-xs>
        <div class="avatar-title">FR</div>
    </div>

##### RoundedExclusive

Make your avatars rounded by adding `.avatar-rounded` class to them.

LK

    <div class="avatar avatar-xxl avatar-rounded>
        <div class="avatar-title">DB</div>
    </div>
    <div class="avatar avatar-xl avatar-rounded>
        <div class="avatar-title">AC</div>
    </div>
    <div class="avatar avatar-rounded">
        <div class="avatar-title">LK</div>
    </div>

##### TooltipsExclusive

You can easily combine bootstrap tooltips with avatars!

    <div class="avatar avatar-rounded">
        <img src="..." data-bs-toggle="tooltip" data-bs-placement="top" title="Peter Griffin">
    </div>
    <div class="avatar avatar-rounded">
        <img src="..." data-bs-toggle="tooltip" data-bs-placement="top" title="Peter Griffin">
    </div>
    <div class="avatar avatar-rounded">
        <img src="..." data-bs-toggle="tooltip" data-bs-placement="top" title="Peter Griffin">
    </div>
    <div class="avatar avatar-rounded">
        <img src="..." data-bs-toggle="tooltip" data-bs-placement="top" title="Peter Griffin">
    </div>
    <div class="avatar avatar-rounded">
        <img src="..." data-bs-toggle="tooltip" data-bs-placement="top" title="Peter Griffin">
    </div>