Velvet - Avatars

Avatar Sizes

Avatars of different sizes

Classes :	`.avatar-[size]`
Values :	xs, sm , md , lg , xl , xxl


  <span className="avatar avatar-xs me-2">
  <img src="../../../assets/images/faces/4.jpg" alt="img"/>
</span>
<span className="avatar avatar-sm me-2">
  <img src="../../../assets/images/faces/5.jpg" alt="img"/>
</span>
<span className="avatar avatar-md me-2">
  <img src="../../../assets/images/faces/6.jpg" alt="img"/>
</span>
<span className="avatar avatar-lg me-2">
  <img src="../../../assets/images/faces/7.jpg" alt="img"/>
</span>
<span className="avatar avatar-xl me-2">
  <img src="../../../assets/images/faces/8.jpg" alt="img"/>
</span>
<span className="avatar avatar-xxl me-2">
  <img src="../../../assets/images/faces/9.jpg" alt="img"/>
</span>

Avatars

Without radius :	`.avatar.avatar-radius-0`
With Radius :	`.avatar`
Round Avatar :	`.avatar.avatar-rounded`


<span className="avatar me-2 avatar-radius-0">
<img src="../../../assets/images/faces/1.jpg" alt="img"/>
</span>
<span className="avatar me-2">
<img src="../../../assets/images/faces/2.jpg" alt="img"/>
</span>
<span className="avatar me-2 avatar-rounded">
<img src="../../../assets/images/faces/3.jpg" alt="img"/>
</span>

Avatar With Icons

Avatar contains icons to perform respective action.

Class Name : .badge.number-badge


 <span className="avatar avatar-xs me-2 avatar-rounded">
 <img src="../../../assets/images/faces/2.jpg" alt="img"/>
 <a aria-label="anchor" href="#!" className="badge bg-success
  rounded-pill avatar-badge"><i className="fe fe-camera"></i></a>
</span>
<span className="avatar avatar-sm me-2 avatar-rounded">
 <img src="../../../assets/images/faces/3.jpg" alt="img"/>
 <a aria-label="anchor" href="#!" className="badge rounded-pill
  bg-secondary avatar-badge"><i className="fe fe-edit"></i></a>
</span>
<span className="avatar avatar-md me-2 avatar-rounded">
 <img src="../../../assets/images/faces/14.jpg" alt="img"/>
 <a aria-label="anchor" href="#!" className="badge rounded-pill
  bg-warning avatar-badge"><i className="fe fe-plus"></i></a>
</span>
<span className="avatar avatar-lg me-2 avatar-rounded">
 <img src="../../../assets/images/faces/13.jpg" alt="img"/>
 <a aria-label="anchor" href="#!" className="badge rounded-pill
  bg-info avatar-badge"><i className="fe fe-edit"></i></a>
</span>
<span className="avatar avatar-xl me-2 avatar-rounded">
 <img src="../../../assets/images/faces/15.jpg" alt="img"/>
 <a aria-label="anchor" href="#!" className="badge rounded-pill
  bg-success avatar-badge"><i className="fe fe-camera"></i></a>
</span>
<span className="avatar avatar-xxl me-2 avatar-rounded">
 <img src="../../../assets/images/faces/9.jpg" alt="img"/>
 <a aria-label="anchor" href="#!" className="badge rounded-pill
  bg-danger avatar-badge"><i className="fe fe-plus"></i></a>
</span>

Avatar With Ofline Status Indicators

avatars having a offline status indicator.

Class Name : .avatar.offline


 <span className="avatar avatar-xs me-2 offline avatar-rounded">
<img src="../../../assets/images/faces/2.jpg" alt="img"/>
</span>
<span className="avatar avatar-sm offline me-2 avatar-rounded">
<img src="../../../assets/images/faces/3.jpg" alt="img"/>
</span>
<span className="avatar avatar-md me-2 offline avatar-rounded">
<img src="../../../assets/images/faces/4.jpg" alt="img"/>
</span>
<span className="avatar avatar-lg me-2 offline avatar-rounded">
<img src="../../../assets/images/faces/5.jpg" alt="img"/>
</span>
<span className="avatar avatar-xl me-2 offline avatar-rounded">
<img src="../../../assets/images/faces/6.jpg" alt="img"/>
</span>
<span className="avatar avatar-xxl me-2 offline avatar-rounded">
<img src="../../../assets/images/faces/7.jpg" alt="img"/>
</span>

Avatar With Online Status Indicators

avatars having online status indicator.

Class Name : .avatar.online


<span className="avatar avatar-xs me-2 online avatar-rounded">
<img src="../../../assets/images/faces/8.jpg" alt="img"/>
</span>
<span className="avatar avatar-sm online me-2 avatar-rounded">
<img src="../../../assets/images/faces/10.jpg" alt="img"/>
</span>
<span className="avatar avatar-md me-2 online avatar-rounded">
<img src="../../../assets/images/faces/12.jpg" alt="img"/>
</span>
<span className="avatar avatar-lg me-2 online avatar-rounded">
<img src="../../../assets/images/faces/13.jpg" alt="img"/>
</span>
<span className="avatar avatar-xl me-2 online avatar-rounded">
<img src="../../../assets/images/faces/14.jpg" alt="img"/>
</span>
<span className="avatar avatar-xxl me-2 online avatar-rounded">
<img src="../../../assets/images/faces/15.jpg" alt="img"/>
</span>

