Pattern Library

Avatars

Avatars are a way to identify and differentiate users, particularly in lists with multiple users such as sharing modals.

Basic avatars

An avatar contains a user’s image if they’ve uploaded one, and their initials if they haven’t.

Picture of Boba Fett
BF
BF
<div class="avatar avatar--large" title="Boba Fett">
  <img class="avatar__image" src="http://www.radfaces.com/images/avatars/boba-fett.jpg" alt="Picture of Boba Fett">
  <div class="avatar__initials">BF</div>
</div>

Avatar sizes

Predefined size classes can be added

Picture of Boba Fett
BF
Picture of Boba Fett
BF
Picture of Boba Fett
BF
Picture of Boba Fett
BF
<div class="avatar avatar--large" title="Boba Fett">
  <img class="avatar__image" src="http://www.radfaces.com/images/avatars/boba-fett.jpg" alt="Picture of Boba Fett">
  <div class="avatar__initials">BF</div>
</div>
<div class="avatar avatar--medium" title="Boba Fett">
  <img class="avatar__image" src="http://www.radfaces.com/images/avatars/boba-fett.jpg" alt="Picture of Boba Fett">
  <div class="avatar__initials">BF</div>
</div>
<div class="avatar avatar--small" title="Boba Fett">
  <img class="avatar__image" src="http://www.radfaces.com/images/avatars/boba-fett.jpg" alt="Picture of Boba Fett">
  <div class="avatar__initials">BF</div>
</div>
<div class="avatar avatar--xsmall" title="Boba Fett">
  <img class="avatar__image" src="http://www.radfaces.com/images/avatars/boba-fett.jpg" alt="Picture of Boba Fett">
  <div class="avatar__initials">BF</div>
</div>