Avatar

Avatars are user's face image that you can use throughout the design from tables to dialog or menus with options of sizes, shapes, status, initial options and group.

Sizes

Avatar has 6 different sizes to use with the template. An avatar can have different sizes like larger and smaller avatar. Use .avatar class to add avatar style image.

Preview
HTML

<div class="avatar avatar-xs me-2">
  <img src="..." alt="Avatar" class="rounded-circle">
</div>
<div class="avatar avatar-sm me-2">
  <img src="..." alt="Avatar" class="rounded-circle">
</div>
<div class="avatar me-2">
  <img src="..." alt="Avatar" class="rounded-circle">
</div>
<div class="avatar avatar-md me-2">
  <img src="..." alt="Avatar" class="rounded-circle">
</div>
<div class="avatar avatar-lg me-2">
  <img src="..." alt="Avatar" class="rounded-circle">
</div>
<div class="avatar avatar-xl me-2">
  <img src="..." alt="Avatar" class="rounded-circle">
</div>

Class	Value
`class="avatar avatar-{size}"`	xs \| sm \| md \| lg \| xl

Here is avatar size mixin which allow you to easily create avatar with different sizes.

@mixin template-avatar-style($height,$width,$font-size,$status-indicator-position:2px)

@include template-avatar-style("avatar-height", "avatar-width", "avatar-initial-font-size", "status-indicator-position");

Shapes

An avatar can have different shapes by using Bootstrap's border-radius utilities classes .rounded-circle and .rounded. Don't use any class for basic square shape avatar.

Preview
HTML

<div class="avatar me-2">
  <img src="..." alt="Avatar" class="rounded-circle">
</div>
<div class="avatar me-2">
  <img src="..." alt="Avatar" class="rounded-3">
</div>
<div class="avatar">
  <img src="..." alt="Avatar">
</div>

Initials

An avatar can have a temporary use of user's initial name while their photos are not yet available. Use .avatar-initial class to add avatar initial when no avatar image.

Preview
HTML

<div class="avatar avatar-xs me-2">
  <span class="avatar-initial rounded-circle bg-secondary">pi</span>
</div>
<div class="avatar avatar-sm me-2">
  <span class="avatar-initial rounded-circle bg-success">pi</span>
</div>
<div class="avatar me-2">
  <span class="avatar-initial rounded-circle bg-danger">pi</span>
</div>
<div class="avatar avatar-md me-2">
  <span class="avatar-initial rounded-circle bg-info">pi</span>
</div>
<div class="avatar avatar-lg me-2">
  <span class="avatar-initial rounded-circle bg-warning">pi</span>
</div>
<div class="avatar avatar-xl me-2">
  <span class="avatar-initial rounded-circle bg-primary">pi</span>
</div>

Class	Value
`class="avatar-initial bg-{color}"`	primary \| secondary \| success \| danger \| warning \| info \| dark

<div class="avatar avatar-xs me-2">
  <span class="avatar-initial rounded-circle bg-label-secondary">pi</span>
</div>
<div class="avatar avatar-sm me-2">
  <span class="avatar-initial rounded-circle bg-label-success">pi</span>
</div>
<div class="avatar me-2">
  <span class="avatar-initial rounded-circle bg-label-danger">pi</span>
</div>
<div class="avatar avatar-md me-2">
  <span class="avatar-initial rounded-circle bg-label-info">pi</span>
</div>
<div class="avatar avatar-lg me-2">
  <span class="avatar-initial rounded-circle bg-label-warning">pi</span>
</div>
<div class="avatar avatar-xl me-2">
  <span class="avatar-initial rounded-circle bg-label-primary">pi</span>
</div>

Class	Value
`class="avatar-initial bg-label-{color}"`	primary \| secondary \| success \| danger \| warning \| info \| dark

Status

To show status of the users, we have provided status indicators. An avatar can have a status indicator to indicate users availability.

Preview
HTML

<div class="avatar me-2 avatar-online">
  <img src="..." alt="Avatar" class="rounded-circle">
