Avatar
Avatars are a graphical representation of a person or object using an icon, image, or a string with initials.
Class | Type | |
---|---|---|
avatar
|
Avatar | A class representing an avatar |
Types
Avatars have three different types:
Class | Type | |
---|---|---|
is-color-empty
|
Empty | The empty avatar can be used when an avatar cannot be shown yet, for example in pending mode. |
- | Text | A text avatar can display up to two letters, typically a user’s or team’s initials. |
- | Icon | One icon can be displayed in the center of an icon avatar. |
- | Image | Avatars can display a preview of a file or the user’s profile picture. |
aa
<div class="avatar is-color-empty"></div>
<div class="avatar">aa</div>
<div class="avatar"><span class="icon-pencil"></span></div>
<img class="avatar" src="https://unsplash.it/40" alt="" />
Sizes
There are five different sizes used for avatars:
class | Type | |
---|---|---|
is-size-x-small
|
x-small | 24px |
is-size-small
|
small | 32px |
- | medium | 40px |
is-size-large
|
large | 48px |
is-size-x-large
|
xlarge | 64px |
aa
aa
aa
aa
aa
<div class="avatar is-size-x-small">aa</div>
<div class="avatar is-size-small">aa</div>
<div class="avatar is-size-medium">aa</div>
<div class="avatar is-size-large">aa</div>
<div class="avatar is-size-x-large">aa</div>
Colors
In the Appwrite console, apart from empty avatars and default gray-colored avatars, avatars can use five more colors:
class | Type | |
---|---|---|
is-color-empty
|
Empty | |
- | Default | |
is-color-orange
|
Orange | |
is-color-green
|
Green | |
is-color-blue
|
Blue | |
is-color-pink
|
Pink | |
is-color-red
|
Red |
aa
aa
aa
aa
aa
aa
aa
<div class="avatar is-color-empty">aa</div>
<div class="avatar">aa</div>
<div class="avatar is-color-orange">aa</div>
<div class="avatar is-color-green">aa</div>
<div class="avatar is-color-blue">aa</div>
<div class="avatar is-color-pink">aa</div>
<div class="avatar is-color-red">aa</div>
Avatars Groups
avatars-group
Sizes
Avatar groups have four different sizes:
class | Type | |
---|---|---|
is-size-x-small
|
x-small | 24px |
is-size-small
|
small | 32px |
- | medium | 40px |
is-size-large
|
large | 48px |
- aa
- aa
- aa
- +2
- aa
- aa
- aa
- +2
- aa
- aa
- aa
- +2
- aa
- aa
- aa
- +2
<ul class="avatars-group">
<li class="avatars-group-item"><div class="avatar is-size-x-small is-color-blue">aa</div></li>
<li class="avatars-group-item"><div class="avatar is-size-x-small is-color-orange">aa</div></li>
<li class="avatars-group-item"><div class="avatar is-size-x-small is-color-green">aa</div></li>
<li class="avatars-group-item"><div class="avatar is-size-x-small">+2</div></li>
</ul>
<ul class="avatars-group">
<li class="avatars-group-item"><div class="avatar is-size-small is-color-blue">aa</div></li>
<li class="avatars-group-item"><div class="avatar is-size-small is-color-orange">aa</div></li>
<li class="avatars-group-item"><div class="avatar is-size-small is-color-green">aa</div></li>
<li class="avatars-group-item"><div class="avatar is-size-small">+2</div></li>
</ul>
<ul class="avatars-group">
<li class="avatars-group-item"><div class="avatar is-color-blue">aa</div></li>
<li class="avatars-group-item"><div class="avatar is-color-orange">aa</div></li>
<li class="avatars-group-item"><div class="avatar is-color-green">aa</div></li>
<li class="avatars-group-item"><div class="avatar">+2</div></li>
</ul>
<ul class="avatars-group">
<li class="avatars-group-item"><div class="avatar is-size-large is-color-blue">aa</div></li>
<li class="avatars-group-item"><div class="avatar is-size-large is-color-orange">aa</div></li>
<li class="avatars-group-item"><div class="avatar is-size-large is-color-green">aa</div></li>
<li class="avatars-group-item"><div class="avatar is-size-large">+2</div></li>
</ul>
Best Practice
Tips to keep in mind to increase consistency in avatars:
Do
Use icons that have universal meanings and are easily recognizable.
Don't
Do not use Icons that are less recognizable and inconsistent.
Do
Use up to 2 uppercase letters and high color contrast
Don't
Do not use more than 2 letters or lowercase