---
title: Avatars
icon: fe fe-user
---
### Simple avatar
{% example html wrapper=avatar-list %}
{% for user in site.data.users limit: 5 offset: 20 %}
{% endfor %}
{% endexample %}
### Avatar size
{% example html wrapper=avatar-list %}
{% endexample %}
### Avatar status
{% example html wrapper=avatar-list %}
{% endexample %}
### Avatar placeholder
{% example html wrapper=avatar-list %}
{% for user in site.data.users limit: 3 offset: 10 %}
{{ user.name | first_letter }}{{ user.surname | first_letter }}
{% endfor %}
{% endexample %}
{% example html wrapper=avatar-list %}
{% for color in site.colors %}
{% assign user = site.data.users[forloop.index] %}
{{ user.name | first_letter }}{{ user.surname | first_letter }}
{% endfor %}
{% endexample %}
### Avatars list
{% example html %}
{% for user in site.data.users limit: 5 offset: 20 %}
{% endfor %}
{% endexample %}
{% example html %}
{% for user in site.data.users limit: 5 offset: 30 %}
{% endfor %}
+8
{% endexample %}