Avatars
Avatars are user profile pictures.
Add the avatar class to the <figure> element. And add the img element as its profile picture into it.
<!-- Basic avatar examples -->
<figure class="avatar"><img src="img/avatar-1.png" alt="Avatar 1"></figure>
<figure class="avatar"><img src="img/avatar-2.png" alt="Avatar 2"></figure>
<figure class="avatar"><img src="img/avatar-3.png" alt="Avatar 3"></figure>
<figure class="avatar"><img src="img/avatar-4.png" alt="Avatar 4"></figure>
<figure class="avatar"><img src="img/avatar-5.png" alt="Avatar 5"></figure>
Avatar initials
For users who don't have profile pictures, you may use their initials for avatars.
The data-initial attribute of the figure element is the name appear inside the avatar.
<!-- No profile picture avatar examples -->
<figure class="avatar" data-initial="ŚR"></figure>
<figure class="avatar" data-initial="JK"></figure>
<figure class="avatar" data-initial="RC"></figure>
<figure class="avatar" data-initial="AC"></figure>
<figure class="avatar" data-initial="DK"></figure>
<!-- Show initals when avatar image is unavailable or not fully loaded -->
<figure class="avatar" data-initial="ŚR">
<img src="img/avatar-2.png" alt="ŚR">
</figure>
Avatar sizes
Avatar's size can be easily changed using the prepared classes by adding the avatar class and avatar size class to the <figure> element.
Avatar available sizes
There are 4 additional sizes available, including avatar-xl(64px), avatar-lg(48px), avatar-sm(24px), and avatar-xs(16px).
By default, which means without any given class or given avatar-md class the avatar size is 32px.
| xs | sm | md | lg | xl | 2x | |
|---|---|---|---|---|---|---|
| Available | ||||||
| Size(px) | 16px |
24px |
32px |
48px |
64px |
- |
Avatar sizes - extra large(xl)
To change the avatar size to extra large add the avatar-xl to the figure element.
<!-- Extra large avatar example -->
<figure class="avatar avatar-xl">
<img src="img/avatar-1.png" alt="Avatar XL">
</figure>
<figure class="avatar avatar-xl" data-initial="YZ"></figure>
Avatar sizes - large(lg)
To change the avatar size to large add the avatar-lg to the figure element.
<!-- Large avatar example -->
<figure class="avatar avatar-lg">
<img src="img/avatar-2.png" alt="Avatar LG">
</figure>
<figure class="avatar avatar-lg" data-initial="YZ"></figure>
Avatar sizes - medium(md)
Without any or with avatar-md class the avatar is medium size.
<!-- Medium avatar example -->
<figure class="avatar">
<img src="img/avatar-3.png" alt="Avatar or Avatar md">
</figure>
<figure class="avatar avatar-md" data-initial="YZ"></figure>
Avatar sizes - small(sm)
To change the avatar size to small add the avatar-sm to the figure element.
<!-- Small avatar example -->
<figure class="avatar avatar-sm">
<img src="img/avatar-3.png" alt="Avatar SM">
</figure>
<figure class="avatar avatar-sm" data-initial="YZ"></figure>
Avatar sizes - extra small(xs)
To change the avatar size to extra small add the avatar-xs to the figure element.
<!-- Extra small avatar examples -->
<figure class="avatar avatar-xs">
<img src="img/avatar-5.png" alt="Avatar XS">
</figure>
<figure class="avatar avatar-xs" data-initial="XS"></figure>
Avatar sizes comparison
<!-- Basic avatar examples -->
<figure class="avatar avatar-xl">
<img src="img/avatar-1.png" alt="...">
</figure>
<figure class="avatar avatar-xl" data-initial="YZ"></figure>
<!-- Show initals when avatar image is unavailable or not fully loaded -->
<figure class="avatar avatar-xl" data-initial="YZ">
<img src="img/avatar-1.png" alt="...">
</figure>
Avatar icons
<figure class="avatar avatar-xl">
<img src="img/avatar-1.png" alt="xl">
<img src="img/avatar-5.png" class="avatar-icon" alt="xl">
</figure>
<figure class="avatar avatar-lg">
<img src="img/avatar-2.png" alt="lg">
<img src="img/avatar-3.png" class="avatar-icon" alt="lg">
</figure>
<figure class="avatar avatar-md">
<img src="img/avatar-3.png" alt="md">
<img src="img/avatar-4.png" class="avatar-icon" alt="md">
</figure>
<figure class="avatar avatar-sm">
<img src="img/avatar-5.png" alt="...">
<img src="img/avatar-1.png" class="avatar-icon" alt="sm">
</figure>
<figure class="avatar avatar-xs">
<img src="img/avatar-1.png" alt="xs">
<img src="img/avatar-5.png" class="avatar-icon" alt="xs">
</figure>
Avatar presence
Avatars support presence indicators.
You can add an <i> element with the avatar-presence class, and add online, busy or away class for different status colors.
The default is gray which means offline.
Avatar presence - Indicators
| Away | Busy | Offline | Online | |
|---|---|---|---|---|
| Color | ||||
| Class | away |
busy |
offline |
online |
| CSS variable | --s-warning-color |
--s-error-color |
--s-gray-color |
--s-success-color |
| View | View | View | View |
Avatar presence - Away
Add away class for away status colors.
<!-- Size extra large (xl) -->
<figure class="avatar avatar-xl" data-initial="xl">
<i class="avatar-presence away"></i>
</figure>
<!-- Size large (lg) -->
<figure class="avatar avatar-lg" data-initial="lg">
<i class="avatar-presence away"></i>
</figure>
<!-- Size medium (md) -->
<figure class="avatar" data-initial="md">
<i class="avatar-presence away"></i>
</figure>
<!-- Size small (sm) -->
<figure class="avatar avatar-sm" data-initial="sm">
<i class="avatar-presence away"></i>
</figure>
<!-- Size extra small (xs) -->
<figure class="avatar avatar-xs" data-initial="xs">
<i class="avatar-presence away"></i>
</figure>
<!-- With profile picture -->
<!-- Size extra large (xl) -->
<figure class="avatar avatar-xl">
<img src="img/avatar-1.png" alt="Avatar XL">
<i class="avatar-presence away"></i>
</figure>
<!-- Size large (lg) -->
<figure class="avatar avatar-lg">
<img src="img/avatar-2.png" alt="Avatar LG">
<i class="avatar-presence away"></i>
</figure>
<!-- Size medium (md) -->
<figure class="avatar">
<img src="img/avatar-3.png" alt="Avatar MD">
<i class="avatar-presence away"></i>
</figure>
<!-- Size small (sm) -->
<figure class="avatar avatar-sm">
<img src="img/avatar-4.png" alt="Avatar SM">
<i class="avatar-presence away"></i>
</figure>
<!-- Size extra small (xs) -->
<figure class="avatar avatar-xs">
<img src="img/avatar-5.png" alt="Avatar XS">
<i class="avatar-presence busy"></i>
</figure>
Avatar presence - Busy
Add busy class for busy status colors.
<!-- Size extra large (xl) -->
<figure class="avatar avatar-xl" data-initial="xl">
<i class="avatar-presence busy"></i>
</figure>
<!-- Size large (lg) -->
<figure class="avatar avatar-lg" data-initial="lg">
<i class="avatar-presence busy"></i>
</figure>
<!-- Size medium (md) -->
<figure class="avatar" data-initial="md">
<i class="avatar-presence busy"></i>
</figure>
<!-- Size small (sm) -->
<figure class="avatar avatar-sm" data-initial="sm">
<i class="avatar-presence busy"></i>
</figure>
<!-- Size extra small (xs) -->
<figure class="avatar avatar-xs" data-initial="xs">
<i class="avatar-presence busy"></i>
</figure>
<!-- With profile picture -->
<!-- Size extra large (xl) -->
<figure class="avatar avatar-xl">
<img src="img/avatar-1.png" alt="Avatar XL">
<i class="avatar-presence busy"></i>
</figure>
<!-- Size large (lg) -->
<figure class="avatar avatar-lg">
<img src="img/avatar-2.png" alt="Avatar LG">
<i class="avatar-presence busy"></i>
</figure>
<!-- Size medium (md) -->
<figure class="avatar">
<img src="img/avatar-3.png" alt="Avatar MD">
<i class="avatar-presence busy"></i>
</figure>
<!-- Size small (sm) -->
<figure class="avatar avatar-sm">
<img src="img/avatar-4.png" alt="Avatar SM">
<i class="avatar-presence busy"></i>
</figure>
<!-- Size extra small (xs) -->
<figure class="avatar avatar-xs">
<img src="img/avatar-5.png" alt="Avatar XS">
<i class="avatar-presence busy"></i>
</figure>
Avatar presence - Offline
Add offline class or no class for offline status colors.
<!-- Size extra large (xl) -->
<figure class="avatar avatar-xl" data-initial="xl">
<i class="avatar-presence offline"></i>
</figure>
<!-- Size large (lg) -->
<figure class="avatar avatar-lg" data-initial="lg">
<i class="avatar-presence offline"></i>
</figure>
<!-- Size medium (md) -->
<figure class="avatar" data-initial="md">
<i class="avatar-presence offline"></i>
</figure>
<!-- Size small (sm) -->
<figure class="avatar avatar-sm" data-initial="sm">
<i class="avatar-presence offline"></i>
</figure>
<!-- Size extra small (xs) -->
<figure class="avatar avatar-xs" data-initial="xs">
<i class="avatar-presence offline"></i>
</figure>
<!-- With profile picture -->
<!-- Size extra large (xl) -->
<figure class="avatar avatar-xl">
<img src="img/avatar-1.png" alt="Avatar XL">
<i class="avatar-presence offline"></i>
</figure>
<!-- Size large (lg) -->
<figure class="avatar avatar-lg">
<img src="img/avatar-2.png" alt="Avatar LG">
<i class="avatar-presence offline"></i>
</figure>
<!-- Size medium (md) -->
<figure class="avatar">
<img src="img/avatar-3.png" alt="Avatar MD">
<i class="avatar-presence offline"></i>
</figure>
<!-- Size small (sm) -->
<figure class="avatar avatar-sm">
<img src="img/avatar-4.png" alt="Avatar SM">
<i class="avatar-presence offline"></i>
</figure>
<!-- Size extra small (xs) -->
<figure class="avatar avatar-xs">
<img src="img/avatar-5.png" alt="Avatar XS">
<i class="avatar-presence offline"></i>
</figure>
Avatar presence - Online
Add online class for online status colors.
<!-- Size extra large (xl) -->
<figure class="avatar avatar-xl" data-initial="xl">
<i class="avatar-presence online"></i>
</figure>
<!-- Size large (lg) -->
<figure class="avatar avatar-lg" data-initial="lg">
<i class="avatar-presence online"></i>
</figure>
<!-- Size medium (md) -->
<figure class="avatar" data-initial="md">
<i class="avatar-presence online"></i>
</figure>
<!-- Size small (sm) -->
<figure class="avatar avatar-sm" data-initial="sm">
<i class="avatar-presence online"></i>
</figure>
<!-- Size extra small (xs) -->
<figure class="avatar avatar-xs" data-initial="xs">
<i class="avatar-presence online"></i>
</figure>
<!-- With profile picture -->
<!-- Size extra large (xl) -->
<figure class="avatar avatar-xl">
<img src="img/avatar-1.png" alt="Avatar XL">
<i class="avatar-presence online"></i>
</figure>
<!-- Size large (lg) -->
<figure class="avatar avatar-lg">
<img src="img/avatar-2.png" alt="Avatar LG">
<i class="avatar-presence online"></i>
</figure>
<!-- Size medium (md) -->
<figure class="avatar">
<img src="img/avatar-3.png" alt="Avatar MD">
<i class="avatar-presence online"></i>
</figure>
<!-- Size small (sm) -->
<figure class="avatar avatar-sm">
<img src="img/avatar-4.png" alt="Avatar SM">
<i class="avatar-presence online"></i>
</figure>
<!-- Size extra small (xs) -->
<figure class="avatar avatar-xs">
<img src="img/avatar-5.png" alt="Avatar XS">
<i class="avatar-presence online"></i>
</figure>