brandv1.0
Utilities
Data Display
Data Entry

Avatar

The Avatar component is used to represent a user, and displays the profile picture, initials or fallback icon.

Shapes

Default avatar is square in shape. For rounded and circle avatar add .avatar-rounded modifier classes respectively.

user
user
user
							
                                
<script setup>
import avatar from '@/img_src/avatar.jpg'
</script>

<template>
    <div class="avatar">
        <img :src="avatar" alt="user" class="avatar-img">
    </div>
</template>
Class Values
class="avatar avatar-[value]" rounded / square
Sizing

Fancy larger or smaller avatar? Add .avatar-xl, .avatar-lg, .avatar-md, .avatar-sm or .avatar-xs for additional sizes. For custom sizes use sizing utilities - e.g. d-14 or d-20.

user
user
user
user
user
user
user
user
user
							
                                
<script setup>
import avatar from '@/img_src/avatar.jpg'
</script>

<template>
    <div class="avatar avatar-rounded avatar-xxxl">
        <img :src="avatar" alt="user" class="avatar-img">
    </div>
</template>
Class Values
class="avatar avatar-[value]" xxxl / xxl / xl / lg / md / xs / xxs
Indicators on avatar

Fancy larger or smaller avatar? Add position-relative and position classes with badge Indicators.

user
user
user
user
							
                                
<script setup>
import avatar from '@/img_src/avatar.jpg'
</script>

<template>
    <div class="avatar avatar-rounded position-relative">
        <img :src="avatar" alt="user" class="avatar-img">
        <span class="badge badge-success badge-indicator badge-indicator-xl position-top-end-overflow-1"></span>
    </div>
</template>
Class Values
class="badge badge-success badge-indicator badge-indicator-xl position-[Value]" top-end-overflow-1 / bottom-end-overflow-1 / top-end-overflow / bottom-end-overflow
Badge on avatar

Fancy larger or smaller avatar? Add position-relative and position classes with badge.

user10
user10
user5
user5
user5
user5
user5
user5
							
                                
<script setup>
import avatar from '@/img_src/avatar.jpg'
</script>

<template>
    <div class="avatar avatar-rounded position-relative">
        <img :src="avatar" alt="user" class="avatar-img">
        <span class="badge badge-success  badge-xl position-bottom-end-overflow-1">10</span>
    </div>
</template>
Class Values
class="badge badge-success badge-indicator-xl position-[Value]" top-end-overflow-1 / bottom-end-overflow-1 / top-end-overflow / bottom-end-overflow
Avatar with initials

Wrap .initial-wrap with .avatar classess.

PR
PR
PR
PR
PR
PR
PR
PR
PR
							
                                
<template>
    <div class="avatar avatar-xxl  avatar-primary avatar-rounded">
        <span class="initial-wrap">PR</span>
    </div>
</template>
Class Values
class="avatar avatar-[value]" xxxl / xxl / xl / lg / md / xs / xxs
Avatar with Icons

Add icons inside .initial-wrap classes.

							
                                
<template>
    <div class="avatar  avatar-icon avatar-xxxl avatar-primary avatar-rounded">
        <span class="initial-wrap">
            <span class="feather-icon">
              <feather-icon name="settings" />
            </span>
        </span>
    </div>
</template>
Class Values
class="avatar avatar-[value]" xxxl / xxl / xl / lg / md / xs / xxs
Avatar color option

Add color classes like .avatar-primary,.avatar-info with avatar.

PR
PR
PR
PR
PR
PR
PR
PR
PR
							
                                
<template>
    <div class="avatar avatar-primary avatar-rounded">
        <span class="initial-wrap">PR</span>
    </div>
</template>
Class Values
class="avatar avatar-[value]" primary / success / warning / danger / info / red / green / pink / purple / violet / indigo / blue / sky / cyan / teal / neon / lime / sun / yellow / orange / pumpkin / brown / grey / gold / smoke / light / dark
Avatar soft

