Avatar
1. Default Avatar
Copy
![Rounded avatar](./assets/img/user-profile/avatar-1.jpg)
![Default avatar](./assets/img/user-profile/avatar-1.jpg)
2. Avatar with border
Copy
Apply a border around the avatar component you can use the ring-{color} class from Tailwind CSS.
![Bordered avatar](./assets/img/user-profile/avatar-1.jpg)
3. Placeholder
Copy
4. Avatar with Indicator
Copy
![](./assets/img/user-profile/avatar-1.jpg)
![](./assets/img/user-profile/avatar-1.jpg)
![](./assets/img/user-profile/avatar-1.jpg)
![](./assets/img/user-profile/avatar-1.jpg)
5. Stacked Avatars
Copy
6. Avatar with text
Copy
![](./assets/img/user-profile/avatar-1.jpg)
Jese Leos
Joined in August 2014
7. Avatar dropdown
Copy
8. Avatar Size
Copy
![Extra small avatar](./assets/img/user-profile/avatar-1.jpg)
![Small avatar](./assets/img/user-profile/avatar-1.jpg)
![Medium avatar](./assets/img/user-profile/avatar-1.jpg)
![Large avatar](./assets/img/user-profile/avatar-1.jpg)
![Extra large avatar](./assets/img/user-profile/avatar-1.jpg)
On this Page
- Default Avatar
- Avatar with border
- Placeholder
- Avatar with Indicator
- Stacked Avatars
- Avatar with text
- Avatar dropdown
- Avatar Size
Next Element:
Previous Element: