Display
Avatar
Initials in a circle, in four sizes and six series colors, alone or in a group.
Example
A
C
L
A
B
+4
<span class="u-avatar u-avatar--sm">A</span>
<span class="u-avatar" data-c="1">C</span>
<span class="u-avatar u-avatar--lg" data-c="2">L</span>
<span class="u-avatars">
<span class="u-avatar" data-c="1">A</span>
<span class="u-avatar" data-c="3">B</span>
<span class="u-avatar" data-c="6">+4</span>
</span>Installation
Avatar ships in the full package, in unslop.css:
curl -fsSL unslop.leallabs.dev/i | shNo build It's just CSS: with unslop.css on the page, the classes already work.
Classes and variants
| Class | What it does |
|---|---|
u-avatar | 36px. |
u-avatar--sm, --lg, --xl | 28, 48 and 92px. |
data-c="1" a "6" | Series color. Without data-c, it stays neutral. |
u-avatars | Overlapping group, with a ring in the card color. |
Accessibility and keyboard
State and roles
| Where | Attribute | What it says |
|---|---|---|
| text | content | The initial is read as text. In a group, put the full name in an aria-label on the group or next to it. |