- var page_Title = 'Avatars';
- var theme_customizer      = true;
- var sidebar               = true;
- var slick                 = true;
- var header_slider         = true;
- var animate               = true;
- var scrollbar             = true;
- var prism                 = true;
- var clipboard             = true;
- var customcard            = true;
- var height_equal          = true; 

doctype html
html(lang='en')
  include ../../components/header-files
  body
    include ../../components/loader
    include ../../components/taptop
    // page-wrapper Start
    #pageWrapper.page-wrapper.compact-wrapper
      include ../../components/header
      // Page Body Start
      .page-body-wrapper
        include ../../components/sidebar
        .page-body
          .container.w-full
            .page-title
              .grid.grid-cols-12.mx-2.items-center
                div(class="col-span-6 sm:col-span-12")
                  h3
                    | Avatars
                div(class="col-span-6 sm:col-span-12")
                  ol.breadcrumb.flex
                    li.breadcrumb-item 
                      a(href='index.html')                                
                        svg.stroke-icon 
                          use(href='../assets/svg/icon-sprite.svg#stroke-home')
                    li.breadcrumb-item Ui Kits
                    li.breadcrumb-item.active Avatars  
          // Container-fluid starts 
          .container
            .user-profile 
              .grid.grid-cols-12.card-gap
                div(class="col-span-4 xl:col-span-6 md:col-span-12")
                  .card  
                    .card-header
                      h5 Sizes 
                      p.f-m-light.mt-1
                        | Use size of avatar like 
                        code img-* (70/80/90/100)
                        |  class.
                      .card-header-right 
                        ul.list-unstyled.card-option
                          li
                            i.fa-solid.fa-gear.fa-spin  
                          li
                            i.view-html.fa-solid.fa-code
                          li
                            i.icofont.icofont-maximize.full-card
                          li
                            i.icofont.icofont-minus.minimize-card
                          li
                            i.icofont.icofont-refresh.reload-card
                          li
                            i.icofont.icofont-error.close-card
                    .card-body.avatar-showcase
                      .avatars
                        div.avatar
                          img(src='../assets/images/avtar/3.jpg', alt='#' class="w-[100px] rounded-full") 
                        div.avatar
                          img(src='../assets/images/avtar/4.jpg', alt='#' class="w-[90px] rounded-full")
                        div.avatar
                          img(src='../assets/images/avtar/7.jpg', alt='#' class="w-[80px] rounded-full")
                        div.avatar
                          img(src='../assets/images/avtar/11.jpg', alt='#' class="w-[70px] rounded-full")
                      .code-box-copy
                        button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#avatar-size', title='Copy')
                          i.icofont.icofont-copy-alt
                        pre.custom-scrollbar
                          code.language-html#avatar-size
                            |&lt;div class="card-body avatar-showcase"&gt;
                            |  &lt;div class="avatars"&gt;
                            |    &lt;div class="avatar"&gt;
                            |      &lt;img class="img-100 rounded-full" src="../assets/images/avtar/3.jpg" alt="#"&gt;
                            |    &lt;/div&gt;
                            |    &lt;div class="avatar"&gt;
                            |      &lt;img class="img-90 rounded-full" src="../assets/images/avtar/4.jpg" alt="#"&gt;
                            |    &lt;/div&gt;
                            |    &lt;div class="avatar"&gt;
                            |      &lt;img class="img-80 rounded-full" src="../assets/images/avtar/7.jpg" alt="#"&gt;
                            |    &lt;/div&gt;
                            |    &lt;div class="avatar"&gt;
                            |      &lt;img class="img-70 rounded-full" src="../assets/images/avtar/11.jpg" alt="#"&gt;
                            |    &lt;/div&gt;
                            |  &lt;/div&gt;
                            |&lt;/div&gt;
                div(class="col-span-4 xl:col-span-6 md:col-span-12")
                  .card
                    .card-header
                      h5 Status Indicator
                      p.f-m-light.mt-1
                        | Use status of avatar like
                        code  status-* (online/offline/dnd)
                      .card-header-right
                        ul.list-unstyled.card-option
                          li
                            i.fa-solid.fa-gear.fa-spin
                          li
                            i.view-html.fa-solid.fa-code
                          li
                            i.icofont.icofont-maximize.full-card
                          li
                            i.icofont.icofont-minus.minimize-card
                          li
                            i.icofont.icofont-refresh.reload-card
                          li
                            i.icofont.icofont-error.close-card
                    .card-body.avatar-showcase
                      .avatars
                        div.avatar
                          img(src='../assets/images/user/1.jpg', alt='#' class="w-[100px] rounded-full")
                          .status.bg-success
                        div.avatar
                          img(src='../assets/images/avtar/16.jpg', alt='#' class="w-[90px] rounded-full")
                          .status.bg-warning
                        div.avatar
                          img(src='../assets/images/user/3.png', alt='#' class="w-[80px] rounded-full")
                          .status.bg-danger
                        div.avatar
                          img(src='../assets/images/user/6.jpg', alt='#' class="w-[70px] rounded-full")
                          .status.bg-success
                      .code-box-copy
                        button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#status-indicator', title='Copy')
                          i.icofont.icofont-copy-alt
                        pre.custom-scrollbar
                          code.language-html#status-indicator
                            |&lt;div class="avatars"&gt;
                            |  &lt;div class="avatar"&gt;
                            |    &lt;img class="img-100 rounded-full" src="../assets/images/user/1.jpg" alt="#"&gt;
                            |    &lt;div class="status bg-success"&gt;&lt;/div&gt;
                            |  &lt;/div&gt;
                            |  &lt;div class="avatar"&gt;
                            |    &lt;img class="img-90 rounded-full" src="../assets/images/avtar/16.jpg" alt="#"&gt;
                            |    &lt;div class="status bg-warning"&gt;&lt;/div&gt;
                            |  &lt;/div&gt;
                            |  &lt;div class="avatar"&gt;
                            |    &lt;img class="img-80 rounded-full" src="../assets/images/user/3.png" alt="#"&gt;
                            |    &lt;div class="status bg-danger"&gt;&lt;/div&gt;
                            |  &lt;/div&gt;
                            |  &lt;div class="avatar"&gt;
                            |    &lt;img class="img-70 rounded-full" src="../assets/images/user/6.jpg" alt="#"&gt;
                            |    &lt;div class="status bg-success"&gt;&lt;/div&gt;
                            |  &lt;/div&gt;
                            |&lt;/div&gt;
                div(class="col-span-4 xl:col-span-6 lg:col-span-12")
                  .card
                    .card-header
                      h5 Shapes
                      p.f-m-light.mt-1
                        | Use shapes of avatar like
                        code  rounded-r-* (8/30/35/25)
                      .card-header-right
                        ul.list-unstyled.card-option
                          li
                            i.fa-solid.fa-gear.fa-spin
                          li
                            i.view-html.fa-solid.fa-code
                          li
                            i.icofont.icofont-maximize.full-card
                          li
                            i.icofont.icofont-minus.minimize-card
                          li
                            i.icofont.icofont-refresh.reload-card
                          li
                            i.icofont.icofont-error.close-card
                    .card-body.avatar-showcase
                      .avatars
                        div.avatar
                          img(src='../assets/images/user/14.png', alt='#' class="w-[100px] rounded-[8px]") 
                        div.avatar
                          img(src='../assets/images/dashboard-11/user/12.jpg', alt='#' class="w-[90px] rounded-[30px]")
                        div.avatar
                          img(src='../assets/images/user/2.png', alt='#' class="w-[80px] rounded-[35px]")
                        div.avatar
                          img(src='../assets/images/user/12.png', alt='#' class="w-[70px] rounded-full")
                      .code-box-copy
                        button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#avatar-shapes', title='Copy')
                          i.icofont.icofont-copy-alt
                        pre.custom-scrollbar
                          code.language-html#avatar-shapes
                            |&lt;div class="avatars"&gt;
                            |  &lt;div class="avatar"&gt;
                            |    &lt;img class="img-100 rounded-[8px]" src="../assets/images/user/14.png" alt="#"&gt;
                            |  &lt;/div&gt;
                            |  &lt;div class="avatar"&gt;
                            |    &lt;img class="img-90 rounded-[30px]" src="../assets/images/dashboard-11/user/12.jpg" alt="#"&gt;
                            |  &lt;/div&gt;
                            |  &lt;div class="avatar"&gt;
                            |    &lt;img class="img-80 rounded-[35px]" src="../assets/images/user/2.png" alt="#"&gt;
                            |  &lt;/div&gt;
                            |  &lt;div class="avatar"&gt;
                            |    &lt;img class="img-70 rounded-full" src="../assets/images/user/12.png" alt="#"&gt;
                            |  &lt;/div&gt;
                            |&lt;/div&gt;
                div(class="col-span-6 lg:col-span-12")
                  .card
                    .card-header
                      h5 Ratios
                      p.f-m-light.mt-1
                        | Use shape to avatar using 
                        code ratio
                        |  and 
                        code  img-* (50/70/80/90/100)
                        |  class.
                      .card-header-right
                        ul.list-unstyled.card-option
                          li
                            i.fa-solid.fa-gear.fa-spin
                          li
                            i.view-html.fa-solid.fa-code
                          li
                            i.icofont.icofont-maximize.full-card
                          li
                            i.icofont.icofont-minus.minimize-card
                          li
                            i.icofont.icofont-refresh.reload-card
                          li
                            i.icofont.icofont-error.close-card
                    .card-body.avatar-showcase
                      .avatars
                        div.avatar.ratio
                          img(src='../assets/images/dashboard-11/user/2.jpg', alt='#' class="w-[100px] rounded-[8px]") 
                        div.avatar.ratio
                          img(src='../assets/images/dashboard-11/user/4.jpg', alt='#' class="w-[90px] rounded-[8px]")
                        div.avatar.ratio
                          img(src='../assets/images/dashboard-11/user/7.jpg', alt='#' class="w-[80px] rounded-[8px]")
                        div.avatar.ratio
                          img(src='../assets/images/dashboard-11/user/9.jpg', alt='#' class="w-[70px] rounded-[8px]")
                        div.avatar.ratio
                          img(src='../assets/images/dashboard-11/user/10.jpg', alt='#' class="w-[50px] rounded-[8px]")
                      .code-box-copy
                        button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#avatar-ratio', title='Copy')
                          i.icofont.icofont-copy-alt
                        pre.custom-scrollbar
                          code.language-html#avatar-ratio
                            |&lt;div class="avatars"&gt;
                            |  &lt;div class="avatar ratio"&gt;
                            |    &lt;img class="rounded-[8px] img-100" src="../assets/images/dashboard-11/user/2.jpg" alt="#"&gt;
                            |  &lt;/div&gt;
                            |  &lt;div class="avatar ratio"&gt;
                            |    &lt;img class="rounded-[8px] img-90" src="../assets/images/dashboard-11/user/4.jpg" alt="#"&gt;
                            |  &lt;/div&gt;
                            |  &lt;div class="avatar ratio"&gt;
                            |    &lt;img class="rounded-[8px] img-80" src="../assets/images/dashboard-11/user/7.jpg" alt="#"&gt;
                            |  &lt;/div&gt;
                            |  &lt;div class="avatar ratio"&gt;
                            |    &lt;img class="rounded-[8px] img-70" src="../assets/images/dashboard-11/user/9.jpg" alt="#"&gt;
                            |  &lt;/div&gt;
                            |  &lt;div class="avatar ratio"&gt;
                            |    &lt;img class="rounded-[8px] img-50" src="../assets/images/dashboard-11/user/10.jpg" alt="#"&gt;
                            |  &lt;/div&gt;
                            |&lt;/div&gt;
                div(class="col-span-6 lg:col-span-12 xl:col-span-12")
                  .card
                    .card-header
                      h5 Grouping
                      p.f-m-light.mt-1
                        | Use group of avatars like 
                        code img-* (40/50/60/80/100) 
                        | and 
                        code rounded-* (8/30/35)
                        | .
                      .card-header-right
                        ul.list-unstyled.card-option
                          li
                            i.fa-solid.fa-gear.fa-spin
                          li
                            i.view-html.fa-solid.fa-code
                          li
                            i.icofont.icofont-maximize.full-card
                          li
                            i.icofont.icofont-minus.minimize-card
                          li
                            i.icofont.icofont-refresh.reload-card
                          li
                            i.icofont.icofont-error.close-card
                    .card-body.avatar-showcase
                      .avatars
                        .customers.inline-block.avatar-group
                          ul.flex.items-center
                            li.inline-block
                              img(src='../assets/images/dashboard-11/user/11.jpg', alt='#' class="w-[100px] rounded-[8px]") 
                            li.inline-block
                              img(src='../assets/images/dashboard-11/user/8.jpg', alt='#' class="w-[80px] rounded-[30px]")
                            li.inline-block
                              img(src='../assets/images/dashboard-11/user/5.jpg', alt='#' class="w-[50px] rounded-[35px]")
                        .customers.inline-block.avatar-group
                          ul.flex.items-center
                            li.inline-block
                              img(src='../assets/images/dashboard-11/user/8.jpg', alt='#' class="w-[60px] rounded-full")
                            li.inline-block
                              img(src='../assets/images/dashboard-11/user/11.jpg', alt='#' class="w-[80px] rounded-[8px]")
                            li.inline-block
                              img(src='../assets/images/dashboard-11/user/5.jpg', alt='#' class="w-[60px] rounded-full") 
                        .customers.inline-block.avatar-group
                          ul.flex.items-center
                            li.inline-block
                              img(src='../assets/images/dashboard-11/user/8.jpg', alt='' class="w-[40px] rounded-full")
                            li.inline-block
                              img(src='../assets/images/dashboard-11/user/5.jpg', alt='' class="w-[40px] rounded-full")
                            li.inline-block
                              img(src='../assets/images/dashboard-11/user/11.jpg', alt='' class="w-[40px] rounded-full") 
                      .code-box-copy
                        button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#avatar-grouping', title='Copy')
                          i.icofont.icofont-copy-alt
                        pre.custom-scrollbar
                          code.language-html#avatar-grouping
                            |&lt;div class="avatars"&gt;
                            |  &lt;div class="customers inline-block avatar-group"&gt;
                            |    &lt;ul&gt;
                            |      &lt;li class="inline-block"&gt;
                            |        &lt;img class="img-100 rounded-[8px]" src="../assets/images/dashboard-11/user/11.jpg" alt="#"&gt;
                            |      &lt;/li&gt;
                            |      &lt;li class="inline-block"&gt;
                            |        &lt;img class="img-80 rounded-[30px]" src="../assets/images/dashboard-11/user/8.jpg" alt="#"&gt;
                            |      &lt;/li&gt;
                            |      &lt;li class="inline-block"&gt;
                            |        &lt;img class="img-50 rounded-[35px]" src="../assets/images/dashboard-11/user/5.jpg" alt="#"&gt;
                            |      &lt;/li&gt;
                            |    &lt;/ul&gt;
                            |  &lt;/div&gt;
                            |  &lt;div class="customers inline-block avatar-group"&gt;
                            |    &lt;ul&gt;
                            |      &lt;li class="inline-block"&gt;
                            |        &lt;img class="img-60 rounded-full" src="../assets/images/dashboard-11/user/8.jpg" alt="#"&gt;
                            |      &lt;/li&gt;
                            |      &lt;li class="inline-block"&gt;
                            |        &lt;img class="rounded-[8px] img-80" src="../assets/images/dashboard-11/user/11.jpg" alt="#"&gt;
                            |      &lt;/li&gt;
                            |      &lt;li class="inline-block"&gt;
                            |        &lt;img class="img-60 rounded-full" src="../assets/images/dashboard-11/user/5.jpg" alt="#"&gt;
                            |      &lt;/li&gt;
                            |    &lt;/ul&gt;
                            |  &lt;/div&gt;
                            |  &lt;div class="customers inline-block avatar-group"&gt;
                            |    &lt;ul&gt;
                            |      &lt;li class="inline-block"&gt;
                            |        &lt;img class="img-40 rounded-full" src="../assets/images/dashboard-11/user/8.jpg" alt=""&gt;
                            |      &lt;/li&gt;
                            |      &lt;li class="inline-block"&gt;
                            |        &lt;img class="img-40 rounded-full" src="../assets/images/dashboard-11/user/5.jpg" alt=""&gt;
                            |      &lt;/li&gt;
                            |      &lt;li class="inline-block"&gt;
                            |        &lt;img class="img-40 rounded-full" src="../assets/images/dashboard-11/user/11.jpg" alt=""&gt;
                            |      &lt;/li&gt;
                            |    &lt;/ul&gt;
                            |  &lt;/div&gt;
                            |&lt;/div&gt;
                div(class="col-span-4 lg:col-span-12")
                  .card
                    .card-header
                      h5 Badge-Indicator
                      p.f-m-light.mt-1
                        | Use
                        code  badge 
                        | class with avatar to indicate and provide indication.
                      .card-header-right
                        ul.list-unstyled.card-option
                          li
                            i.fa-solid.fa-gear.fa-spin
                          li
                            i.view-html.fa-solid.fa-code
                          li
                            i.icofont.icofont-maximize.full-card
                          li
                            i.icofont.icofont-minus.minimize-card
                          li
                            i.icofont.icofont-refresh.reload-card
                          li
                            i.icofont.icofont-error.close-card
                    .card-body.avatar-showcase
                      .avatars.badge-avatar
                        div.avatar
                          img(src='../assets/images/dashboard-9/user/1.png', alt='#' class="w-[100px] rounded-full")
                          .badge.badge-success.absolute.rounded-full.top-0.start-0.text-white A
                        div.avatar
                          img(src='../assets/images/dashboard-9/user/2.png', alt='#' class="w-[90px] rounded-full")
                          .badge.badge-warning.absolute.rounded-full.bottom-0.end-0.text-white C
                        div.avatar
                          img(src='../assets/images/dashboard-9/user/3.png', alt='#' class="w-[80px] rounded-full")
                          .badge.badge-danger.absolute.rounded-full.top-0.end-0.text-white D
                        div.avatar
                          img(src='../assets/images/dashboard-9/user/4.png', alt='#' class="w-[70px] rounded-full")
                          .badge.badge-success.absolute.rounded-full.bottom-0.start-0.text-white B
                      .code-box-copy
                        button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#avatar-indicator', title='Copy')
                          i.icofont.icofont-copy-alt
                        pre.custom-scrollbar
                          code.language-html#avatar-indicator
                            |&lt;div class="avatars badge-avatar"&gt;
                            |  &lt;div class="avatar"&gt;
                            |    &lt;img class="img-100 rounded-full" src="../assets/images/dashboard-9/user/1.png" alt="#"&gt;
                            |    &lt;div class="badge badge-success absolute rounded-full top-0 start-0"&gt;A&lt;/div&gt;
                            |  &lt;/div&gt;
                            |  &lt;div class="avatar"&gt;
                            |    &lt;img class="img-90 rounded-full" src="../assets/images/dashboard-9/user/2.png" alt="#"&gt;
                            |    &lt;div class="badge badge-warning absolute rounded-full bottom-0 end-0"&gt;C&lt;/div&gt;
                            |  &lt;/div&gt;
                            |  &lt;div class="avatar"&gt;
                            |    &lt;img class="img-80 rounded-full" src="../assets/images/dashboard-9/user/3.png" alt="#"&gt;
                            |    &lt;div class="badge badge-danger absolute rounded-full top-0 end-0"&gt;D&lt;/div&gt;
                            |  &lt;/div&gt;
                            |  &lt;div class="avatar"&gt;
                            |    &lt;img class="img-70 rounded-full" src="../assets/images/dashboard-9/user/4.png" alt="#"&gt;
                            |    &lt;div class="badge badge-success absolute rounded-full bottom-0 start-0"&gt;B&lt;/div&gt;
                            |  &lt;/div&gt;
                            |&lt;/div&gt;
                div(class="col-span-4 lg:col-span-12")
                  .card
                    .card-header 
                      h5 Initial Letter Avatar
                      p.f-m-light.mt-1
                        | Use initial letter as a avatar.
                      .card-header-right
                        ul.list-unstyled.card-option
                          li
                            i.fa-solid.fa-gear.fa-spin
                          li
                            i.view-html.fa-solid.fa-code
                          li
                            i.icofont.icofont-maximize.full-card
                          li
                            i.icofont.icofont-minus.minimize-card
                          li
                            i.icofont.icofont-refresh.reload-card
                          li
                            i.icofont.icofont-error.close-card
                    .card-body.justify-self-center(class="lg:justify-self-start")
                      .letter-avatar
                        h6.txt-primary.bg-light-primary P 
                        h6.txt-secondary.bg-light-secondary I
                        h6.txt-success.bg-light-success X
                        h6.txt-danger.bg-light-danger E 
                        h6.txt-info.bg-light-info L
                      .code-box-copy
                        button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#initial-letters', title='Copy')
                          i.icofont.icofont-copy-alt
                        pre.custom-scrollbar
                          code.language-html#initial-letters
                            |&lt;div class="letter-avatar"&gt;
                            |  &lt;h6 class="txt-primary bg-light-primary"&gt;P &lt;/h6&gt;
                            |  &lt;h6 class="txt-secondary bg-light-secondary"&gt;I&lt;/h6&gt;
                            |  &lt;h6 class="txt-success bg-light-success"&gt;X&lt;/h6&gt;
                            |  &lt;h6 class="txt-danger bg-light-danger"&gt;E &lt;/h6&gt;
                            |  &lt;h6 class="txt-info bg-light-info"&gt;L&lt;/h6&gt;
                            |&lt;/div&gt;
                div(class="col-span-4 lg:col-span-12")
                  .card
                    .card-header
                      h5 Animated Avatar
                      p.f-m-light.mt-1
                        | Use
                        code  animation-ping 
                        | class with avatar to indicate 
                        code active/offline/dnd
                        |  status.
                      .card-header-right
                        ul.list-unstyled.card-option
                          li
                            i.fa-solid.fa-gear.fa-spin
                          li
                            i.view-html.fa-solid.fa-code
                          li
                            i.icofont.icofont-maximize.full-card
                          li
                            i.icofont.icofont-minus.minimize-card
                          li
                            i.icofont.icofont-refresh.reload-card
                          li
                            i.icofont.icofont-error.close-card
                    .card-body.avatar-showcase
                      .avatars
                        div.avatar
                          img(src='../assets/images/user/7.jpg', alt='#' class="w-[100px] rounded-full")
                          .status.bg-success.animation-ping
                        div.avatar
                          img(src='../assets/images/user/3.jpg', alt='#' class="w-[90px] rounded-full")
                          .status.bg-warning.animation-ping
                        div.avatar
                          img(src='../assets/images/user/2.jpg', alt='#' class="w-[80px] rounded-full")
                          .status.bg-danger.animation-ping
                        div.avatar
                          img(src='../assets/images/user/11.png', alt='#' class="w-[70px] rounded-full")
                          .status.bg-success.animation-ping
                      .code-box-copy
                        button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#animated-avatar', title='Copy')
                          i.icofont.icofont-copy-alt
                        pre.custom-scrollbar
                          code.language-html#animated-avatar
                            |&lt;div class="avatars"&gt;
                            |  &lt;div class="avatar"&gt;
                            |    &lt;img class="img-100 rounded-full" src="../assets/images/user/7.jpg" alt="#"&gt;
                            |    &lt;div class="status bg-success animation-ping"&gt;&lt;/div&gt;
                            |  &lt;/div&gt;
                            |  &lt;div class="avatar"&gt;
                            |    &lt;img class="img-90 rounded-full" src="../assets/images/user/3.jpg" alt="#"&gt;
                            |    &lt;div class="status bg-warning animation-ping"&gt;&lt;/div&gt;
                            |  &lt;/div&gt;
                            |  &lt;div class="avatar"&gt;
                            |    &lt;img class="img-80 rounded-full" src="../assets/images/user/2.jpg" alt="#"&gt;
                            |    &lt;div class="status bg-danger animation-ping"&gt;&lt;/div&gt;
                            |  &lt;/div&gt;
                            |  &lt;div class="avatar"&gt;
                            |    &lt;img class="img-70 rounded-full" src="../assets/images/user/11.png" alt="#"&gt;
                            |    &lt;div class="status bg-success animation-ping"&gt;&lt;/div&gt;
                            |  &lt;/div&gt;
                            |&lt;/div&gt;
          // Container-fluid Ends
        include ../../components/footer
    include ../../components/footer-files