Avatars

If there is no image the avatar icon is visible

Avatar

<div class="avatar">
  <img src="/images/avatar-icon.svg" alt="avatar" class="avatar__icon">
  <div class="avatar__image">
    <img src="image src here" alt="alt text here">
  </div>
</div>

Avatar medium

<div class="avatar avatar--med">
  <img src="/images/avatar-icon.svg" alt="avatar" class="avatar__icon">
  <div class="avatar__image">
    <img src="image src here" alt="alt text here">
  </div>
</div>

Avatar small

<div class="avatar avatar--small">
  <img src="/images/avatar-icon.svg" alt="avatar" class="avatar__icon">
  <div class="avatar__image">
    <img src="image src here" alt="alt text here">
  </div>
</div>

Avatar x small

<div class="avatar avatar--x-small">
  <img src="/images/avatar-icon.svg" alt="avatar" class="avatar__icon">
  <div class="avatar__image">
    <img src="image src here" alt="alt text here">
  </div>
</div>