Extra Components
Back to top

Extra Components Documentation

  1. Home
  2. Extra Components

Avatar

Often you need to add an user's avatar to your app. In order to make this we have the component. Note: you have to use inline attributes for avatar image size.

Use below mentioned code to create an avatar.


    <div class="avatar">
    <span class="avatar-content"><i class="avatar-icon feather icon-github"></i></span>
  </div>
Avatar Type Class Description
Basic .avatar.bg-* Use any template color from COLOR PALETTE that you like to add for avatar.
Avatar Sizes .avatar-{sm|lg|xl} Diffrent sizes for avatar.
Avatar Status .avatar-status-{online | offline | away | busy} Adds little element to avatar with color according to status.

Referrals :

Type URL
Template Page https://pixinvent.com/demo/vuexy-html-bootstrap-admin-template/html/ltr/vertical-menu-template/ex-component-avatar.html

Chips

Chips are compact elements that represent an input, attribute, or action.

Use below mentioned code to create a chip.

  
  <div class="chip">
  <div class="chip-body">
    <div class="avatar">
      <div class="avatar-content">
        LD
      </div>
    </div>
    <span class="chip-text">Avatar Text</span>
  </div>
</div>
Chip Type Class Description
Basic .chip.chip-* Use any template color from COLOR PALETTE that you like to add for chip.
Avatar .avatar Adds avatar inside chip.
Closeable .chip-closeable creates a closeable chip.

Referrals :

Type URL
Template Page https://pixinvent.com/demo/vuexy-html-bootstrap-admin-template/html/ltr/vertical-menu-template/ex-component-chips.html

Divider

Divide text or section components with some great features and quick to implement.

Use below mentioned code to create a divider.

    
    <div class="divider">
    <div class="divider-text">My Text</div>
  </div>
Divider Type Class Description
Basic Divider .divider Creates a divider
Divider Text .divider-text Adds text between divider.
Position .divider-{left|left-center|right|right-center} Changes divider text position.
Colors .divider-* Changes divider color.
Style .divider-{dotted | dashed} Changes divider style.

Referrals :

Type URL
Template Page https://pixinvent.com/demo/vuexy-html-bootstrap-admin-template/html/ltr/vertical-menu-template/ex-component-divider.html