CORK Admin Template - Avatar UI Kit

Use .badge-collapsed-img class on ul tag.

<div class="avatar avatar-xl">
    <img alt="avatar" src="assets/img/profile-12.jpeg" class="rounded-circle" />
</div>
<div class="avatar avatar-lg">
    <img alt="avatar" src="assets/img/profile-12.jpeg" class="rounded-circle" />
</div>
<div class="avatar">
    <img alt="avatar" src="assets/img/profile-12.jpeg" class="rounded-circle" />
</div>
<div class="avatar avatar-sm">
    <img alt="avatar" src="assets/img/profile-12.jpeg" class="rounded-circle" />
</div>

Use .avatar-indicators class on div.avatar element

<div class="avatar avatar-xl avatar-indicators avatar-offline">
    <img alt="avatar" src="assets/img/profile-12.jpeg" class="rounded-circle" />
</div>
<div class="avatar avatar-lg avatar-indicators avatar-online">
    <img alt="avatar" src="assets/img/profile-12.jpeg" class="rounded-circle" />
</div>
<div class="avatar avatar-indicators avatar-offline">
    <img alt="avatar" src="assets/img/profile-12.jpeg" class="rounded-circle" />
</div>
<div class="avatar avatar-sm avatar-indicators avatar-online">
    <img alt="avatar" src="assets/img/profile-12.jpeg" class="rounded-circle" />
</div>

Use .rounded and .rounded-circle class to make avatar rounded and circlular respectively.

<div class="avatar avatar-xl">
    <img alt="avatar" src="assets/img/profile-12.jpeg" class="rounded" />
</div>
<div class="avatar avatar-xl">
    <img alt="avatar" src="assets/img/profile-12.jpeg" class="rounded-circle" />
</div>

<div class="avatar avatar-lg">
    <img alt="avatar" src="assets/img/profile-12.jpeg" class="rounded" />
</div>
<div class="avatar avatar-lg">
    <img alt="avatar" src="assets/img/profile-12.jpeg" class="rounded-circle" />
</div>

Use span with .avatar-title class to make user name tags.

<div class="avatar avatar-xl">
    <span class="avatar-title rounded-circle">AG</span>
</div>
<div class="avatar avatar-lg">
    <span class="avatar-title rounded-circle">AG</span>
</div>
<div class="avatar">
    <span class="avatar-title rounded-circle">AG</span>
</div>
<div class="avatar avatar-sm">
    <span class="avatar-title rounded-circle">AG</span>
</div>

Use div with .avatar--group class and put div.avatar inside it.

<div class="avatar--group">
    <div class="avatar avatar-md">
        <img alt="avatar" src="assets/img/profile-12.jpeg" class="rounded-circle" />
    </div>
    <div class="avatar avatar-md">
        <img alt="avatar" src="assets/img/profile-12.jpeg" class="rounded-circle" />
    </div>
    <div class="avatar avatar-md">
        <img alt="avatar" src="assets/img/profile-12.jpeg" class="rounded-circle" />
    </div>
    <div class="avatar avatar-md">
        <span class="avatar-title rounded-circle">AG</span>
    </div>
</div>

Use .translateY-axis class to make animate profile on Y-axis.

<div class="avatar--group">
    <div class="avatar translateY-axis">
        <img alt="avatar" src="assets/img/profile-12.jpeg" class="rounded-circle" />
    </div>
    <div class="avatar translateY-axis">
        <img alt="avatar" src="assets/img/profile-12.jpeg" class="rounded-circle" />
    </div>
    <div class="avatar translateY-axis">
        <img alt="avatar" src="assets/img/profile-12.jpeg" class="rounded-circle" />
    </div>
    <div class="avatar translateY-axis">
        <span class="avatar-title rounded-circle">AG</span>
    </div>
</div>

Use .translateX-axis class to make animate profile on X-axis.

<div class="avatar--group">
    <div class="avatar translateX-axis">
        <img alt="avatar" src="assets/img/profile-12.jpeg" class="rounded-circle" />
    </div>
    <div class="avatar translateX-axis">
        <img alt="avatar" src="assets/img/profile-12.jpeg" class="rounded-circle" />
    </div>
    <div class="avatar translateX-axis">
        <img alt="avatar" src="assets/img/profile-12.jpeg" class="rounded-circle" />
    </div>
    <div class="avatar translateX-axis">
        <span class="avatar-title rounded-circle">AG</span>
    </div>
</div>

Use Bootstrap Tooltip on img tag and span.avatar-title tag

<div class="avatar--group">
    <div class="avatar">
        <img alt="avatar" src="assets/img/profile-12.jpeg" class="rounded-circle  bs-tooltip" data-original-title="Judy Holmes" />
    </div>
    <div class="avatar">
        <img alt="avatar" src="assets/img/profile-12.jpeg" class="rounded-circle  bs-tooltip" data-original-title="Judy Holmes" />
    </div>
    <div class="avatar">
        <img alt="avatar" src="assets/img/profile-12.jpeg" class="rounded-circle  bs-tooltip" data-original-title="Judy Holmes" />
    </div>
    <div class="avatar">
        <span class="avatar-title rounded-circle  bs-tooltip" data-original-title="Alan Green">AG</span>
    </div>
</div>

Alan Green

Lead Developer

My Profile

Inbox

#002658 is generated for Laurie Fox

#0036489 is generated for Ernest Reeves

#014778 is generated for Sean Freeman

#0165987 is generated for Nia Hillyer

#0265998 is generated for Dale Butler

Launch New Seo Wordpress Theme has been moved to Completed Board by Alma Clark

New Task is added by Ernest Reeves

Dinner with Kelly Young has been moved to Completed Board by Dale Butler

Avatar

Sizes

Indicators

Shapes

Initials

Group

Animate Y-axis

Animate X-axis

Tooltip

Alan Green

Todo

Messages

Andy King

Alma Clark

Vincent

Iris Hofman

Linda Nelson

New Invoice

Task Board

Event Notifications