Avatar | Alina - Premium Admin Template

Gradient

Use color bg-gradient* to change the background.

AZ TS


  <div class="d-flex align-content-center flex-wrap gap-3">

  <span class="bg-gradient-primary h-50 w-50 overflow-hidden d-flex-center b-r-50">
    <img src="https://pinmeets.com/assets/images/avatar/02.png" alt="avatar" class="img-fluid">
  </span>

  <span class="bg-gradient-secondary h-50 w-50 overflow-hidden d-flex-center b-r-50">
    <img src="https://pinmeets.com/assets/images/avatar/03.png" alt="avatar" class="img-fluid">
  </span>

  <span class="bg-gradient-success h-50 w-50 overflow-hidden d-flex-center b-r-50">
    <img src="https://pinmeets.com/assets/images/avatar/01.png" alt="avatar" class="img-fluid">
  </span>

  <span class="bg-gradient-danger h-50 w-50 d-flex-center b-r-50">
    <i class="ti ti-user f-s-20"></i>
  </span>

  <span class="bg-gradient-warning h-50 w-50 d-flex-center b-r-50">
    <i class="ti ti-user f-s-20"></i>
  </span>

  <span class="bg-gradient-info h-50 w-50 d-flex-center b-r-50">
    <i class="ti ti-user f-s-20"></i>
  </span>

  <span class="bg-gradient-dark h-50 w-50 d-flex-center b-r-50">
    AZ
  </span>

  <span class="bg-gradient-light h-50 w-50 d-flex-center b-r-50">
    TS
  </span>

</div>

Solid

Use color bg-* to change the background

PV BQ


  <div class="d-flex align-content-center flex-wrap gap-3">

  <span class="bg-primary h-50 w-50 overflow-hidden d-flex-center b-r-50">
    <img src="https://pinmeets.com/assets/images/avatar/04.png" alt="avatar" class="img-fluid">
  </span>

  <span class="bg-secondary h-50 w-50 overflow-hidden d-flex-center b-r-50">
    <img src="https://pinmeets.com/assets/images/avatar/05.png" alt="avatar" class="img-fluid">
  </span>

  <span class="bg-success h-50 w-50 overflow-hidden d-flex-center b-r-50">
    <img src="https://pinmeets.com/assets/images/avatar/06.png" alt="avatar" class="img-fluid">
  </span>

  <span class="bg-danger h-50 w-50 d-flex-center b-r-50">
    <i class="ti ti-brand-reddit f-s-20"></i>
  </span>

  <span class="bg-warning h-50 w-50 d-flex-center b-r-50">
    <i class="ti ti-butterfly f-s-20"></i>
  </span>

  <span class="bg-info h-50 w-50 d-flex-center b-r-50">
    <i class="ti ti-clock-hour-3 f-s-20"></i>
  </span>

  <span class="bg-dark h-50 w-50 d-flex-center b-r-50">
    PV
  </span>

  <span class="bg-light h-50 w-50 d-flex-center b-r-50">
    BQ
  </span>

</div>

Light background

Use color bg-light-* to change the background

CD P MT

                            
 <div class="d-flex align-content-center flex-wrap gap-3">

  <span class="bg-light-primary h-50 w-50 overflow-hidden d-flex-center b-r-50">
    <img src="https://pinmeets.com/assets/images/avatar/10.png" alt="avatar" class="img-fluid">
  </span>

  <span class="bg-light-secondary h-50 w-50 overflow-hidden d-flex-center b-r-50">
    <img src="https://pinmeets.com/assets/images/avatar/11.png" alt="avatar" class="img-fluid">
  </span>

  <span class="bg-light-success h-50 w-50 d-flex-center b-r-50">
    <i class="ti ti-user-circle f-s-24"></i>
  </span>

  <span class="bg-light-danger h-50 w-50 d-flex-center b-r-50">
    <i class="ti ti-user-circle f-s-24"></i>
  </span>

  <span class="bg-light-warning h-50 w-50 d-flex-center b-r-50">
    <i class="ti ti-user-circle f-s-24"></i>
  </span>

  <span class="bg-light-info h-50 w-50 d-flex-center b-r-50">
    CD
  </span>

  <span class="bg-light-dark h-50 w-50 d-flex-center b-r-50">
    P
  </span>

  <span class="bg-light-light h-50 w-50 d-flex-center b-r-50">
    <span class="text-dark">MT</span>
  </span>

