---
---


<h1>Simple avatars</h1>
<div>
	{% include ui/avatar.html person-id=1 %}
	{% include ui/avatar.html person-id=2 %}
	{% include ui/avatar.html person-id=3 %}
	{% include ui/avatar.html person-id=4 %}
	{% include ui/avatar.html person-id=5 %}
</div>

<div>
	<h1>Avatar size</h1>
	{% include ui/avatar.html person-id=6 size="sm" %}
	{% include ui/avatar.html person-id=7 %}
	{% include ui/avatar.html person-id=9 size="lg" %}
	{% include ui/avatar.html person-id=10 size="xl" %}
</div>

<div>
	{% include ui/avatar.html person-id=11 %}
	{% include ui/avatar.html person-id=12 status="danger" %}
	{% include ui/avatar.html person-id=13 status="success" %}
	{% include ui/avatar.html person-id=14 status="warning" %}
	{% include ui/avatar.html person-id=15 status="info" %}
	{% include ui/avatar.html person-id=16 status="gray" %}
</div>

<div>
	<h1>Avatar placeholders</h1>
	{% include ui/avatar.html placeholder="ąę" %}
	{% include ui/avatar.html placeholder="AB" %}
	{% include ui/avatar.html placeholder="ć" %}
	{% include ui/avatar.html placeholder="ы" %}
</div>
<div>
	{% include ui/avatar.html icon="bell" %}
	{% include ui/avatar.html icon="circle" %}
	{% include ui/avatar.html icon="disc" %}
	{% include ui/avatar.html icon="twitter" class="bg-twitter text-white" %}
</div>
<div>
	<span class="avatar avatar-blue">NG</span>
	<span class="avatar avatar-azure">AM</span>
	<span class="avatar avatar-indigo">RB</span>
	<span class="avatar avatar-purple">PR</span>
	<span class="avatar avatar-pink">WH</span>
	<span class="avatar avatar-red">MR</span>
	<span class="avatar avatar-orange">DB</span>
	<span class="avatar avatar-yellow">PP</span>
	<span class="avatar avatar-lime">JR</span>
	<span class="avatar avatar-green">RB</span>
	<span class="avatar avatar-teal">KH</span>
	<span class="avatar avatar-cyan">BK</span>
	<span class="avatar avatar-gray">CA</span>
	<span class="avatar avatar-gray-dark">CW</span>
</div>

<div>
	<h1>Avatars list</h1>
	<div class="avatar-list">
		{% include ui/avatar.html person-id=17 %}
		{% include ui/avatar.html person-id=18 %}
		{% include ui/avatar.html person-id=19 %}
		{% include ui/avatar.html person-id=20 %}
		{% include ui/avatar.html person-id=21 %}
		{% include ui/avatar.html person-id=22 %}
	</div>
</div>

<div>
	<div class="avatar-list avatar-list-stacked">
		{% include ui/avatar.html person-id=23 %}
		{% include ui/avatar.html person-id=24 %}
		{% include ui/avatar.html person-id=25 %}
		{% include ui/avatar.html person-id=26 %}
		{% include ui/avatar.html person-id=27 %}
		{% include ui/avatar.html person-id=28 %}
		<span class="avatar">+8</span>
	</div>

</div>