mirror of
https://github.com/tabler/tabler.git
synced 2025-12-23 02:14:26 +04:00
85 lines
2.6 KiB
HTML
85 lines
2.6 KiB
HTML
---
|
|
---
|
|
|
|
|
|
<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>
|