</div>

Outline

For light style use bg-outline-* class.

                            
  <div class="d-flex align-content-center flex-wrap gap-3">

  <span class="bg-outline-primary h-50 w-50 d-flex-center b-r-50">
    <i class="ti ti-circle-letter-a f-s-24"></i>
  </span>

  <span class="bg-outline-secondary h-50 w-50 d-flex-center b-r-50">
    <i class="ti ti-circle-letter-b f-s-24"></i>
  </span>

  <span class="bg-outline-success h-50 w-50 d-flex-center b-r-50">
    <i class="ti ti-circle-letter-c f-s-24"></i>
  </span>

  <span class="bg-outline-danger h-50 w-50 d-flex-center b-r-50">
    <i class="ti ti-circle-letter-d f-s-24"></i>
  </span>

  <span class="bg-outline-warning h-50 w-50 d-flex-center b-r-50">
    <i class="ti ti-circle-letter-e f-s-24"></i>
  </span>

  <span class="bg-outline-info h-50 w-50 d-flex-center b-r-50">
    <i class="ti ti-circle-letter-f f-s-24"></i>
  </span>

  <span class="bg-outline-dark h-50 w-50 d-flex-center b-r-50">
    <i class="ti ti-circle-letter-g f-s-24"></i>
  </span>

  <span class="bg-outline-light h-50 w-50 d-flex-center b-r-50">
    <i class="ti ti-circle-letter-h f-s-24"></i>
  </span>

</div>

Radius

Radius avatar text in soft color example

                            
                               <div class="d-flex align-content-center flex-wrap gap-3">
    <span class="bg-primary h-50 w-50 d-flex-center b-r-0">
        <i class="ti ti-user f-s-20"></i>
    </span>
    <span class="bg-secondary h-50 w-50 d-flex-center b-r-5">
        <i class="ti ti-user f-s-20"></i>
    </span>
    <span class="bg-success h-50 w-50 d-flex-center b-r-10">
        <i class="ti ti-user f-s-20"></i>
    </span>
    <span class="bg-danger h-50 w-50 d-flex-center b-r-15">
        <i class="ti ti-user f-s-20"></i>
    </span>
    <span class="bg-warning h-50 w-50 d-flex-center b-r-17">
        <i class="ti ti-user f-s-20"></i>
    </span>
    <span class="bg-light h-50 w-50 d-flex-center b-r-22">
        <i class="ti ti-user f-s-25"></i>
    </span>
    <span class="bg-dark h-50 w-50 d-flex-center b-r-50">
        <i class="ti ti-user f-s-20"></i>
    </span>
</div>

Size

XS SM MD LG XL XXL

                    
                <div class="d-flex gap-3 flex-wrap">
    <span class="bg-secondary h-30 w-30 d-flex-center b-r-50">
        XS
    </span>
    <span class="bg-success h-35 w-35 d-flex-center b-r-50">
        SM
    </span>
    <span class="bg-info h-40 w-40 d-flex-center b-r-50">
        MD
    </span>
    <span class="bg-warning h-45 w-45 d-flex-center b-r-50">
        LG
    </span>
    <span class="bg-danger h-50 w-50 d-flex-center b-r-50">
        XL
    </span>
    <span class="bg-light h-60 w-60 d-flex-center b-r-50">
        XXL
    </span>
</div>

Indicator Position And Icon

