Do you know the latest update of 2019? 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>