Avatar
Avatars are used as default profile picture for users.
Usage
AS
<span class="c-avatar">
AS
</span>Implementation
| Type | Name | |
|---|---|---|
| Elements | ||
| Avatar | .c-avatar | |
| Avatar Stacked | .c-avatar-stack | Optional |
| Modifiers | ||
| Size | .c-avatar--lg | |
| Border | .c-avatar--with-border | |
| States | None |
Elements
Avatar Stack
Stacked avatars are used to show avatars when there is limited space available. When using an c-avatar-stack, make sure to always add the c-avatar--with-border to each avatar.
AS
WO
+4
<div class="c-avatar-stack">
<span class="c-avatar c-avatar--with-border">AS</span>
<span class="c-avatar c-avatar--with-border">WO</span>
<span class="c-avatar c-avatar--with-border">+4</span>
</div>Modifiers
Size
AS
AS
<div class="flex space-x-4">
<span class="c-avatar c-avatar--lg">
AS
</span>
<span class="c-avatar">
AS
</span>
</div>Border
Use c-avatar--with-border to visually separate the avatar from the background or to stack multiple avatars over each other.
AS
AS
<div class="flex space-x-4">
<span class="c-avatar">
AS
</span>
<span class="c-avatar c-avatar--with-border">
AS
</span>
</div>