</div>
<div class="avatar me-2 avatar-away">
  <img src="..." alt="Avatar" class="rounded-circle">
</div>
<div class="avatar me-2 avatar-busy">
  <img src="..." alt="Avatar" class="rounded-circle">
</div>
<div class="avatar avatar-offline">
  <img src="..." alt="Avatar" class="rounded-circle">
</div>

Class	Value
`class="avatar avatar-{status}"`	online \| away \| busy \| offline

Groups

Include multiple avatar items inside an .avatar-group wrapper. You can also create list of the avatars.

Preview
HTML

<div class="avatar-group">
  <div class="avatar">
    <img src="..." alt="Avatar" class="rounded-circle">
  </div>
  <div class="avatar">
    <img src="..." alt="Avatar" class="rounded-circle">
  </div>
  <div class="avatar">
    <img src="..." alt="Avatar" class="rounded-circle">
  </div>
  <div class="avatar">
    <img src="..." alt="Avatar" class="rounded-circle">
  </div>
</div>

Pull up Groups

To hover animation of avatar group, you need .pull-up class with avatar <img> tag.

Preview
HTML

<div class="avatar-group">
  <div class="avatar">
    <img src="..." alt="Avatar" class="rounded-circle pull-up">
  </div>
  <div class="avatar">
    <img src="..." alt="Avatar" class="rounded-circle pull-up">
  </div>
  <div class="avatar">
    <img src="..." alt="Avatar" class="rounded-circle pull-up">
  </div>
  <div class="avatar">
    <img src="..." alt="Avatar" class="rounded-circle pull-up">
  </div>
</div>

You can also show avatar tooltip, when you hover on avatar.

Preview
HTML

<ul class="list-unstyled avatar-group">
  <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Vinnie Mostowy" class="avatar pull-up">
    <img class="rounded-circle" src="..." alt="Avatar">
  </li>
  <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Allen Rieske" class="avatar pull-up">
    <img class="rounded-circle" src="..." alt="Avatar">
  </li>
  <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Julee Rossignol" class="avatar pull-up">
    <img class="rounded-circle" src="..." alt="Avatar">
  </li>
  <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Darcey Nooner" class="avatar pull-up">
    <img class="rounded-circle" src="..." alt="Avatar">
  </li>
</ul>

Groups with count

You can also show avatar group with count. Add count initial at first as that will reverse this group options.

Preview
HTML

<div class="d-flex avatar-group mb-4 mt-4">
  <div class="avatar">
    <img src="assets/img/avatars/5.png" alt="Avatar" class="rounded-circle pull-up">
  </div>
  <div class="avatar">
    <img src="assets/img/avatars/12.png" alt="Avatar" class="rounded-circle pull-up">
  </div>
  <div class="avatar">
    <img src="assets/img/avatars/6.png" alt="Avatar" class="rounded-circle pull-up">
  </div>
  <div class="avatar">
    <span class="avatar-initial rounded-circle pull-up text-body" data-bs-toggle="tooltip" data-bs-placement="bottom" title="3 more">+3</span>
  </div>
</div>

Variables

Refer below mentioned for all the variables of avatar

Variable	Description
`$avatar-size-xl`	Variable for Extra Large size avatars
`$avatar-size-lg`	Variable for Large size avatars
`$avatar-size-md`	Variable for Medium size avatars
`$avatar-size`	Variable for default size avatars
`$avatar-size-sm`	Variable for Small size avatars
`$avatar-size-xs`	Variable for Extra Small size avatars
`$avatar-initial-xl`	Variable for Extra Lart size avatar initials
`$avatar-initial-lg`	Variable for Large size avatar initials
`$avatar-initial-md`	Variable for Medium size avatar initials
`$avatar-initial`	Variable for Default size avatar initials
`$avatar-initial-sm`	Variable for Small size avatar initials
`$avatar-initial-xs`	Variable for Extra Small size avatar initials
`$avatar-group-border`	Variable for avatar group border color