Avatar

Since v1.2.0

View source

<figure class="c-avatar c-avatar--large">
  <img src="/img/undraw_female_avatar.svg" alt="avatar" />
</figure>
<figure class="c-avatar">
  <img src="/img/undraw_male_avatar.svg" alt="avatar" />
</figure>
<figure class="c-avatar c-avatar--small">
  <img src="/img/undraw_female_avatar.svg" alt="avatar" />
</figure>

Placeholder

Using the data-placeholder attribute can be usefull to show basic information when image is unavailable or not loaded.

<figure className="c-avatar c-avatar--large" data-placeholder="AB"></figure>
<figure className="c-avatar c-avatar" data-placeholder="CD"></figure>
<figure className="c-avatar c-avatar--small" data-placeholder="EF"></figure>

Indicators

The color of indicators are set with a special modifier class to simplify naming :

• success (green) fro available/online state
• danger (red) for busy/unavailable state
• warning (orange) for absent/away state
• light (gray) for offline state

<figure class="c-avatar c-avatar--large">
  <img src="/img/undraw_female_avatar.svg" alt="avatar" />
  <i class="c-avatar__indicator u-bg-success"></i>
</figure>
<figure class="c-avatar">
  <img src="/img/undraw_male_avatar.svg" alt="avatar" />
  <i class="c-avatar__indicator u-bg-danger"></i>
</figure>
<figure class="c-avatar c-avatar--small">
  <img src="/img/undraw_female_avatar.svg" alt="avatar" />
  <i class="c-avatar__indicator u-bg-warning"></i>
</figure>
<figure class="c-avatar">
  <img src="/img/undraw_male_avatar.svg" alt="avatar" />
  <i class="c-avatar__indicator u-bg-light"></i>
</figure>

Customization

Colors can be overridden with utilities classes for placeholder or indicator.

<figure
  class="c-avatar c-avatar--large u-bg-secondary u-c-white"
  data-placeholder="AB"
></figure>
<figure
  class="c-avatar c-avatar--large u-bg-light u-c-dark"
  data-placeholder="AB"
></figure>
<figure class="c-avatar c-avatar--large ">
  <img src="/img/undraw_female_avatar.svg" alt="avatar" />
  <i class="c-avatar__indicator u-bg-secondary"></i>
</figure>