Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2025-12-21 17:34:25 +04:00
Code Issues Projects Releases Wiki Activity
Files
0ac8e337e7c66ea2ab6adb70144eb6a8290fcbe6
tabler/docs/ui/components/avatars.mdx
codecalm 0ac8e337e7 Update docs structure
2025-01-02 11:25:08 +01:00

173 lines
7.4 KiB
Plaintext
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
---
title: Avatars
description: Avatars help customise various elements of a user interface and make the product experience more personalised. They are often used in communication apps, collaboration tools and social media.
---
## Default markup
Use the `avatar` class to add an avatar to your interface design for greater customisation.
```html example centered separated code
<span class="avatar" style="background-image: url(/samples/avatars/002f.jpg)"></span>
<span class="avatar">JL</span>
<span class="avatar" style="background-image: url(/samples/avatars/004f.jpg)"></span>
```
## Avatar image
Set an image as the background to make users easy to indentify and create a personalised experience.
```html example centered separated code
<span class="avatar" style="background-image: url(/samples/avatars/016f.jpg)"></span>
<span class="avatar" style="background-image: url(/samples/avatars/022m.jpg)"></span>
<span class="avatar" style="background-image: url(/samples/avatars/036m.jpg)"></span>
```
## Initials
You can also use initials instead of pictures.
```html example centered separated code
<span class="avatar">AB</span>
<span class="avatar">CD</span>
<span class="avatar">EF</span>
<span class="avatar">GH</span>
<span class="avatar">IJ</span>
```
## Avatar icons
Apart from pictures and initials, you can also use icons to make the avatars more universal.
```html example centered separated
<span class="avatar">
<svg xmlns="http://www.w3.org/2000/svg" class="icon avatar-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<circle cx="12" cy="7" r="4" />
<path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" />
</svg>
</span>
<span class="avatar">
<svg xmlns="http://www.w3.org/2000/svg" class="icon avatar-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<line x1="12" y1="5" x2="12" y2="19" />
<line x1="5" y1="12" x2="19" y2="12" />
</svg>
</span>
<span class="avatar">
<svg xmlns="http://www.w3.org/2000/svg" class="icon avatar-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<circle cx="9" cy="7" r="4" />
<path d="M3 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" />
<path d="M16 11h6m-3 -3v6" />
</svg>
</span>
```
```html
<span class="avatar">
<!-- SVG icon from http://tabler-icons.io/i/user -->
<svg>...</svg>
</span>
```
## Avatar initials color
Customize the color of the avatars' background. You can click [here](/docs/ui/colors) to see the list of available colors.
```html example centered separated code
<span class="avatar bg-green-lt">AB</span>
<span class="avatar bg-red-lt">CD</span>
<span class="avatar bg-yellow-lt">EF</span>
<span class="avatar bg-primary-lt">GH</span>
<span class="avatar bg-purple-lt">IJ</span>
```
## Avatar size
Using Bootstrap’s typical naming structure, you can create a standard avatar or scale it up or down to different sizes based on what you need.
```html example centered separated code
<span class="avatar avatar-xl" style="background-image: url(/samples/avatars/000m.jpg)"></span>
<span class="avatar avatar-lg" style="background-image: url(/samples/avatars/000m.jpg)"></span>
<span class="avatar avatar-md" style="background-image: url(/samples/avatars/000m.jpg)"></span>
<span class="avatar" style="background-image: url(/samples/avatars/000m.jpg)"></span>
<span class="avatar avatar-sm" style="background-image: url(/samples/avatars/000m.jpg)"></span>
<span class="avatar avatar-xs" style="background-image: url(/samples/avatars/000m.jpg)"></span>
```
## Avatar status
Add a status indicator to your avatar to show, for instance, if a users is online or offline or indicate the number of messages they have received.
```html example centered separated code
<span class="avatar" style="background-image: url(/samples/avatars/018m.jpg)"></span>
<span class="avatar" style="background-image: url(/samples/avatars/015m.jpg)">
<span class="badge bg-danger"></span>
</span>
<span class="avatar" style="background-image: url(/samples/avatars/022m.jpg)">
<span class="badge bg-success"></span>
</span>
<span class="avatar"><span class="badge bg-warning"></span>SA</span>
<span class="avatar" style="background-image: url(/samples/avatars/022m.jpg)">
<span class="badge bg-info"></span>
</span>
<span class="avatar" style="background-image: url(/samples/avatars/048m.jpg)">
<span class="badge bg-gray">5</span>
</span>
```
## Avatar shape
Change the shape of an avatar with the default Bootstrap image classes. You can make them round or square and change their border radius.
```html example centered separated
<span class="avatar" style="background-image: url(/samples/avatars/019m.jpg)"></span>
<span class="avatar rounded" style="background-image: url(/samples/avatars/039f.jpg)"></span>
<span class="avatar rounded-circle">AA</span>
<span class="avatar rounded-0" style="background-image: url(/samples/avatars/043f.jpg)"></span>
<span class="avatar rounded-3" style="background-image: url(/samples/avatars/044f.jpg)"></span>
```
## Avatars list
Create a list of avatars within one parent container.
```html example centered separated code
<div class="avatar-list">
<span class="avatar rounded" style="background-image: url(/samples/avatars/031f.jpg)"></span>
<span class="avatar rounded">JL</span>
<span class="avatar rounded" style="background-image: url(/samples/avatars/033f.jpg)"></span>
<span class="avatar rounded" style="background-image: url(/samples/avatars/017m.jpg)"></span>
<span class="avatar rounded" style="background-image: url(/samples/avatars/024m.jpg)"></span>
</div>
```
## Stacked list
Make the list stack once a certain number of avatars is reached to make it look clear and display well regardless of the screen size.
```html example centered separated code
<div class="avatar-list avatar-list-stacked">
<span class="avatar">EB</span>
<span class="avatar" style="background-image: url(/samples/avatars/026m.jpg)"></span>
<span class="avatar" style="background-image: url(/samples/avatars/016f.jpg)"></span>
<span class="avatar" style="background-image: url(/samples/avatars/028m.jpg)"></span>
<span class="avatar" style="background-image: url(/samples/avatars/030m.jpg)"></span>
<span class="avatar">+8</span>
</div>
```
```html example centered separated code
<div class="avatar-list avatar-list-stacked">
<span class="avatar avatar-sm rounded-circle" style="background-image: url(/samples/avatars/035m.jpg)"></span>
<span class="avatar avatar-sm rounded-circle" style="background-image: url(/samples/avatars/027f.jpg)"></span>
<span class="avatar avatar-sm rounded-circle" style="background-image: url(/samples/avatars/036f.jpg)"></span>
<span class="avatar avatar-sm rounded-circle">SA</span>
<span class="avatar avatar-sm rounded-circle" style="background-image: url(/samples/avatars/034f.jpg)"></span>
<span class="avatar avatar-sm rounded-circle" style="background-image: url(/samples/avatars/043f.jpg)"></span>
<span class="avatar avatar-sm rounded-circle" style="background-image: url(/samples/avatars/039f.jpg)"></span>
<span class="avatar avatar-sm rounded-circle" style="background-image: url(/samples/avatars/020m.jpg)"></span>
</div>
```
Reference in New Issue View Git Blame Copy Permalink