- 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-fluid
            .page-title
              .row
                .col-6
                  h4
                    | Avatars
                .col-6
                  ol.breadcrumb
                    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-fluid
            .user-profile
              .row
                .col-xl-4.col-md-6
                  .card.height-equal
                    .card-header
                      h4.mb-0 Sizes
                      p.mb-0.mt-1
                        | You can change the size of avatar using 
                        code .img- * (70/80/90/100)
                        |  class.
                      .card-header-right
                        ul.list-unstyled.card-option
                          li
                            i.fa.fa-spin.fa-cog
                          li
                            i.view-html.fa.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.img-100.rounded-circle(src='../assets/images/avtar/3.jpg', alt='#') 
                        div.avatar
                          img.img-90.rounded-circle(src='../assets/images/avtar/4.jpg', alt='#')
                        div.avatar
                          img.img-80.rounded-circle(src='../assets/images/avtar/7.jpg', alt='#')
                        div.avatar
                          img.img-70.rounded-circle(src='../assets/images/avtar/11.jpg', alt='#')
                        .code-box-copy
                          button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#avatar-size', title='Copy')
                            i.icofont.icofont-copy-alt
                          pre
                            code.language-html#avatar-size
                              | &lt;!--You can use img-* class through change the size of avatar (70/80/90/100).--&gt;
                              |&lt;div class="avatar"&gt;
                              |&lt;img class="img-100 rounded-circle" src="../assets/images/avtar/3.jpg" alt="#"&gt;
                              |&lt;/div&gt;
                              |&lt;div class="avatar"&gt;
                              |&lt;img class="img-90 rounded-circle" src="../assets/images/avtar/4.jpg" alt="#"&gt;
                              |&lt;/div&gt;
                              |&lt;div class="avatar"&gt;
                              |&lt;img class="img-80 rounded-circle" src="../assets/images/avtar/7.jpg" alt="#"&gt;
                              |&lt;/div&gt;
                              |&lt;div class="avatar"&gt;
                              |&lt;img class="img-70 rounded-circle" src="../assets/images/avtar/11.jpg" alt="#"&gt;
                              |&lt;/div&gt;
                .col-xl-4.col-md-6
                  .card.height-equal
                    .card-header
                      h4.mb-0 Status indicator
                      p.mb-0.mt-1
                        | Using 
                        code  .status-* (online/offline/dnd)
                        |  class you can set the status of avatar.
                      .card-header-right
                        ul.list-unstyled.card-option
                          li
                            i.fa.fa-spin.fa-cog
                          li
                            i.view-html.fa.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.img-100.rounded-circle(src='../assets/images/user/1.jpg', alt='#')
                          .status.bg-success
                        div.avatar
                          img.img-90.rounded-circle(src='../assets/images/avtar/16.jpg', alt='#')
                          .status.bg-warning
                        div.avatar
                          img.img-80.rounded-circle(src='../assets/images/avtar/7.jpg', alt='#')
                          .status.bg-danger
                        div.avatar
                          img.img-70.rounded-circle(src='../assets/images/avtar/3.jpg', alt='#')
                          .status.bg-success
                        .code-box-copy
                          button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#avatar-indicator', title='Copy')
                            i.icofont.icofont-copy-alt
                          pre
                            code.language-html#avatar-indicator
                              |&lt;!-- You can use status-* class through the set status (online/offline/dnd). --&gt;
                              |&lt;div class="avatar"&gt;
                              |&lt;img class="img-100 rounded-circle" 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-circle" 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-circle" src="../assets/images/avtar/7.jpg" 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-circle" src="../assets/images/avtar/3.jpg" alt="#"&gt;
                              |&lt;div class="status bg-success"&gt;&lt;/div&gt;
                              |&lt;/div&gt;
                .col-xl-4.col-md-6
                  .card.height-equal
                    .card-header
                      h4 Shapes
                      p.mb-0.mt-1
                        | Using the
                        code .b-r-* (8/30/35/25)
                        |  class you can set the shapes of avatar.
                      .card-header-right
                        ul.list-unstyled.card-option
                          li
                            i.fa.fa-spin.fa-cog
                          li
                            i.view-html.fa.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.img-100.b-r-8(src='../assets/images/avtar/4.jpg', alt='#') 
                        div.avatar
                          img.img-90.b-r-30(src='../assets/images/avtar/16.jpg', alt='#')
                        div.avatar
                          img.img-80.b-r-35(src='../assets/images/avtar/3.jpg', alt='#')
                        div.avatar
                          img.img-70.rounded-circle(src='../assets/images/avtar/11.jpg', alt='#')
                        .code-box-copy
                          button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#avatar-shapes', title='Copy')
                            i.icofont.icofont-copy-alt
                          pre
                            code.language-html#avatar-shapes
                              |&lt;!-- Give the shape to avatar using .b-r-* class. (8/25/30/35). --&gt;
                              |&lt;div class="avatar"&gt;
                              |&lt;img class="img-100 b-r-8" src="../assets/images/avtar/4.jpg" alt="#"&gt;
                              |&lt;/div&gt;
                              |&lt;div class="avatar"&gt;
                              |&lt;img class="img-90 b-r-30" src="../assets/images/avtar/16.jpg" alt="#"&gt;
                              |&lt;/div&gt;
                              |&lt;div class="avatar"&gt;
                              |&lt;img class="img-80 b-r-35" src="../assets/images/avtar/3.jpg" alt="#"&gt;
                              |&lt;/div&gt;
                              |&lt;div class="avatar"&gt;
                              |&lt;img class="img-70 rounded-circle" src="../assets/images/avtar/11.jpg" alt="#"&gt;
                              |&lt;/div&gt;
                .col-md-6
                  .card.height-equal
                    .card-header
                      h4 Ratio
                      p.mb-0.mt-1
                        | Give the 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.fa-spin.fa-cog
                          li
                            i.view-html.fa.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.b-r-8.img-100(src='../assets/images/avtar/11.jpg', alt='#') 
                        div.avatar.ratio
                          img.b-r-8.img-90(src='../assets/images/avtar/4.jpg', alt='#')
                        div.avatar.ratio
                          img.b-r-8.img-80(src='../assets/images/user/1.jpg', alt='#')
                        div.avatar.ratio
                          img.b-r-8.img-70(src='../assets/images/avtar/16.jpg', alt='#')
                        div.avatar.ratio
                          img.b-r-8.img-50(src='../assets/images/avtar/7.jpg', alt='#')
                        .code-box-copy
                          button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#avatar-ratio', title='Copy')
                            i.icofont.icofont-copy-alt
                          pre
                            code.language-html#avatar-ratio
                              |&lt;!-- You can use b-r-* class through the set status (100/90/80/70/50). --&gt;
                              |&lt;div class="avatars"&gt;
                              |&lt;div class="avatar ratio"&gt;
                              |&lt;img class="b-r-8 img-100" src="../assets/images/avtar/11.jpg" alt="#"&gt;
                              |&lt;/div&gt;
                              |&lt;div class="avatar ratio"&gt;
                              |&lt;img class="b-r-8 img-90" src="../assets/images/avtar/4.jpg" alt="#"&gt;
                              |&lt;/div&gt;
                              |&lt;div class="avatar ratio"&gt;
                              |&lt;img class="b-r-8 img-80" src="../assets/images/user/1.jpg" alt="#"&gt;
                              |&lt;/div&gt;
                              |&lt;div class="avatar ratio"&gt;
                              |&lt;img class="b-r-8 img-70" src="../assets/images/avtar/16.jpg" alt="#"&gt;
                              |&lt;/div&gt;
                              |&lt;div class="avatar ratio"&gt;
                              |&lt;img class="b-r-8 img-50" src="../assets/images/avtar/7.jpg" alt="#"&gt;
                              |&lt;/div&gt;
                .col-xl-6
                  .card.height-equal
                    .card-header
                      h4 Grouping
                      p.mb-0.mt-1
                        | You can set the group of avatars like 
                        code .img-* (40/50/60/80/100) 
                        | and 
                        code .b-r-* (8/30/35)
                        | .
                      .card-header-right
                        ul.list-unstyled.card-option
                          li
                            i.fa.fa-spin.fa-cog
                          li
                            i.view-html.fa.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.d-inline-block.avatar-group
                          ul
                            li.d-inline-block
                              img.img-100.b-r-8(src='../assets/images/avtar/4.jpg', alt='#') 
                            li.d-inline-block
                              img.img-80.b-r-30(src='../assets/images/avtar/16.jpg', alt='#')
                            li.d-inline-block
                              img.img-50.b-r-35(src='../assets/images/avtar/3.jpg', alt='#')
                        .customers.d-inline-block.avatar-group
                          ul
                            li.d-inline-block
                              img.img-60.rounded-circle(src='../assets/images/avtar/16.jpg', alt='#')
                            li.d-inline-block
                              img.b-r-8.img-80(src='../assets/images/user/1.jpg', alt='#')
                            li.d-inline-block
                              img.img-60.rounded-circle(src='../assets/images/avtar/16.jpg', alt='#')
                        .customers.d-inline-block.avatar-group
                          ul
                            li.d-inline-block
                              img.img-40.rounded-circle(src='../assets/images/user/3.jpg', alt='')
                            li.d-inline-block
                              img.img-40.rounded-circle(src='../assets/images/user/5.jpg', alt='')
                            li.d-inline-block
                              img.img-40.rounded-circle(src='../assets/images/user/1.jpg', alt='') 
                        .code-box-copy
                          button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#avatar-grouping', title='Copy')
                            i.icofont.icofont-copy-alt
                          pre
                            code.language-html#avatar-grouping
                              |&lt;!-- You can set the group of avatars use img-* and .b-r-* class (40/50/60/80/100) and (8/30/35). --&gt;
                              |&lt;div class="customers d-inline-block avatar-group"&gt;
                              |&lt;ul&gt;
                              |&lt;li class="d-inline-block"&gt;
                              |&lt;img class="img-100 b-r-8" src="../assets/images/avtar/4.jpg" alt="#"&gt;
                              |&lt;/li&gt;
                              |&lt;li class="d-inline-block"&gt;
                              |&lt;img class="img-80 b-r-30" src="../assets/images/avtar/16.jpg" alt="#"&gt;
                              |&lt;/li&gt;
                              |&lt;li class="d-inline-block"&gt;
                              |&lt;/li&gt;&lt;img class="img-50 b-r-35" src="../assets/images/avtar/3.jpg" alt="#"&gt;
                              |&lt;/ul&gt;
                              |&lt;/div&gt;
                              |&lt;div class="customers d-inline-block avatar-group"&gt;
                              |&lt;ul&gt;
                              |&lt;li class="d-inline-block"&gt;
                              |&lt;img class="img-60 rounded-circle" src="../assets/images/avtar/16.jpg" alt="#"&gt;
                              |&lt;/li&gt;
                              |&lt;li class="d-inline-block"&gt;
                              |&lt;img class="b-r-8 img-80" src="../assets/images/user/1.jpg" alt="#"&gt;
                              |&lt;/li&gt;
                              |&lt;li class="d-inline-block"&gt;
                              |&lt;img class="img-60 rounded-circle" src="../assets/images/avtar/16.jpg" alt="#"&gt;
                              |&lt;/li&gt;
                              |&lt;/ul&gt;
                              |&lt;/div&gt;
                              |&lt;div class="customers d-inline-block avatar-group"&gt;
                              |&lt;ul&gt;
                              |&lt;li class="d-inline-block"&gt;
                              |&lt;img class="img-40 rounded-circle" src="../assets/images/user/3.jpg" alt=""&gt;
                              |&lt;/li&gt;
                              |&lt;li class="d-inline-block"&gt;
                              |&lt;img class="img-40 rounded-circle" src="../assets/images/user/5.jpg" alt=""&gt;
                              |&lt;/li&gt;
                              |&lt;li class="d-inline-block"&gt;
                              |&lt;img class="img-40 rounded-circle" src="../assets/images/user/1.jpg" alt=""&gt;
                              |&lt;/li&gt;
                              |&lt;/ul&gt;
          // Container-fluid Ends
        include ../../components/footer
    include ../../components/footer-files
