Skip to main content

Avatars

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

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

2 Images

placeholder placeholder
placeholder placeholder
placeholder placeholder
placeholder placeholder
placeholder placeholder
placeholder placeholder
<div class="c-avatar c-avatar u-super">
  <img class="c-avatar__img" alt="placeholder" src="http://placehold.it/1024x963/3B6DC6/FFF">
  <img class="c-avatar__img" alt="placeholder" src="http://placehold.it/1024x963/BADA55/FFF">
</div>
<div class="c-avatar c-avatar u-xlarge">
  <img class="c-avatar__img" alt="placeholder" src="http://placehold.it/1024x963/3B6DC6/FFF">
  <img class="c-avatar__img" alt="placeholder" src="http://placehold.it/1024x963/BADA55/FFF">
</div>
<div class="c-avatar c-avatar u-large">
  <img class="c-avatar__img" alt="placeholder" src="http://placehold.it/1024x963/3B6DC6/FFF">
  <img class="c-avatar__img" alt="placeholder" src="http://placehold.it/1024x963/BADA55/FFF">
</div>
<div class="c-avatar">
  <img class="c-avatar__img" alt="placeholder" src="http://placehold.it/1024x963/3B6DC6/FFF">
  <img class="c-avatar__img" alt="placeholder" src="http://placehold.it/1024x963/BADA55/FFF">
</div>
<div class="c-avatar c-avatar u-small">
  <img class="c-avatar__img" alt="placeholder" src="http://placehold.it/1024x963/3B6DC6/FFF">
  <img class="c-avatar__img" alt="placeholder" src="http://placehold.it/1024x963/BADA55/FFF">
</div>
<div class="c-avatar c-avatar u-xsmall">
  <img class="c-avatar__img" alt="placeholder" src="http://placehold.it/1024x963/3B6DC6/FFF">
  <img class="c-avatar__img" alt="placeholder" src="http://placehold.it/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>