Avatars With Number Badges

Avatar numbers indicates the no. of unread notififactions/messages.

Class Name : .badge.number-badge


  <span className="avatar avatar-xs me-2 avatar-rounded">
<img src="../../../assets/images/faces/2.jpg" alt="img"/>
<span className="badge rounded-pill bg-primary avatar-badge">2</span>
</span>
<span className="avatar avatar-sm me-2 avatar-rounded">
<img src="../../../assets/images/faces/3.jpg" alt="img"/>
<span className="badge rounded-pill bg-secondary avatar-badge">5</span>
</span>
<span className="avatar avatar-md me-2 avatar-rounded">
<img src="../../../assets/images/faces/14.jpg" alt="img"/>
<span className="badge rounded-pill bg-warning avatar-badge">1</span>
</span>
<span className="avatar avatar-lg me-2 avatar-rounded">
<img src="../../../assets/images/faces/13.jpg" alt="img"/>
<span className="badge rounded-pill bg-info avatar-badge">7</span>
</span>
<span className="avatar avatar-xl me-2 avatar-rounded">
<img src="../../../assets/images/faces/15.jpg" alt="img"/>
<span className="badge rounded-pill bg-success avatar-badge">3</span>
</span>
<span className="avatar avatar-xxl me-2 avatar-rounded">
<img src="../../../assets/images/faces/9.jpg" alt="img"/>
<span className="badge rounded-pill bg-danger avatar-badge">9</span>
</span>

Stacked Avatars

Group of avatars stacked together.

Class Name : .avatar-list-stacked for parent div


    <div className="avatar-list-stacked">
 <span className="avatar">
     <img src="../../../assets/images/faces/2.jpg" alt="img"/>
 </span>
 <span className="avatar">
     <img src="../../../assets/images/faces/8.jpg" alt="img"/>
 </span>
 <span className="avatar">
     <img src="../../../assets/images/faces/2.jpg" alt="img"/>
 </span>
 <span className="avatar">
     <img src="../../../assets/images/faces/10.jpg" alt="img"/>
 </span>
 <span className="avatar">
     <img src="../../../assets/images/faces/4.jpg" alt="img"/>
 </span>
 <span className="avatar">
     <img src="../../../assets/images/faces/13.jpg" alt="img"/>
 </span>
 <a className="avatar bg-primary text-fixed-white" href="#!">
     +8
 </a>
</div>

Rounded Stacked Avatars

Group of avatars stacked together.

Class Name : .avatar-list-stacked for parent div & .avatar-rounded for .avatar


  <div className="avatar-list-stacked">
<span className="avatar avatar-rounded">
    <img src="../../../assets/images/faces/2.jpg" alt="img"/>
</span>
<span className="avatar avatar-rounded">
    <img src="../../../assets/images/faces/8.jpg" alt="img"/>
</span>
<span className="avatar avatar-rounded">
    <img src="../../../assets/images/faces/2.jpg" alt="img"/>
</span>
<span className="avatar avatar-rounded">
    <img src="../../../assets/images/faces/10.jpg" alt="img"/>
</span>
<span className="avatar avatar-rounded">
    <img src="../../../assets/images/faces/4.jpg" alt="img"/>
</span>
<span className="avatar avatar-rounded">
    <img src="../../../assets/images/faces/13.jpg" alt="img"/>
</span>
<a className="avatar bg-primary avatar-rounded text-fixed-white" href="#!">
    +8
</a>
 </div>

Avatar With Initials

Avatar contains intials when user profile doesn't exist.

xsSMMDLGXLXXL


<span className="mb-1 avatar avatar-xs me-2 bg-primary">
 xs
 </span>
 <span className="mb-1 avatar avatar-sm me-2 bg-secondary">
 SM
 </span>
 <span className="mb-1 avatar avatar-md me-2 bg-warning">
 MD
 </span>
 <span className="mb-1 avatar avatar-lg me-2 bg-danger">
 LG
 </span>
 <span className="mb-1 avatar avatar-xl me-2 bg-success">
 XL
 </span>
 <span className="mb-1 avatar avatar-xxl me-2 bg-info">
 XXL
 </span>

Rounded Avatar With Initials

Avatar contains intials when user profile doesn't exist.

xsSMMDLGXLXXL


<span className="avatar avatar-rounded avatar-xs me-2 bg-primary">
  xs
</span>
<span className="avatar avatar-rounded avatar-sm me-2 bg-secondary">
  SM
</span>
<span className="avatar avatar-rounded avatar-md me-2 bg-warning">
  MD
</span>
<span className="avatar avatar-rounded avatar-lg me-2 bg-danger">
  LG
</span>
<span className="avatar avatar-rounded avatar-xl me-2 bg-success">
  XL
</span>
<span className="avatar avatar-rounded avatar-xxl me-2 bg-info">
  XXL
</span>

Switcher

Avatars