X Y 0 XYZ

  
 <div class="card-body">
    <div class="d-flex gap-3 flex-wrap">
        <span class="bg-danger h-50 w-50 d-flex-center b-r-50 position-relative">
            <i class="ti ti-user f-s-20"></i>
            <span class="position-absolute  start-1 top-0 p-1 bg-danger border border-light rounded-circle"></span>
        </span>
        <span class="bg-success h-50 w-50 d-flex-center b-r-50 position-relative">
            <i class="ti ti-user f-s-20"></i>
            <span class="position-absolute bottom-0 start-1 p-1 bg-success border border-light rounded-circle"></span>
        </span>
        <span class="bg-warning h-50 w-50 d-flex-center b-r-50 position-relative">
            <i class="ti ti-user f-s-20"></i>
            <span class="position-absolute bottom-0 end-0 p-1 bg-warning border border-light rounded-circle"></span>
        </span>
        <span class="bg-gradient-danger h-50 w-50 d-flex-center b-r-50 position-relative">
            <img alt="avatar" class="img-fluid b-r-50" src="https://pinmeets.com/assets/images/avatar/15.png">
            <span class="position-absolute top-0 end-0 p-1 bg-success border border-light rounded-circle"></span>
        </span>
        <span class="bg-gradient-success h-50 w-50 d-flex-center b-r-50 position-relative">
            <img alt="avatar" class="img-fluid b-r-50" src="https://pinmeets.com/assets/images/avatar/14.png">
            <span class="position-absolute top-0 end-0 d-flex-center bg-warning border-light rounded-circle text-center h-20 w-20 f-s-10 start-30">3</span>
        </span>
        <span class="bg-gradient-warning h-50 w-50 d-flex-center b-r-50 position-relative">
            <img alt="avatar" class="img-fluid b-r-50" src="https://pinmeets.com/assets/images/avatar/16.png">
            <span class="position-absolute top-0 d-flex-center bg-gradient-danger border border-light rounded-circle text-center h-20 w-20 f-s-10 start-30">
                <i class="ti ti-mail"></i>
            </span>
        </span>
        <span class="bg-light-dark h-50 w-50 d-flex-center b-r-50 position-relative">
            X
            <span class="position-absolute top-0 end-0 p-1 bg-gradient-dark border border-light rounded-circle"></span>
        </span>
        <span class="bg-light-info h-50 w-50 d-flex-center b-r-50 position-relative">
            Y
            <span class="position-absolute top-0 end-0 d-flex-center bg-gradient-info border-light rounded-circle text-center h-20 w-20 f-s-10 start-30">0</span>
        </span>
        <span class="bg-light-primary h-50 w-50 d-flex-center b-r-50 position-relative">
            XYZ
            <span class="position-absolute top-0 d-flex-center bg-gradient-primary border border-light rounded-circle text-center h-20 w-20 f-s-10 start-30">
                <i class="ti ti-alarm-minus"></i>
            </span>
        </span>
    </div>
</div>

Group with tooltip

