package.docs.components.avatars.mdx Maven / Gradle / Ivy
Go to download
Show more of this group Show more artifacts with this name
Show all versions of core Show documentation
Show all versions of core Show documentation
Premium and Open Source dashboard template with responsive and high quality UI.
The newest version!
---
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
JL
```
## Avatar image
Set an image as the background to make users easy to indentify and create a personalised experience.
```html example centered separated code
```
## Initials
You can also use initials instead of pictures.
```html example centered separated code
AB
CD
EF
GH
IJ
```
## Avatar icons
Apart from pictures and initials, you can also use icons to make the avatars more universal.
```html example centered separated
```
```html
```
## Avatar initials color
Customize the color of the avatars' background. You can click [here](colors) to see the list of available colors.
```html example centered separated code
AB
CD
EF
GH
IJ
```
## 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
```
## 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
SA
5
```
## 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
AA
```
## Avatars list
Create a list of avatars within one parent container.
```html example centered separated code
JL
```
## 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
EB
+8
```
```html example centered separated code
SA
```