Skip to main content

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

NameDescription
src: stringURL to the image to display
src-2: stringURL to the smaller secondary image
alt: stringAlternative text to the image
alt-2: stringAlternative text to the secondary image
size: stringThe size of the Avatar
text: stringText to display in the middle of the circle

CSS

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>