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
| Selector | Role |
|---|---|
.pl-c-avatar |
The circle (flex center). |
.pl-c-avatar__img |
Image fill (object-fit: cover). |
[data-size] |
sm, default, lg. |
.pl-c-avatar-group |
Overlapping stack container. |
.pl-c-avatar-group__more |
Overflow count chip. |