- 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
            include ../../components/header
            // Page Body Start
            .page-body-wrapper.horizontal-menu
                include ../../components/sidebar
                .page-body
                    .container-fluid
                        .page-header
                            .row
                                .col-sm-6
                                    h3
                                      | Avatars
                                    ol.breadcrumb
                                      li.breadcrumb-item
                                        a(href='index.html')
                                          | Home
                                      li.breadcrumb-item Base
                                      li.breadcrumb-item.active Avatars
                                .col-sm-6
                                  include ../../components/bookmark
                    // Container-fluid starts
                    .container-fluid
                      .user-profile
                        .row
                          .col-sm-12
                            .card
                              .card-header.pb-0
                                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.pb-0
                                  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-primary 
                                    div.avatar
                                      img.img-90.rounded-circle(src='assets/images/user/1.jpg', alt='#')
                                      .status.status-90.bg-primary
                                    div.avatar
                                      img.img-80.rounded-circle(src='assets/images/user/1.jpg', alt='#')
                                      .status.status-80.bg-primary
                                    div.avatar
                                      img.img-70.rounded-circle(src='assets/images/user/1.jpg', alt='#')
                                      .status.status-70.bg-primary
                                    div.avatar
                                      img.img-60.rounded-circle(src='assets/images/user/1.jpg', alt='#')
                                      .status.status-60.bg-primary
                                    div.avatar
                                      img.img-50.rounded-circle(src='assets/images/user/1.jpg', alt='#')
                                      .status.status-50.bg-primary  
                                    div.avatar
                                      img.img-40.rounded-circle(src='assets/images/user/1.jpg', alt='#')
                                      .status.status-40.bg-primary
                                    div.avatar
                                      img.img-30.rounded-circle(src='assets/images/user/1.jpg', alt='#')
                                      .status.status-30.bg-primary
                          .col-sm-12
                            .card
                              .card-header.pb-0
                                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-12.xl-100
                            .card
                              .card-header.pb-0
                                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-sm-12
                            .card
                              .card-header.pb-0
                                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