Avatars

Avatars are useful for chat UIs, profile pictures and account photos.

<blaze-avatar size="super"
              alt="placeholder"
              src="https://unsplash.it/200/?image=823"
              alt-2="placeholder"
              src-2="https://unsplash.it/200/?image=815">
</blaze-avatar>

Attributes

Name	Description
src: string	URL to the image to display
src-2: string	URL to the smaller secondary image
alt: string	Alternative text to the image
alt-2: string	Alternative text to the secondary image
size: string	The size of the Avatar
text: string	Text to display in the middle of the circle

CSS

<div class="c-avatar c-avatar u-super">
  <img class="c-avatar__img" alt="placeholder" src="http://via.placeholder.com/1024x963/3B6DC6/FFF">
</div>
<div class="c-avatar c-avatar u-xlarge">
  <img class="c-avatar__img" alt="placeholder" src="http://via.placeholder.com/1024x963/3B6DC6/FFF">
</div>
<div class="c-avatar c-avatar u-large">
  <img class="c-avatar__img" alt="placeholder" src="http://via.placeholder.com/1024x963/3B6DC6/FFF">
</div>
<div class="c-avatar">
  <img class="c-avatar__img" alt="placeholder" src="http://via.placeholder.com/1024x963/3B6DC6/FFF">
</div>
<div class="c-avatar c-avatar u-small">
  <img class="c-avatar__img" alt="placeholder" src="http://via.placeholder.com/1024x963/3B6DC6/FFF">
</div>
<div class="c-avatar c-avatar u-xsmall">
  <img class="c-avatar__img" alt="placeholder" src="http://via.placeholder.com/1024x963/3B6DC6/FFF">
</div>

2 Images

<div class="c-avatar c-avatar u-super">
  <img class="c-avatar__img" alt="placeholder" src="http://via.placeholder.com/1024x963/3B6DC6/FFF">
  <img class="c-avatar__img" alt="placeholder" src="http://via.placeholder.com/1024x963/BADA55/FFF">
</div>
<div class="c-avatar c-avatar u-xlarge">
  <img class="c-avatar__img" alt="placeholder" src="http://via.placeholder.com/1024x963/3B6DC6/FFF">
  <img class="c-avatar__img" alt="placeholder" src="http://via.placeholder.com/1024x963/BADA55/FFF">
</div>
<div class="c-avatar c-avatar u-large">
  <img class="c-avatar__img" alt="placeholder" src="http://via.placeholder.com/1024x963/3B6DC6/FFF">
  <img class="c-avatar__img" alt="placeholder" src="http://via.placeholder.com/1024x963/BADA55/FFF">
</div>
<div class="c-avatar">
  <img class="c-avatar__img" alt="placeholder" src="http://via.placeholder.com/1024x963/3B6DC6/FFF">
  <img class="c-avatar__img" alt="placeholder" src="http://via.placeholder.com/1024x963/BADA55/FFF">
</div>
<div class="c-avatar c-avatar u-small">
  <img class="c-avatar__img" alt="placeholder" src="http://via.placeholder.com/1024x963/3B6DC6/FFF">
  <img class="c-avatar__img" alt="placeholder" src="http://via.placeholder.com/1024x963/BADA55/FFF">
</div>
<div class="c-avatar c-avatar u-xsmall">
  <img class="c-avatar__img" alt="placeholder" src="http://via.placeholder.com/1024x963/3B6DC6/FFF">
  <img class="c-avatar__img" alt="placeholder" src="http://via.placeholder.com/1024x963/BADA55/FFF">
</div>

Initials

<div class="c-avatar c-avatar u-super" data-text="GP"></div>
<div class="c-avatar c-avatar u-xlarge" data-text="GP"></div>
<div class="c-avatar c-avatar u-large" data-text="GP"></div>
<div class="c-avatar c-avatar" data-text="GP"></div>
<div class="c-avatar c-avatar u-small" data-text="GP"></div>
<div class="c-avatar c-avatar u-xsmall" data-text="GP"></div>