Do you know the latest update of 2022? A overview of our is now available on YouTube

Components

## Avatar

Documentation and examples for avatars.

##### Example with Variations

Add any of the below mentioned modifier classes to change the appearance of a avatar.

Default Style's

- AB

Status Style's

- AB

Square Style's

- AB

Status Style's

- AB

Group Style's

- AB
  NL
- AB

Group Style's v2

- A
  N
- A

###### Code Example

        //code for default/basic Avatar
        <div class="user-avatar">
            <span>AB</span>
        </div>

###### Code Example

        //code for Avatar with status
        <div class="user-avatar">
            <span>AB</span>
            <div class="status dot dot-lg dot-success"></div>
        </div>

###### Code Example

        //code for Avatar with Squared
        <div class="user-avatar sq">
            <span>AB</span>
        </div>

###### Code Example

        //code for Avatar Group
        <div class="user-avatar-group">
            <div class="user-avatar">
                <span>AB</span>
            </div>
            <div class="user-avatar">
                <span>NL</span>
            </div>
        </div>

###### Code Example

        //code for Multiple avatar with diffrent style
        <div class="user-avatar user-avatar-multiple">
            <div class="user-avatar">
                <span>A</span>
            </div>
            <div class="user-avatar">
                <span>N</span>
            </div>
        </div>

##### Example with Color Variations

Add any of the below mentioned modifier classes to change the appearance of a avatar.

Avatar Fill Color

- AB
- NL
- CH
- SW
- GO
- PS
- DM
- HS
- SM
- TM
- JC
- VA
- EH
- AF
- HW
- KR

Avatar Dim Color

- AB
- NL
- CH
- SW
- GO
- PS
- DM
- HS
- SM
- TM
- JC
- VA
- EH
- AF
- HW
- KR

Class Reference | Details
--- | ---
`.bg-{color}` | Use `{color}` as `primary, secondary, warning, danger, success, info, azure, blue, pink, indigo, dark, gray, orange, teal, purple, lighter`
`.bg-{color}-dim` | Use `{color}` as `primary, secondary, warning, danger, success, info, azure, blue, pink, indigo, dark, gray, orange, teal, purple, light` Use `light` without `-dim` postfix

##### Example with Sizes

Add any of the below mentioned modifier classes to change the appearance of a avatar.

Rounded Avatars

- AB
- AB
- AB
- A

Squared Avatars

- AB
- AB
- AB
- A

Class Reference | Details
--- | ---
`.{size}` | Use `{size}` as `xl, lg, md, sm, xs`

##### Example with Use Case

Lets take a look at some real use case for avatar.

User Card 1
Administrator
Abu Bin Ishityak
User Card 2
Keith Jensen keith@softnio.com
User Card 3
AB
Abu Bin Ishtiyak

###### Code Example

        //code for User Card 1
        <div class="user-toggle">
            <div class="user-avatar">
                <em class="icon ni ni-user-alt"></em>
            </div>
            <div class="user-info">
                <div class="user-status text-primary">Administrator</div>
                <div class="user-name dropdown-indicator">Abu Bin Ishityak</div>
            </div>
        </div>

###### Code Example

        //code for User Card 2
        <div class="user-card">
            <div class="user-avatar">
                <img src="avatar/c-sm.jpg" alt="">
            </div>
            <div class="user-info">
                <span class="lead-text">Keith Jensen</span>
                <span class="sub-text">keith@softnio.com</span>
            </div>
        </div>

###### Code Example

        //code for User Card 3
        <div class="user-card">
            <div class="user-avatar sm bg-purple">
                <span>AB</span>
            </div>
            <div class="user-name">
                <span class="tb-lead">Abu Bin Ishtiyak</span>
            </div>
        </div>

##### Select Your Countryy

- Argentina
- Australia
- Bangladesh
- Canada (English)
- Centrafricaine
- China
- France
- Germany
- Iran
- Italy
- México
- Philippines
- Portugal
- South Africa
- Spain
- Switzerland
- United Kingdom
- United State