DashByte - Premium Dashboard Template

Components

Avatars

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

Default Functionality

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

<div class="avatar"><img src="../assets/img/img1.jpg" alt=""></div>

Sizes

An avatar can have different sizes like larger and smaller avatar.

<a href="" class="avatar avatar-xs"><img src="" alt=""></a>
<a href="" class="avatar avatar-sm"><img src="" alt=""></a>
<a href="" class="avatar"><img src="" alt=""></a>
<a href="" class="avatar avatar-lg"><img src="" alt=""></a>
<a href="" class="avatar avatar-xl"><img src="" alt=""></a>

Shapes

An avatar can have different shapes by using Bootstrap's border-radius utilities classes.

<a href="" class="avatar"><img src="" alt=""></a>
<a href="" class="avatar avatar-rounded"><img src="" alt=""></a>

Initials

An avatar can have a temporary use of user's initial name while their photos are not yet available.

<a href="" class="avatar"><span class="avatar-initial">s</span></a>

Status Indicator

An avatar can have a status indicator to indicate users availability.