aConic Admin Documentation - v1.0

Get Support
Preview Demo
Introduction Getting Started Design & Graphics Components Tables Basic Form Advanced Forms Charts Others
Version - 1.0.0 Help
Notes

aConic is a Static HTML Template

Avatars

Examples for opting different size of image classes.

Examples

Avatar classes are applied to the image so that it scales with the parent element. Use .avatar-xs, .avatar-sm, .avatar, .avatar-lg, .avatar-xl or .avatar-xxl classes to change size. 

                                          
  <!-- start avatar-->
  <span class="avatar avatar-xxl">
    <img src="../../assets/img/user-01.png" alt="">
  </span>
  <span class="avatar avatar-xl">
    <img src="../../assets/img/user-02.png" alt="">
  </span>
  <span class="avatar avatar-lg">
    <img src="../../assets/img/user-03.png" alt="">
  </span>
  <span class="avatar avatar-md">
    <img src="../../assets/img/user-04.png" alt="">
  </span>
  <span class="avatar avatar-sm">
    <img src="../../assets/img/user-01.png" alt="">
  </span>
  <span class="avatar avatar-xs">
    <img src="../../assets/img/user-02.png" alt="">
  </span>
  <!-- end avatar-->

Initials

In cases where no image, use initials instead.

A A A A A A 
                                            
    <!-- start avatar-->
    <span class="avatar avatar-xxl bg-primary text-white">
      <span class="avatar-initials">A</span>
    </span>
    <span class="avatar avatar-xl bg-primary text-white">
      <span class="avatar-initials">A</span>
    </span>
    <span class="avatar avatar-lg bg-primary text-white">
      <span class="avatar-initials">A</span>
    </span>
    <span class="avatar avatar-md bg-primary text-white">
      <span class="avatar-initials">A</span>
    </span>
    <span class="avatar avatar-sm bg-primary text-white">
      <span class="avatar-initials">A</span>
    </span>
    <span class="avatar avatar-xs bg-primary text-white">
      <span class="avatar-initials">A</span>
    </span>
    <!-- end avatar-->

Shapes

Use .rounded classes make avatars rounded. 

                                          
  <!-- start avatar-->
  <span class="avatar avatar-xl">
    <img src="../../assets/img/user-01.png" class="rounded-2" alt="">
  </span>
  <span class="avatar avatar-xl">
    <img src="../../assets/img/user-03.png" class="rounded-12" alt="">
  </span>
  <span class="avatar avatar-xl">
    <img src="../../assets/img/user-02.png" alt="">
  </span>
  <!-- end avatar-->
A A A 
                                          
  <!-- start avatar-->
  <span class="avatar avatar-xl rounded-2 bg-primary text-white">
    <span class="avatar-initials">A</span>
  </span>
  <span class="avatar avatar-xl rounded-12 bg-primary text-white">
    <span class="avatar-initials">A</span>
  </span>
  <span class="avatar avatar-xl bg-primary text-white">
    <span class="avatar-initials">A</span>
  </span>
  <!-- end avatar-->

Group

Group your avatars with the help of a .avatar-group class. Available for all avatar sizes classes.

B M 3+
B M 3+
B M 3+ 
                                          
  <!-- start avatar-->
  <div class="avatar-group d-inline-flex align-items-center me-3">
    <span class="avatar avatar-xl">
      <img src="../../assets/img/user-01.png" alt="">
    </span>
    <span class="avatar avatar-xl ms-n4">
      <img src="../../assets/img/user-03.png" alt="">
    </span>
    <span class="avatar avatar-xl bg-success text-white ms-n4">
      <span class="avatar-initials fs-6">B</span>
    </span>
    <span class="avatar avatar-xl bg-warning text-white ms-n4">
      <span class="avatar-initials fs-6">M</span>
    </span>
    <span class="avatar avatar-xl ms-n4">
      <img src="../../assets/img/user-02.png" alt="">
    </span>
    <span class="avatar avatar-xl bg-primary text-white ms-n4">
      <span class="avatar-initials fs-6">3+</span>
    </span>
  </div>

  <div class="avatar-group d-inline-flex align-items-center me-3">
    <span class="avatar avatar-lg">
      <img src="../../assets/img/user-01.png" alt="">
    </span>
    <span class="avatar avatar-lg ms-n4">
      <img src="../../assets/img/user-03.png" alt="">
    </span>
    <span class="avatar avatar-lg bg-success text-white ms-n4">
      <span class="avatar-initials fs-6">B</span>
    </span>
    <span class="avatar avatar-lg bg-warning text-white ms-n4">
      <span class="avatar-initials fs-6">M</span>
    </span>
    <span class="avatar avatar-lg ms-n4">
      <img src="../../assets/img/user-02.png" alt="">
    </span>
    <span class="avatar avatar-lg bg-primary text-white ms-n4">
      <span class="avatar-initials fs-6">3+</span>
    </span>
  </div>

  <div class="avatar-group d-inline-flex align-items-center">
    <span class="avatar avatar-md">
      <img src="../../assets/img/user-01.png" alt="">
    </span>
    <span class="avatar avatar-md ms-n3">
      <img src="../../assets/img/user-03.png" alt="">
    </span>
    <span class="avatar avatar-md bg-success text-white ms-n3">
      <span class="avatar-initials fs-6">B</span>
    </span>
    <span class="avatar avatar-md bg-warning text-white ms-n3">
      <span class="avatar-initials fs-6">M</span>
    </span>
    <span class="avatar avatar-md ms-n3">
      <img src="../../assets/img/user-02.png" alt="">
    </span>
    <span class="avatar avatar-md bg-primary text-white ms-n3">
      <span class="avatar-initials fs-6">3+</span>
    </span>
  </div>
  <!-- end avatar-->
Alerts
Badge