2

Messages

Hadiyat Avatar Hadiyat Virgiawan You sent an attachment. 16 hours ago
John Low Avatar John Low Wait a sec.. 22 hours ago
Yong Tian Avatar Yong Tian How are you? 12 April
Andree Avatar Andree W Kindly check my work 08 April
Lisa Avatar Lisa Tan Please help me check this. 02 April
1

Notifications

Mark all as read
Today
MC Margo Corn has invited you to the project Untitled 2 min EH Elsa Hoffman removed you 1 hr
Yesterday
MP Nadya Pasutri mentioned you in a comment in the project Untitled 2 "Mike, we need to fix this asap" 14:12 KK Konstantin Konstantinovich removed you from Mobile Dolfin 12:03
25 Mar
NP Nadya Pasutri accepted your invitation the project Untitled 2 09:45 KK Siti accepted the invitation to the project Tablature 08:15
Home / User Interface / Components

Avatar

Use the avatar component to show a model image using an image element in any style and sizes.

In order to implement this component, you can follow the examples from Skewind below that use mixed classes from the avatar component and TailwindCSS to modify the styles or sizes.

Usage

You just need two elements, the wrapper element that holds the avatar class and the avatar object element that holds avatar__object class to be placed inside the wrapper.

Avatar Object

Avatar Objects

Other than an img element, you can use any other object as well, such as:

Avatar Initial

SA

Avatar Icon

Avatar Colors

ZS MR SA TE

There is a soft color option too. The avatar__object--soft class is the one.

ZS MR SA TE

With Badge

Avatar Object SA TE

Customization Examples

We will use TailwindCSS utility classes to do the customization of the component.

Square Avatar

To make a square avatar, just add a rounded utility to the avatar object element.

John Avatar SA

Avatar Sizes

You can easily change the size of the avatar by using only the width w-{size} utility class.

Avatar Object Avatar Object Avatar Object Avatar Object