- var page_Title = 'Block UI';
- var form_validation       = true;
- var theme_customizer      = true;
- var sidebar               = true;
- var slick                 = true;
- var header_slider         = true;
- var scrollbar             = true;
- var blockui               = 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
                    | Block Ui
                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 Block Ui
          // Container-fluid starts
          .container
            .user-profile
              .grid.grid-cols-12.card-gap
                div(class="col-span-6 xl:col-span-12")
                  .card
                    .card-header
                      h4.mb-0 Block Loading
                      p.f-m-light.mt-1
                        | Use  
                        code block-wrapper
                        |  class, to load a  block and for different loaders use 
                        code  block-button-* [block-btn-1,2,3] 
                        |  classes.
                    .card-body
                      .block-main-wrapper
                        .block-wrapper
                          img.card-img-top1.max-w-full(src='../assets/images/other-images/profile-style-img3.png' alt='nature')
                          div(class="pt-[10px]")
                            h5.card-title Sunrise Mountain
                            p.card-text.c-light
                              | " Ascending sunrise mountain will take you on an incredible adventure with breath-taking views around every corner. Savour the beauty of the natural world and find tranquilly at the top of this magnificent peak."
                        .common-flex
                          button.button.text-white.btn.btn-primary.block-btn-1
                              | Block Loader 1
                          button.button.text-white.btn.btn-primary.block-btn-2
                              | Block Loader 2 
                          button.button.text-white.btn.btn-primary.block-btn-3
                              | Block Loader 3
                div(class="col-span-6 xl:col-span-12")
                  .card.card-block-wrapper
                    .card-header.block-header
                      h4.mb-0 Card Loading
                      p.f-m-light.mt-1
                        | Use  
                        code card-block-wrapper
                        |  class, to load a  card and for different loaders use 
                        code  block-button-* [block-btn-4,5,6] 
                        |  classes.
                    .card-body
                      .block-wrapper
                        .card-block-wrapper
                          img.card-img-top2.max-w-full(src='../assets/images/other-images/sea.jpg' alt='nature')
                          .p-3
                            h5.card-title Discover the Majesty!
                            p.card-text.c-light
                              | "With our assortment of mountain stones, take a trip through untamed environments and historic structures. Each item infuses your area with the unadulterated beauty of nature while telling a tale of perseverance and time. Strength and tranquilly contained in these classic pieces."
                        .common-flex
                          button.button.text-white.btn.btn-primary.block-btn-4
                            | Card Loader 1
                          button.button.text-white.btn.btn-primary.block-btn-5
                            | Card Loader 2
                          button.button.text-white.btn.btn-primary.block-btn-6
                            | Card Loader 3
                div(class="col-span-12")
                  .card
                    .card-header.block-header
                      h4.mb-0 Form Loading
                      p.f-m-light.mt-1
                        | Use  
                        code block-wrapper
                        |  class, to load a  form and for different loaders use 
                        code  block-button-* [block-btn-7,8,9] 
                        |  classes.
                    .card-body
                      .form-main-wrapper
                        .form-block-wrapper
                          .card-wrapper.custom-border.rounded-3.pay-info.light-card
                            form.grid.grid-cols-12.gap-3.needs-validation(novalidate='')
                              div(class="col-span-12") 
                                label.form-label(for='placeholdername') Card Holder
                                input#placeholdername.form-control(type="text" required='' placeholder='Enter card holder name')
                              div(class="col-span-4 md:col-span-12")
                                label.form-label(for='holdernumber') Card Number
                                input#holdernumber.form-control(type='number' required='' placeholder='xxxx xxxx xxxx xxxx')
                                .invalid-feedback
                                  | Please enter your valid number
                                .valid-feedback 
                                  | Looks's Good!
                              div(class="col-span-4 md:col-span-12")
                                label.form-label(for='expirationdates') Expiration(MM/YY)
                                input#expirationdates.form-control(type='number' required='' placeholder='xx/xx')
                                .invalid-feedback
                                  | Please enter your valid number
                                .valid-feedback 
                                  | Looks's Good!
                              div(class="col-span-4 md:col-span-12")
                                label.form-label(for='cvvNumber-c') CVV
                                input#cvvNumber-c.form-control(type='number' required='')
                                .invalid-feedback
                                  | Please enter your valid number
                                .valid-feedback 
                                  | Looks's Good!
                              div(class="col-span-12")
                                .form-check.flex.gap-2
                                  input#invalidCheck-c.form-check-input.checkbox-primary(type='checkbox' value='' required='')
                                  label.form-check-label.mb-0(for='invalidCheck-c')
                                    | All the above information is correct
                                  .invalid-feedback
                                    | You must agree before submitting.
                        .common-flex
                          button.button.text-white.btn.btn-primary.block-btn-7
                            | Form Loader 1
                          button.button.text-white.btn.btn-primary.block-btn-8
                            | Form Loader 2
                          button.button.text-white.btn.btn-primary.block-btn-9
                            | Form Loader 3
          // Container-fluid Ends
        include ../../components/footer
    include ../../components/footer-files
