Avatars

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

<div class="c-avatar u-super">
  <img class="c-avatar__img" src="https://source.unsplash.com/random/200x200">
</div>
<div class="c-avatar u-xlarge">
  <img class="c-avatar__img" src="https://source.unsplash.com/random/200x200">
</div>
<div class="c-avatar u-large">
  <img class="c-avatar__img" src="https://source.unsplash.com/random/200x200">
</div>
<div class="c-avatar">
  <img class="c-avatar__img" src="https://source.unsplash.com/random/200x200">
</div>
<div class="c-avatar u-small">
  <img class="c-avatar__img" src="https://source.unsplash.com/random/200x200">
</div>
<div class="c-avatar u-xsmall">
  <img class="c-avatar__img" src="https://source.unsplash.com/random/200x200">
</div> 

2 Images

<div class="c-avatar u-super">
  <img class="c-avatar__img" src="https://source.unsplash.com/random/200x200">
  <img class="c-avatar__img" src="https://source.unsplash.com/random/200x200">
</div>
<div class="c-avatar u-xlarge">
  <img class="c-avatar__img" src="https://source.unsplash.com/random/200x200">
  <img class="c-avatar__img" src="https://source.unsplash.com/random/200x200">
</div>
<div class="c-avatar u-large">
  <img class="c-avatar__img" src="https://source.unsplash.com/random/200x200">
  <img class="c-avatar__img" src="https://source.unsplash.com/random/200x200">
</div>
<div class="c-avatar">
  <img class="c-avatar__img" src="https://source.unsplash.com/random/200x200">
  <img class="c-avatar__img" src="https://source.unsplash.com/random/200x200">
</div>
<div class="c-avatar u-small">
  <img class="c-avatar__img" src="https://source.unsplash.com/random/200x200">
  <img class="c-avatar__img" src="https://source.unsplash.com/random/200x200">
</div>
<div class="c-avatar u-xsmall">
  <img class="c-avatar__img" src="https://source.unsplash.com/random/200x200">
  <img class="c-avatar__img" src="https://source.unsplash.com/random/200x200">
</div> 

Initials

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



<blaze-avatar size="super" src="https://source.unsplash.com/random/200x200"></blaze-avatar>
<blaze-avatar size="xlarge" src="https://source.unsplash.com/random/200x200"></blaze-avatar>
<blaze-avatar size="large" src="https://source.unsplash.com/random/200x200"></blaze-avatar>
<blaze-avatar src="https://source.unsplash.com/random/200x200"></blaze-avatar>
<blaze-avatar size="small" src="https://source.unsplash.com/random/200x200"></blaze-avatar>
<blaze-avatar size="xsmall" src="https://source.unsplash.com/random/200x200"></blaze-avatar>
<br>
<blaze-avatar text="GP" size="super"></blaze-avatar>
<blaze-avatar text="GP" size="xlarge"></blaze-avatar>
<blaze-avatar text="GP" size="large"></blaze-avatar>
<blaze-avatar text="GP"></blaze-avatar>
<blaze-avatar text="GP" size="small"></blaze-avatar>
<blaze-avatar text="GP" size="xsmall"></blaze-avatar>
<br>
<blaze-avatar text="GP" size="super" src="https://source.unsplash.com/random/200x200"></blaze-avatar>
<blaze-avatar text="GP" size="xlarge" src="https://source.unsplash.com/random/200x200"></blaze-avatar>
<blaze-avatar text="GP" size="large" src="https://source.unsplash.com/random/200x200"></blaze-avatar>
<blaze-avatar text="GP" src="https://source.unsplash.com/random/200x200"></blaze-avatar>
<blaze-avatar text="GP" size="small" src="https://source.unsplash.com/random/200x200"></blaze-avatar>
<blaze-avatar text="GP" size="xsmall" src="https://source.unsplash.com/random/200x200"></blaze-avatar>
<br>
<blaze-avatar size="super" src="https://source.unsplash.com/random/200x200" src2="https://source.unsplash.com/random/200x200"></blaze-avatar>
<blaze-avatar size="xlarge" src="https://source.unsplash.com/random/200x200" src2="https://source.unsplash.com/random/200x200"></blaze-avatar>
<blaze-avatar size="large" src="https://source.unsplash.com/random/200x200" src2="https://source.unsplash.com/random/200x200"></blaze-avatar>
<blaze-avatar src="https://source.unsplash.com/random/200x200" src2="https://source.unsplash.com/random/200x200"></blaze-avatar>
<blaze-avatar size="small" src="https://source.unsplash.com/random/200x200" src2="https://source.unsplash.com/random/200x200"></blaze-avatar>
<blaze-avatar size="xsmall" src="https://source.unsplash.com/random/200x200" src2="https://source.unsplash.com/random/200x200"></blaze-avatar> 

Attributes

Attribute Description
src URL to the image to display
src2 URL to the smaller secondary image
size The size of the Avatar
text Text to display in the middle of the circle