1
0
mirror of https://github.com/tabler/tabler.git synced 2026-07-30 06:54:39 +04:00

divider fixes, documentation

This commit is contained in:
codecalm
2019-07-09 20:19:01 +02:00
parent bd7b8be915
commit 318f1c5b5e
11 changed files with 36 additions and 30 deletions
+9 -8
View File
@@ -1,11 +1,12 @@
---
title: Avatars
menu: docs.avatars
done: true
---
Create and group avatars of various shapes and sizes with one component.
## Default markup
### Default markup
{% example html wrapper=avatar-list %}
{% include ui/avatar.html person-id=1 %}
@@ -13,7 +14,7 @@ Create and group avatars of various shapes and sizes with one component.
{% include ui/avatar.html person-id=3 %}
{% endexample %}
## Avatar size
### Avatar size
Using Bootstraps typical naming structure, you can create a standard avatar, or scale it up to different sizes based on whats needed.
@@ -25,7 +26,7 @@ Using Bootstraps typical naming structure, you can create a standard avatar,
{% include ui/avatar.html person-id=6 size="sm" %}
{% endexample %}
## Avatar status
### Avatar status
Add an online or offline status indicator to show user's availability.
@@ -38,7 +39,7 @@ Add an online or offline status indicator to show user's availability.
{% include ui/avatar.html person-id=16 status="gray" status-text="5" %}
{% endexample %}
## Avatar shape
### Avatar shape
Change the shape of an avatar with the default Bootstrap image classes.
@@ -50,7 +51,7 @@ Change the shape of an avatar with the default Bootstrap image classes.
{% include ui/avatar.html person-id=21 shape="rounded-lg" %}
{% endexample %}
## Initials
### Initials
{% example html wrapper=avatar-list %}
{% include ui/avatar.html placeholder="AB" size="xl" %}
@@ -61,7 +62,7 @@ Change the shape of an avatar with the default Bootstrap image classes.
{% endexample %}
## Avatar initials color
### Avatar initials color
[See more]({% docs_url colors %})
@@ -73,7 +74,7 @@ Change the shape of an avatar with the default Bootstrap image classes.
{% include ui/avatar.html placeholder="IJ" color="purple" %}
{% endexample %}
## Avatar initials icons
### Avatar initials icons
{% example html wrapper=avatar-list %}
{% include ui/avatar.html icon="user" %}
@@ -81,7 +82,7 @@ Change the shape of an avatar with the default Bootstrap image classes.
{% include ui/avatar.html icon="user-plus" %}
{% endexample %}
## Avatars list
### Avatars list
{% example %}
<div class="avatar-list">