- var theme_customizer      = true;
- var tooltip               = true;

doctype html
html(lang='en')
    include ../../components/header-files
    body
        include ../../components/loader
        // page-wrapper Start
        #pageWrapper.page-wrapper.compact-wrapper
            include ../../components/header
            // Page Body Start
            .page-body-wrapper.sidebar-icon
                include ../../components/sidebar
                .page-body
                    .container-fluid
                        .page-header
                            .row
                                .col-lg-6
                                    h3
                                      | Avatars
                                    ol.breadcrumb
                                      li.breadcrumb-item
                                        a(href='index.html')
                                          i(data-feather="home")
                                      li.breadcrumb-item Ui Kits
                                      li.breadcrumb-item.active Avatars
                                .col-lg-6
                                  include ../../components/bookmark
                    // Container-fluid starts
                    .container-fluid
                      .user-profile
                        .row
                          .col-sm-12
                            .card
                              .card-header
                                h5 Sizing
                              .card-body.avatar-showcase
                                .avatars
                                  div.avatar
                                    img.img-100.rounded-circle(src='../assets/images/user/1.jpg', alt='#') 
                                  div.avatar
                                    img.img-90.rounded-circle(src='../assets/images/user/1.jpg', alt='#')
                                  div.avatar
                                    img.img-80.rounded-circle(src='../assets/images/user/1.jpg', alt='#')
                                  div.avatar
                                    img.img-70.rounded-circle(src='../assets/images/user/1.jpg', alt='#')
                                  div.avatar
                                    img.img-60.rounded-circle(src='../assets/images/user/1.jpg', alt='#')
                                  div.avatar
                                    img.img-50.rounded-circle(src='../assets/images/user/1.jpg', alt='#')
                                  div.avatar
                                    img.img-40.rounded-circle(src='../assets/images/user/1.jpg', alt='#')
                                  div.avatar
                                    img.img-30.rounded-circle(src='../assets/images/user/1.jpg', alt='#')
                                  div.avatar
                                    img.img-20.rounded-circle(src='../assets/images/user/1.jpg', alt='#')  
                          .col-sm-12
                            .card
                                .card-header
                                  h5 Status Indicator
                                .card-body.avatar-showcase
                                  .avatars
                                    div.avatar
                                      img.img-100.rounded-circle(src='../assets/images/user/1.jpg', alt='#')
                                      .status.status-100.bg-success 
                                    div.avatar
                                      img.img-90.rounded-circle(src='../assets/images/user/1.jpg', alt='#')
                                      .status.status-90
                                    div.avatar
                                      img.img-80.rounded-circle(src='../assets/images/user/1.jpg', alt='#')
                                      .status.status-80.bg-success
                                    div.avatar
                                      img.img-70.rounded-circle(src='../assets/images/user/1.jpg', alt='#')
                                      .status.status-70
                                    div.avatar
                                      img.img-60.rounded-circle(src='../assets/images/user/1.jpg', alt='#')
                                      .status.status-60.bg-success
                                    div.avatar
                                      img.img-50.rounded-circle(src='../assets/images/user/1.jpg', alt='#')
                                      .status.status-50  
                                    div.avatar
                                      img.img-40.rounded-circle(src='../assets/images/user/1.jpg', alt='#')
                                      .status.status-40
                                    div.avatar
                                      img.img-30.rounded-circle(src='../assets/images/user/1.jpg', alt='#')
                                      .status.status-30
                          .col-sm-12
                            .card
                              .card-header
                                h5 Initials
                              .card-body.avatar-showcase
                                .avatars
                                  div.avatar
                                    img.img-100.rounded-circle(src='../assets/images/user/16.png', alt='#') 
                                  div.avatar
                                    img.img-90.rounded-circle(src='../assets/images/user/16.png', alt='#')
                                  div.avatar
                                    img.img-80.rounded-circle(src='../assets/images/user/16.png', alt='#')
                                  div.avatar
                                    img.img-70.rounded-circle(src='../assets/images/user/16.png', alt='#')
                                  div.avatar
                                    img.img-60.rounded-circle(src='../assets/images/user/16.png', alt='#')
                                  div.avatar
                                    img.img-50.rounded-circle(src='../assets/images/user/16.png', alt='#')
                                  div.avatar
                                    img.img-40.rounded-circle(src='../assets/images/user/16.png', alt='#')
                                  div.avatar
                                    img.img-30.rounded-circle(src='../assets/images/user/16.png', alt='#')
                                  div.avatar
                                    img.img-20.rounded-circle(src='../assets/images/user/16.png', alt='#')
                                  div.avatar
                                    img.img-10.rounded-circle(src='../assets/images/user/16.png', alt='#')   
                          .col-xl-6.xl-100
                            .card
                              .card-header
                                h5 Shape
                              .card-body.avatar-showcase
                                .avatars
                                  div.avatar
                                    img.img-100.b-r-8(src='../assets/images/user/1.jpg', alt='#') 
                                  div.avatar
                                    img.img-90.b-r-30(src='../assets/images/user/1.jpg', alt='#')
                                  div.avatar
                                    img.img-80.b-r-35(src='../assets/images/user/1.jpg', alt='#')
                                  div.avatar
                                    img.img-70.rounded-circle(src='../assets/images/user/1.jpg', alt='#')
                                  div.avatar
                                    img.img-60.b-r-25(src='../assets/images/user/1.jpg', alt='#')
                                  div.avatar
                                    img.img-50.b-r-15(src='../assets/images/user/1.jpg', alt='#')
                          .col-xl-6.xl-100
                            .card
                              .card-header
                                h5 Ratio
                              .card-body.avatar-showcase
                                .avatars
                                  div.avatar.ratio
                                    img.b-r-8.height-100(src='../assets/images/user/1.jpg', alt='#') 
                                  div.avatar.ratio
                                    img.b-r-8.height-90(src='../assets/images/user/1.jpg', alt='#')
                                  div.avatar.ratio
                                    img.b-r-8.height-80(src='../assets/images/user/1.jpg', alt='#')
                                  div.avatar.ratio
                                    img.b-r-8.height-70(src='../assets/images/user/1.jpg', alt='#')
                                  div.avatar.ratio
                                    img.b-r-8.height-60(src='../assets/images/user/1.jpg', alt='#')
                                  div.avatar.ratio
                                    img.b-r-8.height-50(src='../assets/images/user/1.jpg', alt='#')
                          .col-sm-12
                            .card
                              .card-header
                                h5 Groups
                              .card-body.avatar-showcase
                                .customers.d-inline-block.avatar-group
                                  ul
                                    li.d-inline-block
                                      img.img-70.rounded-circle(src='../assets/images/user/3.jpg', alt='')
                                    li.d-inline-block
                                      img.img-70.rounded-circle(src='../assets/images/user/5.jpg', alt='')
                                    li.d-inline-block
                                      img.img-70.rounded-circle(src='../assets/images/user/1.jpg', alt='')
                                .customers.d-inline-block.avatar-group
                                  ul
                                    li.d-inline-block
                                      img.img-50.rounded-circle(src='../assets/images/user/3.jpg', alt='')
                                    li.d-inline-block
                                      img.img-50.rounded-circle(src='../assets/images/user/5.jpg', alt='')
                                    li.d-inline-block
                                      img.img-50.rounded-circle(src='../assets/images/user/1.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='') 
                    // Container-fluid Ends
                include ../../components/footer
        include ../../components/footer-files