User group with tooltip

  
        <div class="d-flex gap-3 flex-wrap">
    <ul class="avatar-group">
        <li class="h-50 w-50 bg-info d-flex-center b-r-50 overflow-hidden ">
            <i class="ti ti-user f-s-20"></i>
        </li>
        <li class="h-50 w-50 bg-warning d-flex-center b-r-50 overflow-hidden " data-bs-title="Lennon Briggs" data-bs-toggle="tooltip">
            <i class="ti ti-user f-s-20"></i>
        </li>
        <li class="h-50 w-50 bg-dark d-flex-center b-r-50 overflow-hidden text-bg-dark" data-bs-title="Maya Horton" data-bs-toggle="tooltip">
            <i class="ti ti-user f-s-20"></i>
        </li>
    </ul>

    <ul class="avatar-group">
        <li class="bg-gradient-primary overflow-hidden h-50 w-50 d-flex-center b-r-50" data-bs-title="Athena Stewart" data-bs-toggle="tooltip">
            <img alt="avatar" class="img-fluid" src="https://pinmeets.com/assets/images/avatar/11.png">
        </li>
        <li class="bg-gradient-secondary overflow-hidden h-50 w-50 d-flex-center b-r-50" data-bs-title="Connor Collins" data-bs-toggle="tooltip">
            <img alt="avatar" class="img-fluid" src="https://pinmeets.com/assets/images/avatar/12.png">
        </li>
        <li class="bg-gradient-success overflow-hidden h-50 w-50 d-flex-center b-r-50" data-bs-title="Raiden Simpson" data-bs-toggle="tooltip">
            <img alt="avatar" class="img-fluid" src="https://pinmeets.com/assets/images/avatar/13.png">
        </li>
    </ul>

    <ul class="avatar-group">
        <li class="bg-danger h-50 w-50 d-flex-center b-r-50" data-bs-title="Everlee Lambert" data-bs-toggle="tooltip">
            A
        </li>
        <li class="bg-dark h-50 w-50 d-flex-center b-r-50" data-bs-title="Hunter Scott" data-bs-toggle="tooltip">
            CD
        </li>
        <li class="bg-warning h-50 w-50 d-flex-center b-r-50" data-bs-title="Hunter Scott" data-bs-toggle="tooltip">
            XYZ
        </li>
        <li class="bg-secondary h-30 w-30 d-flex-center b-r-50" data-bs-title="2 More" data-bs-toggle="tooltip">
            2+
        </li>
    </ul>

    <ul class="avatar-group">
        <li class="h-50 w-50 bg-primary d-flex-center b-r-50 overflow-hidden text-bg-primary b-2-light" data-bs-title="Sabrina Torres" data-bs-toggle="tooltip">
            <img alt="avatar" class="img-fluid" src="https://pinmeets.com/assets/images/avatar/08.png">
        </li>
        <li class="h-50 w-50 bg-success d-flex-center b-r-50 overflow-hidden text-bg-success b-2-light" data-bs-title="Eva Bailey" data-bs-toggle="tooltip">
            <img alt="avatar" class="img-fluid" src="https://pinmeets.com/assets/images/avatar/05.png">
        </li>
        <li class="h-50 w-50 bg-danger d-flex-center b-r-50 overflow-hidden b-2-light" data-bs-title="Michael Hughes" data-bs-toggle="tooltip">
            <img alt="avatar" class="img-fluid" src="https://pinmeets.com/assets/images/avatar/03.png">
        </li>
        <li class="text-bg-secondary h-35 w-35 d-flex-center b-r-50" data-bs-title="10 More" data-bs-toggle="tooltip">
            10+
        </li>
    </ul>

    <ul class="avatar-group">
        <li class="h-50 w-50 bg-dark d-flex-center b-r-50 b-2-light position-relative" data-bs-title="Sabrina Torres" data-bs-toggle="tooltip">
            <span class="position-absolute top-0 start-2 p-1 bg-danger border border-light rounded-circle"></span>
            <img alt="avatar" class="img-fluid b-r-50 overflow-hidden" src="https://pinmeets.com/assets/images/avatar/09.png">
        </li>
        <li class="h-50 w-50 bg-success d-flex-center b-r-50 b-2-light position-relative" data-bs-title="Sabrina Torres" data-bs-toggle="tooltip">
            <span class="position-absolute bg-success top-0 start-2 p-1 border rounded-circle"></span>
            <img alt="avatar" class="img-fluid b-r-50 overflow-hidden" src="https://pinmeets.com/assets/images/avatar/10.png">
        </li>
        <li class="h-50 w-50 d-flex-center b-r-50 bg-warning b-2-light position-relative" data-bs-title="Sabrina Torres" data-bs-toggle="tooltip">
            <span class="position-absolute top-0 start-2 p-1 bg-warning border border-light rounded-circle"></span>
            <img alt="avatar" class="img-fluid b-r-50 overflow-hidden" src="https://pinmeets.com/assets/images/avatar/11.png">
        </li>
        <li class="h-50 w-50 d-flex-center b-r-50 bg-info b-2-light position-relative" data-bs-title="Sabrina Torres" data-bs-toggle="tooltip">
            <span class="position-absolute top-0 start-2 p-1 bg-info border border-light rounded-circle"></span>
            <img alt="avatar" class="img-fluid b-r-50 overflow-hidden" src="https://pinmeets.com/assets/images/avatar/12.png">
        </li>
        <li class="bg-primary h-35 w-35 d-flex-center b-r-50" data-bs-title="5 More" data-bs-toggle="tooltip">
            5+
        </li>
    </ul>
</div>

Welcome! To UI Kits

Gradient

Solid

Light background

Outline

Radius

Size

Indicator Position And Icon

Group with tooltip

Cart

Minimalist Ceramic Vase

Modern LED Lamp

Comfort Lounge Cushion

Your cart is empty

$3468.70

Notification

No notifications yet