Add soft color classes like.avatar .avatar-soft-* for soft colors.

PR
PR
PR
PR
PR
PR
PR
PR
PR
							
                                
<template>
    <div class="avatar avatar-soft-primary avatar-rounded">
        <span class="initial-wrap">PR</span>
    </div>
</template>
Class Values
class="avatar avatar-soft-[value]" primary / success / warning / danger / info / red / green / pink / purple / violet / indigo / blue / sky / cyan / teal / neon / lime / sun / yellow / orange / pumpkin / brown / grey / gold / smoke / light / dark
Avatar with logo

Use .avatar-logo with avatar.

							
                                
<script setup>
import logo from '@/img_src/logo.jpg'
</script>

<template>
    <div class="avatar avatar-logo avatar-rounded avatar-xl">
        <span class="initial-wrap">
            <img :src="logo" alt="logo">
        </span>
    </div>
</template>
Class Values
class="avatar avatar-[value]" xxxl / xxl / xl / lg / md / xs / xxs
Groups

In need of an avatar, but not the image avatar? Replace the default modifier class with avatar-group avatar-group-* ones to create avatar with name initials.

user
user
user
RD
user
user
user
RD
user
user
user
							
                                
<script setup>
import HkTooltip from '@/components/@hk-tooltip/HkTooltip.vue'
import avatar1 from '@/img_src/avatar1.jpg'
import avata2 from '@/img_src/avatar2.jpg'
import avatar3 from '@/img_src/avatar3.jpg'
</script>

<template>
    <div class="avatar-group">
        <div class="avatar avatar-rounded">
            <HkTooltip title="Tooltip text">
                <img :src="avatar1" alt="user" class="avatar-img">
            </HkTooltip>
        </div>
        <div class="avatar avatar-rounded">
            <HkTooltip title="Tooltip text">
                <img :src="avatar2" alt="user" class="avatar-img">
            </HkTooltip>
        </div>
        <div class="avatar avatar-rounded">
            <HkTooltip title="Tooltip text">
                <img :src="avatar3" alt="user" class="avatar-img">
            </HkTooltip>
        </div>
        <HkTooltip title="Tooltip text">
            <div class="avatar avatar-primary avatar-rounded">
                <span class="initial-wrap"><span>RD</span></span>
            </div>
        </HkTooltip>
    </div>
</template>
Class Values
class="avatar-group avatar-group-[value]" lg / sm
Overlapped Avatar Group

For overlapped group of avatars replace default modifier class with .avatar-group-overlapped.

user
user
user
RD
user
user
user
RD
user
user
user
							
                                
<script setup>
import HkTooltip from '@/components/@hk-tooltip/HkTooltip.vue'
import avatar1 from '@/img_src/avatar1.jpg'
import avata2 from '@/img_src/avatar2.jpg'
import avatar3 from '@/img_src/avatar3.jpg'
</script>

<template>
    <div class="avatar-group avatar-group-overlapped">
        <div class="avatar avatar-rounded">
            <HkTooltip title="Tooltip text">
                <img :src="avatar1" alt="user" class="avatar-img">
            </HkTooltip>
        </div>
        <div class="avatar avatar-rounded">
            <HkTooltip title="Tooltip text">
                <img :src="avatar2" alt="user" class="avatar-img">
            </HkTooltip>
        </div>
        <div class="avatar avatar-rounded">
            <HkTooltip title="Tooltip text">
                <img :src="avatar3" alt="user" class="avatar-img">
            </HkTooltip>
        </div>
        <HkTooltip title="Tooltip text">
            <div class="avatar avatar-soft-primary avatar-rounded">
                <span class="initial-wrap">
                    <span>RD</span>
                </span>
            </div>
        </HkTooltip>
    </div>
</template>
Class Values
class="avatar-group avatar-group-overlapped avatar-group-[value]" lg / sm
Jump to