Getting started
Layouts
Styles
Helpers
Elements
Components
Organisms
Templates
Other

Avatars

The avatar component is used to control the size and border radius of responsive images, typically used to show profile pictures.

Class name Type Description
hx-avatar Component Container element
has-icon Modifier For usage with icons
is-outlined Modifier Colored border with transparent background
is-tile Modifier Square
is-small Modifier Small size
is-large Modifier Large size

Refer to Colours section to apply background and text colours.

Basic avatar

      <div class="container">
  <div class="hx-avatar" style="background-image: url(/_nuxt/img/default-avatar-business-bear.c130ff5.png)"></div>
  <div class="hx-avatar" style="background-image: url(/_nuxt/img/0223.36d58b8.jpg)"></div>
  <div class="hx-avatar" style="background-image: url(/_nuxt/img/frenchie.0cb174a.jpg)"></div>
  <div class="hx-avatar hx-bg-white">JP</div>
  <div class="hx-avatar hx-bg-light">CB</div>
  <div class="hx-avatar hx-bg-black">J</div>
</div>
JP
CB
J

Icon avatar

      <div class="container">
  <div class="hx-avatar hx-bg-danger has-icon">
    <i class="hx-icon icon-pulse"></i>
  </div>
  <div class="hx-avatar hx-bg-warning has-icon">
    <i class="hx-icon icon-wine"></i>
  </div>
  <div class="hx-avatar hx-bg-success has-icon">
    <i class="hx-icon icon-medications"></i>
  </div>
  <div class="hx-avatar hx-bg-info has-icon">
    <i class="hx-icon icon-carrot"></i>
  </div>
</div>

Outlined avatar

      <div class="container">
  <div class="hx-avatar is-caution is-outlined is-text-black">J</div>
  <div class="hx-avatar is-outlined is-lighter">CB</div>
  <div class="hx-avatar is-primary is-outlined has-icon">
    <i class="hx-icon icon-pulse"></i>
  </div>
  <div class="hx-avatar is-danger is-outlined has-icon">
    <i class="hx-icon icon-wine"></i>
  </div>
  <div class="hx-avatar is-warning is-outlined has-icon">
    <i class="hx-icon icon-medications"></i>
  </div>
  <div class="hx-avatar is-caution is-outlined has-icon">
    <i class="hx-icon icon-carrot"></i>
  </div>
</div>
J
CB

Tiled avatar

      <div class="container">
  <div class="hx-avatar is-tile" style="background-image: url(/_nuxt/img/default-avatar-business-bear.c130ff5.png"></div>
  <div class="hx-avatar is-tile" style="background-image: url(/_nuxt/img/0223.36d58b8.jpg)"></div>
  <div class="hx-avatar is-tile" style="background-image: url(/_nuxt/img/frenchie.0cb174a.jpg)"></div>
  <div class="hx-avatar is-tile hx-bg-white">JP</div>
  <div class="hx-avatar is-tile hx-bg-light">CB</div>
  <div class="hx-avatar is-tile hx-bg-black">J</div>
  <div class="hx-avatar hx-bg-danger is-tile has-icon">
    <i class="hx-icon icon-pulse"></i>
  </div>
  <div class="hx-avatar hx-bg-warning is-tile has-icon">
    <i class="hx-icon icon-wine"></i>
  </div>
  <div class="hx-avatar hx-bg-success is-tile has-icon">
    <i class="hx-icon icon-medications"></i>
  </div>
  <div class="hx-avatar is-info is-tile is-outlined has-icon">
    <i class="hx-icon icon-carrot"></i>
  </div>
</div>
JP
CB
J

Small avatar

      <div class="container">
  <div class="hx-avatar is-small" style="background-image: url(/_nuxt/img/default-avatar-business-bear.c130ff5.png)"></div>
  <div class="hx-avatar is-small" style="background-image: url(/_nuxt/img/0223.36d58b8.jpg)"></div>
  <div class="hx-avatar is-small is-tile" style="background-image: url(/_nuxt/img/frenchie.0cb174a.jpg)"></div>
  <div class="hx-avatar is-small hx-bg-white">JP</div>
  <div class="hx-avatar is-small is-tile hx-bg-light">CB</div>
  <div class="hx-avatar is-small hx-bg-black">J</div>
  <div class="hx-avatar is-small hx-bg-danger has-icon">
    <i class="hx-icon icon-pulse"></i>
  </div>
  <div class="hx-avatar is-small hx-bg-warning has-icon">
    <i class="hx-icon icon-wine"></i>
  </div>
  <div class="hx-avatar is-small is-tile hx-bg-success has-icon">
    <i class="hx-icon icon-medications"></i>
  </div>
  <div class="hx-avatar is-small is-info is-outlined has-icon">
    <i class="hx-icon icon-carrot"></i>
  </div>
</div>
JP
CB
J

Large avatar

      <div class="container">
  <div class="hx-avatar is-large" style="background-image: url(/_nuxt/img/default-avatar-business-bear.c130ff5.png)"></div>
  <div class="hx-avatar is-large" style="background-image: url(/_nuxt/img/0223.36d58b8.jpg)"></div>
  <div class="hx-avatar is-large" style="background-image: url(/_nuxt/img/frenchie.0cb174a.jpg)"></div>
  <div class="hx-avatar is-large hx-bg-white">JP</div>
  <div class="hx-avatar is-large hx-bg-light">CB</div>
  <div class="hx-avatar is-large hx-bg-black">J</div>
  <div class="hx-avatar is-large hx-bg-danger has-icon">
    <i class="hx-icon icon-pulse"></i>
  </div>
  <div class="hx-avatar is-large hx-bg-warning has-icon">
    <i class="hx-icon icon-wine"></i>
  </div>
  <div class="hx-avatar is-large hx-bg-success has-icon">
    <i class="hx-icon icon-medications"></i>
  </div>
  <div class="hx-avatar is-large is-info is-outlined has-icon">
    <i class="hx-icon icon-carrot"></i>
  </div>
</div>
JP
CB
J