Avatars

Default

A
<span class="avatar">A</span>

Too avatars works if you give the class to an <a> tag.

A
<a class="avatar" href="#">A</a>

Types

A SQ
<!-- Default -->
<span class="avatar">A</span>

<!-- Square -->
<span class="avatar avatar-square">SQ</span>

Avatar with Image

<span class="avatar">
  <img src="/assets/img/avatar-01.jpeg">
</span>

Sizes

XL L M S XS
<!-- Extra Large -->
<span class="avatar avatar-x-large">XL</span>

<!-- Large -->
<span class="avatar avatar-large">L</span>

<!-- Default (Medium) -->
<span class="avatar">M</span>

<!-- Small -->
<span class="avatar avatar-small">S</span>

<!-- Extra Small -->
<span class="avatar avatar-x-small">XS</span>

Avatars Status

A XS
<span class="avatar avatar-x-large avatar-status avatar-status-on">
  <img src="/assets/img/avatar.jpeg">
</span>

<span class="avatar avatar-large avatar-status avatar-status-null">
  <img src="/assets/img/avatar-01.jpeg">
</span>

<span class="avatar avatar-status avatar-status-null">
  A
</span>

<span class="avatar avatar-small avatar-status avatar-status-off">
  <img src="/assets/img/avatar-02.jpeg">
</span>

<span class="avatar avatar-x-small avatar-status avatar-status-off">
  XS
</span>
A XS
<!-- Status on Square Avatars -->
<span class="avatar avatar-square avatar-x-large avatar-status avatar-status-on">
  <img src="/assets/img/avatar.jpeg">
</span>

<span class="avatar avatar-square avatar-large avatar-status avatar-status-null">
  <img src="/assets/img/avatar-01.jpeg">
</span>

<span class="avatar avatar-square avatar-status avatar-status-null">
  A
</span>

<span class="avatar avatar-square avatar-small avatar-status avatar-status-off">
  <img src="/assets/img/avatar-02.jpeg">
</span>

<span class="avatar avatar-square avatar-x-small avatar-status avatar-status-off">
  XS
</span>

Avatar Box

Milton Olaf
Trying to make the web fast, highly readable, 100% responsive, and easy to navigate.
<div class="row">
  <div class="col-md-6">
    <div class="avatar-box">
      <span class="avatar avatar-small avatar-status avatar-status-on">
        <img src="/assets/img/avatar-02.jpeg">
      </span>
      <div class="avatar-box-content">
        <div class="avatar-box-content-primary">
          Milton Olaf
        </div>
        <div class="avatar-box-content-secondary">
          Trying to make the web fast, highly readable, 100% responsive, and easy to navigate.
        </div>
      </div>
    </div>
  </div>
</div>

Avatars Group

XS S M L
<!-- Group of same sizes -->
<div class="avatar-group">
  <span class="avatar">
    <img src="/assets/img/avatar-01.jpeg">
  </span>
  <span class="avatar">
    <img src="/assets/img/avatar.jpeg">
  </span>
  <span class="avatar">
    <img src="/assets/img/avatar-02.jpeg">
  </span>
</div>

<!-- Group of differents sizes -->
<div class="avatar-group">
  <span class="avatar avatar-x-small">XS</span>
  <span class="avatar avatar-small">S</span>
  <span class="avatar">M</span>
  <span class="avatar avatar-large">L</span>
  <span class="avatar avatar-x-large">
    <img src="/assets/img/avatar-02.jpeg">
  </span>
</div>