- var page_Title = 'Placeholders';
- var theme_customizer      = true;
- var sidebar               = true;
- var slick                 = true;
- var header_slider         = true;
- var scrollbar             = true;
- var clipboard             = true;
- var prism                 = true;
- var customcard            = 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
                    | Placeholders
                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 Placeholders
          // Container-fluid starts
          .container 
            .grid.grid-cols-12.card-gap
              div(class="col-span-6 xxl:col-span-12 box-col-12")
                .card
                  .card-header
                    h5.mb-0 Placeholder Cards
                    p.f-m-light.mt-1
                      | In the example below, we take a typical card component and recreate it with placeholders applied to create a 
                      code  loading card 
                      | and create placeholders with the 
                      code placeholder 
                      | 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.loading-card-wrapper.mb-1.text-start
                    .grid.grid-cols-12.gap-3
                      div(class="col-span-6 sm:col-span-12")
                        .card.mb-0.h-full(aria-hidden='true')
                          img.card-img-top.max-w-full.w-full(src='../assets/images/masonry/5.jpg' alt='#')
                          .card-body
                              h6.card-title Card Title
                              p.card-text.c-o-light.mb-4
                                  | Some quick example text to build on the card title and make up the bulk of the card&apos;s content.
                              a.btn.btn-primary.text-white(href='#!' class="rounded-[6px]") Go somewhere
                      div(class="col-span-6 sm:col-span-12")
                        .card.mb-0.h-full(aria-hidden='true')
                          img.card-img-top.max-w-full.w-full(src='../assets/images/masonry/13.jpg' alt='#')
                          .card-body
                            h6.card-title.placeholder-glow.grid.grid-cols-12.mb-2
                              span.placeholder.col-span-6.placeholder-light(class="min-h-[16px]")
                            div.card-text.placeholder-glow.mb-4.grid.grid-cols-12(class="gap-2")
                              div.placeholder.col-span-7.placeholder-light(class="min-h-[16px]")
                              div.placeholder.col-span-4.placeholder-light(class="min-h-[16px]")
                              div.placeholder.col-span-4.placeholder-light(class="min-h-[16px]")
                              div.placeholder.col-span-6.placeholder-light(class="min-h-[16px]")  
                              div.placeholder.col-span-8.placeholder-light(class="min-h-[16px]")
                            a(href="#!"  class="rounded-[6px] h-[30px] w-[130px]").btn.btn-primary.disabled.placeholder.col-6
                    .code-box-copy
                        button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#placeholder-card', title='Copy')
                          i.icofont.icofont-copy-alt
                        pre.custom-scrollbar
                          code.language-html#placeholder-card
                            |&lt;div class="grid grid-cols-12 gap-3"&gt;
                            |  &lt;div class="col-span-6 sm:col-span-12"&gt;
                            |    &lt;div class="card mb-0 h-full" aria-hidden="true"&gt;&lt;img class="card-img-top max-w-full.h-auto" src="../assets/images/masonry/5.jpg" alt="#"&gt;
                            |      &lt;div class="card-body"&gt;
                            |        &lt;h6 class="card-title"&gt;Card Title&lt;/h6&gt;
                            |        &lt;p class="card-text c-o-light"&gt;Some quick example text to build on the card title and make up the bulk of the card&apos;s content.&lt;/p&gt;&lt;a class="btn btn-primary" href="#!"&gt;Go somewhere&lt;/a&gt;
                            |      &lt;/div&gt;
                            |    &lt;/div&gt;
                            |  &lt;/div&gt;
                            |  &lt;div class="col-span-6 sm:col-span-12"&gt;
                            |    &lt;div class="card mb-0 h-full" aria-hidden="true"&gt;&lt;img class="card-img-top max-w-full.h-auto" src="../assets/images/masonry/13.jpg" alt="#"&gt;
                            |      &lt;div class="card-body"&gt;
                            |        &lt;h6 class="card-title placeholder-glow"&gt;&lt;span class="placeholder col-6 placeholder-light"&gt;&lt;/span&gt;&lt;/h6&gt;
                            |        &lt;div class="card-text placeholder-glow mb-3"&gt;
                            |          &lt;div class="placeholder col-7 placeholder-light"&gt;&lt;/div&gt;
                            |          &lt;div class="placeholder col-4 placeholder-light"&gt;&lt;/div&gt;
                            |          &lt;div class="placeholder col-4 placeholder-light"&gt;&lt;/div&gt;
                            |          &lt;div class="placeholder col-6 placeholder-light"&gt;&lt;/div&gt;
                            |          &lt;div class="placeholder col-8 placeholder-light"&gt;&lt;/div&gt;
                            |        &lt;/div&gt;&lt;a class="btn btn-primary disabled placeholder col-6" href="#!"&gt;&lt;/a&gt;
                            |      &lt;/div&gt;
                            |    &lt;/div&gt;
                            |  &lt;/div&gt;
                            |&lt;/div&gt;
              div(class="col-span-6 xxl:col-span-12 box-col-12")
                .card
                  .card-header
                    h5 Width & Sizing
                    p.f-m-light.mt-1
                      code placeholder
                      |  class + grid column (e.g., col-6) sets width. Works as text replacement or modifier class.Create flexible placeholders: 
                      code placeholder
                      |  + 
                      code grid 
                      | for 
                      code width
                      | . Replace text or modify components.
                    .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 
                    .grid.grid-cols-12.gap-3
                      div(class="col-span-12 xxl:col-span-6 md:col-span-12 box-col-6") 
                        .card-wrapper.custom-border.rounded-3.h-full
                          h6.sub-title.pb-1 Width
                          p.f-m-light
                            | You can change the width through grid column classes, width utilities, or inline styles.
                            code  (like: w-25 , w-50 , w-75 , w-full ) 
                          .card-body.placeholder-glow(class="!p-0")
                            span.placeholder.placeholder-light(class="w-[50%] min-h-[16px]")
                            span.placeholder.placeholder-light(class="w-[75%] min-h-[16px]")
                            span.placeholder.placeholder-light(class="w-[100%] min-h-[16px]") 
                            span.placeholder.placeholder-light(class="w-[25%] min-h-[16px]")
                      div(class="col-span-12 xxl:col-span-6 md:col-span-12 box-col-6") 
                        .card-wrapper.custom-border.rounded-3.h-full
                          h6.sub-title.pb-1 Sizing
                          p.f-m-light
                            | The size of 
                            code placeholder
                            |  are based on the typographic style of the parent element. Customize them with sizing modifiers: 
                            code placeholder-lg, placeholder-sm, or placeholder-xs
                            | .
                          .card-body.placeholder-glow.grid.grid-cols-12(class="!p-0 gap-[10px]") 
                            span.placeholder.col-span-12.placeholder-light(class="min-h-[19.2px]")
                            span.placeholder.col-span-12.placeholder-light(class="min-h-[16px]")
                            span.placeholder.col-span-12.placeholder-light(class="min-h-[12.8px]")
                            span.placeholder.col-span-12.placeholder-light(class="min-h-[9.6px]")
                    .code-box-copy
                        button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#sizing-placeholder-card', title='Copy')
                          i.icofont.icofont-copy-alt
                        pre.custom-scrollbar
                          code.language-html#sizing-placeholder-card
                            |&lt;div class="grid grid-cols-12 gap-3"&gt;
                            |  &lt;div class="col-xxl-12 col-md-6 box-col-6"&gt; 
                            |    &lt;div class="card-wrapper border rounded-3 h-full"&gt;
                            |      &lt;h6 class="sub-title pb-1"&gt;Width&lt;/h6&gt;
                            |      &lt;p class="f-m-light"&gt;You can change the width through grid column classes, width utilities, or inline styles.
                            |        &lt;code&gt; (like: w-25 , w-50 , w-75 , w-full )&lt;/code&gt;
                            |      &lt;/p&gt;
                            |      &lt;div class="card-body p-0 placeholder-glow"&gt;
                            |        &lt;span class="placeholder w-50 placeholder-light"&gt;&lt;/span&gt;
                            |        &lt;span class="placeholder w-75 placeholder-light"&gt;&lt;/span&gt;
                            |        &lt;span class="placeholder w-full placeholder-light"&gt;&lt;/span&gt;
                            |        &lt;span class="placeholder w-25 placeholder-light"&gt;&lt;/span&gt;
                            |      &lt;/div&gt;
                            |    &lt;/div&gt;
                            |  &lt;/div&gt;
                            |  &lt;div class="col-xxl-12 col-md-6 box-col-6"&gt; 
                            |    &lt;div class="card-wrapper border rounded-3 h-full"&gt;
                            |      &lt;h6 class="sub-title pb-1"&gt;Sizing&lt;/h6&gt;
                            |      &lt;p class="f-m-light"&gt;The size of
                            |        &lt;code&gt;placeholder&lt;/code&gt; are based on the typographic style of the parent element. Customize them with sizing modifiers:&lt;code&gt;placeholder-lg, placeholder-sm, or placeholder-xs&lt;/code&gt;.
                            |      &lt;/p&gt;
                            |      &lt;div class="card-body p-0 placeholder-glow"&gt;
                            |        &lt;span class="placeholder col-12 placeholder-lg placeholder-light"&gt;&lt;/span&gt;
                            |        &lt;span class="placeholder col-12 placeholder-light"&gt;&lt;/span&gt;
                            |        &lt;span class="placeholder col-12 placeholder-sm placeholder-light"&gt;&lt;/span&gt;
                            |        &lt;span class="placeholder col-12 placeholder-xs placeholder-light"&gt;&lt;/span&gt;
                            |      &lt;/div&gt;
                            |    &lt;/div&gt;
                            |  &lt;/div&gt;
                            |&lt;/div&gt;
              div(class="col-span-6 md:col-span-12")
                .card
                  .card-header
                    h5.mb-0 Animations
                    p.f-m-light.mt-1
                      | Animate placeholders with 
                      code placeholder-glow 
                      | or 
                      code placeholder-wave
                      |  to better convey the perception of something being actively loaded.
                    .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.animation-placeholder
                    p.placeholder-glow.grid.grid-cols-12
                      span.placeholder.placeholder-light(class="col-span-12 !mb-2")
                    p.placeholder-wave.grid.grid-cols-12
                      span.placeholder.placeholder-light(class="col-span-12")
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#placeholder-animate-copy', title='Copy')
                        i.icofont.icofont-copy-alt
                      pre
                        code.language-html#placeholder-animate-copy
                          |&lt;p class="placeholder-glow"&gt;
                          |  &lt;span class="placeholder col-12 placeholder-light"&gt;&lt;/span&gt;
                          |&lt;/p&gt;
                          |&lt;p class="placeholder-wave"&gt;
                          |  &lt;span class="placeholder col-12 placeholder-light"&gt;&lt;/span&gt;
                          |&lt;/p&gt;
              div(class="col-span-6 md:col-span-12")
                .card
                  .card-header
                    h5.mb-0 Custom Animation Placeholder
                    p.f-m-light.mt-1
                      | With the 
                      code wave-left-lines
                      |  custom animation, placeholders may be used into your unique design.
                    .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
                    .grid.grid-cols-12.gap-3
                      div(class="col-span-6 sm:col-span-12")
                        .placeholder-body
                          .placeholder-start
                            .square
                          .placeholder-end
                            .placeholder-line.placeholder-h-17.w-25.mb-2
                            .placeholder-line
                            .placeholder-line.placeholder-h-8.w-50
                            .placeholder-line.w-75
                      div(class="col-span-6 sm:col-span-12")
                        .placeholder-body
                          .placeholder-start
                            .square.circle
                          .placeholder-end
                            .placeholder-line.placeholder-h-17.w-25.mb-2
                            .placeholder-line
                            .placeholder-line.placeholder-h-8.w-50
                            .placeholder-line.w-75
                    .code-box-copy
                        button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#custom-animation-place', title='Copy')
                          i.icofont.icofont-copy-alt
                        pre.custom-scrollbar
                          code.language-html#custom-animation-place
                            |&lt;div class="grid grid-cols-12 gap-3"&gt; 
                            |  &lt;div class="col-span-6 sm:col-span-12"&gt;
                            |    &lt;div class="placeholder-body"&gt;
                            |      &lt;div class="placeholder-start"&gt;
                            |        &lt;div class="square"&gt;&lt;/div&gt;
                            |      &lt;/div&gt;
                            |      &lt;div class="placeholder-end"&gt;
                            |        &lt;div class="placeholder-line placeholder-h-17 w-25 mb-2"&gt;&lt;/div&gt;
                            |        &lt;div class="placeholder-line"&gt;&lt;/div&gt;
                            |        &lt;div class="placeholder-line placeholder-h-8 w-50"&gt;&lt;/div&gt;
                            |        &lt;div class="placeholder-line w-75"&gt;&lt;/div&gt;
                            |      &lt;/div&gt;
                            |    &lt;/div&gt;
                            |  &lt;/div&gt;
                            |  &lt;div class="col-span-6 sm:col-span-12"&gt;
                            |    &lt;div class="placeholder-body"&gt;
                            |      &lt;div class="placeholder-start"&gt;
                            |        &lt;div class="square circle"&gt;&lt;/div&gt;
                            |      &lt;/div&gt;
                            |      &lt;div class="placeholder-end"&gt;
                            |        &lt;div class="placeholder-line placeholder-h-17 w-25 mb-2"&gt;&lt;/div&gt;
                            |        &lt;div class="placeholder-line"&gt;&lt;/div&gt;
                            |        &lt;div class="placeholder-line placeholder-h-8 w-50"&gt;&lt;/div&gt;
                            |        &lt;div class="placeholder-line w-75"&gt;&lt;/div&gt;
                            |      &lt;/div&gt;
                            |    &lt;/div&gt;
                            |  &lt;/div&gt;
                            |&lt;/div&gt;
              div(class="col-span-12")
                .card
                  .card-header
                    h5.mb-0 Colors
                    p.f-m-light.mt-1
                      | By default, the 
                      code placeholder 
                      | uses 
                      code currentcolor
                      | . This can be overridden with a custom color or utility 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.placeholder-glow.grid.grid-cols-12.gap-2
                    span.placeholder(class="col-span-12")
                    span.placeholder.bg-primary(class="col-span-12")
                    span.placeholder.bg-secondary(class="col-span-12")
                    span.placeholder.bg-success(class="col-span-12")
                    span.placeholder.bg-danger(class="col-span-12")
                    span.placeholder.bg-warning(class="col-span-12")
                    span.placeholder.bg-info(class="col-span-12")
                    span.placeholder.bg-light(class="col-span-12")
                    span.placeholder.bg-dark(class="col-span-12")
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#placeholder-color-copy', title='Copy')
                        i.icofont.icofont-copy-alt
                      pre
                        code.language-html#placeholder-color-copy
                          |&lt;span class="placeholder col-12"&gt;&lt;/span&gt;
                          |&lt;span class="placeholder col-12 bg-primary"&gt;&lt;/span&gt;
                          |&lt;span class="placeholder col-12 bg-secondary"&gt;&lt;/span&gt;
                          |&lt;span class="placeholder col-12 bg-success"&gt;&lt;/span&gt;
                          |&lt;span class="placeholder col-12 bg-danger"&gt;&lt;/span&gt;
                          |&lt;span class="placeholder col-12 bg-warning"&gt;&lt;/span&gt;
                          |&lt;span class="placeholder col-12 bg-info"&gt;&lt;/span&gt;
                          |&lt;span class="placeholder col-12 bg-light"&gt;&lt;/span&gt;
                          |&lt;span class="placeholder col-12 bg-dark"&gt;&lt;/span&gt;
          // Container-fluid Ends
        include ../../components/footer
    include ../../components/footer-files