Home
Components
Avatars

Avatars

Avatars can contain either 1-2 characters of text or an image. If an avatar is empty, it will show a placeholder icon.

Example
An empty avatar, an avatar with initial, and an avatar with an image.

HTML

<div class="pv-avatar"></div>
<div class="pv-avatar">
  <span>MA</span>
</div>
<div class="pv-avatar">
  <img src="/assets/images/avatar.png" alt="Mike">
</div>

Sizes

Avatars come in seven sizes.

Class	Size	Notes
`.pv-avatar-16`	16px	Added in v2
`.pv-avatar-20`	20px	Added in v2
`.pv-avatar-xs`	24px
`.pv-avatar-sm`	32px
`.pv-avatar, .pv-avatar-md`	44px (v1)/40px (v2)
`.pv-avatar-lg`	64px	Deprecated in v2
`.pv-avatar-xl`	96px	Deprecated in v2

Example
Avatars in various sizes.

HTML

<div class="pv-avatar-16"><span>16</span></div>
<div class="pv-avatar-20"><span>20</span></div>
<div class="pv-avatar-xs"><span>XS</span></div>
<div class="pv-avatar-sm"><span>SM</span></div>
<div class="pv-avatar-md"><span>MD</span></div>
<div class="pv-avatar-lg"><span>LG</span></div>
<div class="pv-avatar-xl"><span>XL</span></div>

Avatar Group

Use an avatar group to display a horizontal list of up to seven avatars. You can include either a single letter or an image inside of each list item.

Example
An avatar group with without and with images.

HTML

<ul class="pv-avatar-group" role="list">
  <li>H</li>
  <li>F</li>
  <li>J</li>
  <li>S</li>
  <li>X</li>
  <li>T</li>
  <li>M</li>
</ul>
<ul class="pv-avatar-group" role="list">
  <li><img src="/assets/images/avatar1.png" alt=""></li>
  <li><img src="/assets/images/avatar2.png" alt=""></li>
  <li><img src="/assets/images/avatar3.png" alt=""></li>
  <li><img src="/assets/images/avatar4.png" alt=""></li>
  <li><img src="/assets/images/avatar5.png" alt=""></li>
  <li><img src="/assets/images/avatar4.png" alt=""></li>
  <li><img src="/assets/images/avatar5.png" alt=""></li>
</ul>

Decorative

You can optionally include the data attribute data-more to indicate a how many additional avatars exist beyond the seven shown in the avatar group.

Example
A decorative avatar group with a counter displayed via the data-more attribute.

HTML

<ul class="pv-avatar-group" data-more="99" role="list">
  <li>H</li>
  <li>F</li>
  <li>J</li>
  <li>S</li>
  <li>X</li>
  <li>T</li>
  <li>M</li>
</ul>

Inline

You can also indicate how many additional avatars exist by flexing the avatar group next to a dfn element.

Example
An inline avatar group with a counter displayed with a dfn element within a flex container.

HTML

<div class="pv-flex" style="--flex-gap: .25rem">
  <ul class="pv-avatar-group" role="list">
    <li>H</li>
    <li>F</li>
    <li>J</li>
    <li>S</li>
    <li>X</li>
    <li>T</li>
    <li>M</li>
  </ul>
  <dfn title="+8 additional users">+8</dfn>
</div>

Company Logo

Similar to avatars, .pv-company-* can be used for company logos. If there is no image file included, it will default to a generic icon.

Example
Avatars in different sizes with and without logo images.

.pv-company-2x (40px)

.pv-company-xl (32px)

.pv-company-lg (24px)

.pv-company-md (20px)

.pv-company-sm (16px)

.pv-company-xs (12px)

HTML

<div class="pv-flex">
  <div class="pv-company-2x"><img src="/assets/images/aetna.png" alt=""></div>
  <div class="pv-company-2x"></div>
</div>
<div class="pv-flex">
  <div class="pv-company-xl"><img src="/assets/images/aetna.png" alt=""></div>
  <div class="pv-company-xl"></div>
</div>
<div class="pv-flex">
  <div class="pv-company-lg"><img src="/assets/images/aetna.png" alt=""></div>
  <div class="pv-company-lg"></div>
</div>
<div class="pv-flex">
  <div class="pv-company-md"><img src="/assets/images/aetna.png" alt=""></div>
  <div class="pv-company-md"></div>
</div>
<div class="pv-flex">
  <div class="pv-company-sm"><img src="/assets/images/aetna.png" alt=""></div>
  <div class="pv-company-sm"></div>
</div>
<div class="pv-flex">
  <div class="pv-company-xs"><img src="/assets/images/aetna.png" alt=""></div>
  <div class="pv-company-xs"></div>
</div>