# Avatars

A set of CSS utility classes to format single avatars, groups of avatars and add badges to avatars.

###

Basic Usage

    <img class="avatar" src="assets/img/avatars/female-3.jpg" alt="Avatar" />

`.avatar`

  Apply to `<img>` to format as an avatar

###

Sizes

avatar-xs
avatar-sm
avatar
avatar-lg
avatar-xl

    <img class="avatar avatar-xs" src="assets/img/avatars/female-3.jpg" alt="Avatar" />
    <img class="avatar avatar-sm" src="assets/img/avatars/female-3.jpg" alt="Avatar" />
    <img class="avatar avatar" src="assets/img/avatars/female-3.jpg" alt="Avatar" />
    <img class="avatar avatar-lg" src="assets/img/avatars/female-3.jpg" alt="Avatar" />
    <img class="avatar avatar-xl" src="assets/img/avatars/female-3.jpg" alt="Avatar" />

`.avatar-xs`

  Apply to `.avatar` to greatly reduce default size

`.avatar-sm`

  Apply to `.avatar` to reduce default size

`.avatar-lg`

  Apply to `.avatar` to increase default size

`.avatar-xl`

  Apply to `.avatar` to greatly increase default size

###

Group

    <ul class="avatar-group">
      <li>
        <img class="avatar" src="assets/img/avatars/female-1" alt="Avatar">
      </li>
      <li>
        <img class="avatar" src="assets/img/avatars/male-2" alt="Avatar">
      </li>
      <li>
        <img class="avatar" src="assets/img/avatars/female-3" alt="Avatar">
      </li>
      <li>
        <img class="avatar" src="assets/img/avatars/male-4" alt="Avatar">
      </li>
    </ul>

`.avatar-group`

  Apply to `<ul>` to to format `<li>` and `<img.avatar>` children as an overlapping group

###

Badges

    <div class="mr-2 mb-2">
        <div class="avatar-container">
            <img alt="Avatar" class="avatar avatar-sm" src="assets/img/avatars/female-1.jpg">
            <div class="badge badge-danger"></div>
        </div>
    </div>
    <div class="mr-2 mb-2">
        <div class="avatar-container">
            <img alt="Avatar" class="avatar" src="assets/img/avatars/female-3.jpg">
            <div class="badge badge-success"></div>
        </div>
    </div>
    <div class="mr-2 mb-2">
        <div class="avatar-container">
            <img alt="Avatar" class="avatar avatar-lg" src="assets/img/avatars/male-3.jpg">
            <div class="badge badge-warning"></div>
        </div>
    </div>
    <div class="mr-2 mb-2">
        <div class="avatar-container">
            <img alt="Avatar" class="avatar avatar-xl" src="assets/img/avatars/male-2.jpg">
            <div class="badge badge-pill badge-primary p-0">
                <img alt="Verified" class="icon icon-xs m-2 bg-white" data-inject-svg src="assets/img/icons/interface/icon-check.svg">
            </div>
        </div>
    </div>

`.avatar-container`

  Apply to `<div>` containing `<img.avatar>` followed directly by `<div.badge>` to overlay badge on avatar