Skip to main content

Avatar

Display a person's picture or initials

Overview #

Use the avatar component to display a person’s picture or initials with a rounded border.

Avatars are often used on people directories and profile pages. They also appear alongside quotations and in web application headers to show the identity of the logged-in user.

Examples #


<div class="rvt-avatar rvt-avatar--xs">
<img class="rvt-avatar__image" src="https://v2.rivet.iu.edu/img/placeholder/avatar-1.jpg" alt="">
</div>

<div class="rvt-avatar rvt-avatar--sm">
<img class="rvt-avatar__image" src="https://v2.rivet.iu.edu/img/placeholder/avatar-1.jpg" alt="">
</div>

<div class="rvt-avatar">
<img class="rvt-avatar__image" src="https://v2.rivet.iu.edu/img/placeholder/avatar-1.jpg" alt="">
</div>

<div class="rvt-avatar rvt-avatar--md">
<img class="rvt-avatar__image" src="https://v2.rivet.iu.edu/img/placeholder/avatar-1.jpg" alt="">
</div>

<div class="rvt-avatar rvt-avatar--lg">
<img class="rvt-avatar__image" src="https://v2.rivet.iu.edu/img/placeholder/avatar-1.jpg" alt="">
</div>

<div class="rvt-avatar rvt-avatar--xl">
<img class="rvt-avatar__image" src="https://v2.rivet.iu.edu/img/placeholder/avatar-1.jpg" alt="">
</div>
<div class="rvt-avatar rvt-avatar--xs">
<span class="rvt-avatar__text">XS</span>
</div>

<div class="rvt-avatar rvt-avatar--sm">
<span class="rvt-avatar__text">SM</span>
</div>

<div class="rvt-avatar">
<span class="rvt-avatar__text">RG</span>
</div>

<div class="rvt-avatar rvt-avatar--md">
<span class="rvt-avatar__text">MD</span>
</div>

<div class="rvt-avatar rvt-avatar--lg">
<span class="rvt-avatar__text">LG</span>
</div>

<div class="rvt-avatar rvt-avatar--xl">
<span class="rvt-avatar__text">XL</span>
</div>
<div class="rvt-avatar rvt-avatar--xl-md-up">
<img class="rvt-avatar__image" src="https://v2.rivet.iu.edu/img/placeholder/avatar-1.jpg" alt="">
</div>

Usage #

Do

  • Use to show someone's picture as part of a profile, quotation, or header identity module
  • Use with .jpg or .png images

Don't

  • Use a non-square avatar image
  • Use different avatar sizes in the same list of people

Accessibility #

  • Use an empty alt attribute. You do not need to use the person’s name or initials as the value of the avatar’s alt attribute.