Avatar

The .pl-c-avatar renders a circular user identity chip. Three sizes via [data-size]. For images, use <img class="pl-c-avatar__img">. Group stacking via .pl-c-avatar-group.

Semantic HTML

<!-- Initials -->
<div class="pl-c-avatar">JD</div>

<!-- Image -->
<div class="pl-c-avatar">
  <img class="pl-c-avatar__img" src="…" alt="Jane Doe" />
</div>

<!-- Group -->
<div class="pl-c-avatar-group">
  <div class="pl-c-avatar" data-size="sm">JD</div>
  <div class="pl-c-avatar" data-size="sm">AB</div>
  <div class="pl-c-avatar-group__more">+8</div>
</div>

Class contract