- var page_Title = 'Helper Classes';
- var theme_customizer      = true;
- var sidebar               = true;
- var slick                 = true;
- var header_slider         = true;
- var animate               = true;
- var clipboard             = true;
- var prism                 = true;
- var customcard            = true;
- var scrollbar             = 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
                    | Helper Classes
                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 Helper Classes
          // Container-fluid starts
          .container.mx-auto.px-0.w-full
            .grid.grid-cols-12.card-gap
              .col-span-12
                .card 
                  .card-header
                    h5 Styled Borders
                    p.f-m-light.mt-1 
                      | Use different styles of borders, like 
                      code border radius, border-color, and border-width
                      |  use of any 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-3 xxl:col-span-6 sm:col-span-12") 
                        .border-wrapper.h-full.alert-light-light.dark-helper
                          h6.mb-3 Custom Border-radius Class
                          .helper-common-box
                            .rounded-none.bg-light.custom-border(class="w-[40px] h-[40px]")
                            span rounded-none
                          .helper-common-box
                            .bg-light.custom-border(class="rounded-[1px] w-[40px] h-[40px]")
                            span rounded-[1px]
                          .helper-common-box
                            .bg-light.custom-border(class="rounded-[2px] w-[40px] h-[40px]")
                            span rounded-[2px]
                          .helper-common-box
                            .bg-light.custom-border(class="rounded-[3px] w-[40px] h-[40px]")
                            span rounded-[3px]
                          .helper-common-box
                            .bg-light.custom-border(class="rounded-[4px] w-[40px] h-[40px]")
                            span rounded-[4px]
                          .helper-common-box
                            .bg-light.custom-border(class="rounded-[5px] w-[40px] h-[40px]")
                            span rounded-[5px]
                          .helper-common-box
                            .bg-light.custom-border(class="rounded-[6px] w-[40px] h-[40px]")
                            span rounded-[6px]
                          .helper-common-box
                            .bg-light.custom-border(class="rounded-[7px] w-[40px] h-[40px]")
                            span rounded-[7px]
                          .helper-common-box
                            .bg-light.custom-border(class="rounded-[8px] w-[40px] h-[40px]")
                            span rounded-[8px]
                          .helper-common-box
                            .bg-light.custom-border(class="rounded-[9px] w-[40px] h-[40px]")
                            span rounded-[9px]
                          .helper-common-box
                            .bg-light.custom-border(class="rounded-[10px] w-[40px] h-[40px]")
                            span rounded-[10px]
                      div(class="col-span-3 xxl:col-span-6 sm:col-span-12")
                        .border-wrapper.h-full.alert-light-light.dark-helper
                          h6.mb-3 Border Color
                          .helper-common-box
                            .border-primary.border(class="w-[40px] h-[40px] rounded-[25%]")
                            span border-primary
                          .helper-common-box
                            .border-secondary.border(class="w-[40px] h-[40px] rounded-[25%]")
                            span border-secondary
                          .helper-common-box
                            .border-success.border(class="w-[40px] h-[40px] rounded-[25%]")
                            span border-success
                          .helper-common-box
                            .border-danger.border(class="w-[40px] h-[40px] rounded-[25%]")
                            span border-danger
                          .helper-common-box
                            .border-warning.border(class="w-[40px] h-[40px] rounded-[25%]")
                            span border-warning
                          .helper-common-box
                            .border-info.border(class="w-[40px] h-[40px] rounded-[25%]")
                            span border-info
                          .helper-common-box
                            .border-dark.border(class="w-[40px] h-[40px] rounded-[25%]")
                            span border-dark
                      div(class="col-span-3 xxl:col-span-6 sm:col-span-12")
                        .border-wrapper.h-full.alert-light-light.dark-helper
                          h6.mb-3 Border Width
                          .helper-common-box
                            .border-1.custom-border(class="w-[40px] h-[40px] rounded-[25%]") 
                            span border-1
                          .helper-common-box
                            .border-2.custom-border(class="w-[40px] h-[40px] rounded-[25%]") 
                            span border-2
                          .helper-common-box
                            .border-3.custom-border(class="w-[40px] h-[40px] rounded-[25%]") 
                            span border-3
                          .helper-common-box
                            .border-4.custom-border(class="w-[40px] h-[40px] rounded-[25%]") 
                            span border-4
                          .helper-common-box
                            .border-5.custom-border(class="w-[40px] h-[40px] rounded-[25%]") 
                            span border-5
                          .helper-common-box
                            .border-6.custom-border(class="w-[40px] h-[40px] rounded-[25%]") 
                            span border-6
                          .helper-common-box
                            .border-7.custom-border(class="w-[40px] h-[40px] rounded-[25%]") 
                            span border-7
                          .helper-common-box
                            .border-8.custom-border(class="w-[40px] h-[40px] rounded-[25%]") 
                            span border-8
                          .helper-common-box
                            .border-9.custom-border(class="w-[40px] h-[40px] rounded-[25%]") 
                            span border-9
                          .helper-common-box
                            .border-10.custom-border(class="w-[40px] h-[40px] rounded-[25%]") 
                            span border-10 
                      div(class="col-span-3 xxl:col-span-6 sm:col-span-12")
                        .border-wrapper.alert-light-light.h-full.dark-helper
                          h6.mb-3 Text Colors
                          .helper-common-box
                            .helper-text.custom-border.txt-primary(class="w-[40px] h-[40px] rounded-[25%] flex items-center justify-center font-black") C 
                            span txt-primary
                          .helper-common-box
                            .helper-text.custom-border.txt-secondary(class="w-[40px] h-[40px] rounded-[25%] flex items-center justify-center font-black") C 
                            span txt-secondary
                          .helper-common-box
                            .helper-text.custom-border.txt-success(class="w-[40px] h-[40px] rounded-[25%] flex items-center justify-center font-black") C 
                            span txt-success
                          .helper-common-box
                            .helper-text.custom-border.txt-danger(class="w-[40px] h-[40px] rounded-[25%] flex items-center justify-center font-black") C 
                            span txt-danger
                          .helper-common-box
                            .helper-text.custom-border.txt-warning(class="w-[40px] h-[40px] rounded-[25%] flex items-center justify-center font-black") C 
                            span txt-warning
                          .helper-common-box
                            .helper-text.custom-border.txt-info(class="w-[40px] h-[40px] rounded-[25%] flex items-center justify-center font-black") C 
                            span txt-info
                          .helper-common-box
                            .helper-text.custom-border.txt-dark(class="w-[40px] h-[40px] rounded-[25%] flex items-center justify-center font-black") C 
                            span txt-dark
                          .helper-common-box
                            .helper-text.custom-border.txt-light.bg-dark(class="w-[40px] h-[40px] rounded-[25%] flex items-center justify-center font-black") C 
                            span txt-light
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#copy-border' title='Copy')
                        i.icofont.icofont-copy-alt 
                      pre.custom-scrollbar
                        code.language-html#copy-border
                          |&lt;div class="grid grid-cols-12 gap-3"&gt;
                          |  &lt;div class="col-span-6 xxl:col-span-6 sm:col-span-12"&gt;
                          |    &lt;div class="border-wrapper h-full alert-light-light dark-helper"&gt;
                          |      &lt;h6 class="mb-3"&gt;Custom Border-radius Class&lt;/h6&gt;
                          |      &lt;div class="helper-common-box"&gt;
                          |        &lt;div class="helper-box b-r-0 bg-light border"&gt;&lt;/div&gt;&lt;span&gt;b-r-0&lt;/span&gt;
                          |      &lt;/div&gt;
                          |      &lt;div class="helper-common-box"&gt;
                          |        &lt;div class="helper-box b-r-1 bg-light border"&gt;&lt;/div&gt;&lt;span&gt;b-r-1&lt;/span&gt;
                          |      &lt;/div&gt;
                          |      &lt;div class="helper-common-box"&gt;
                          |        &lt;div class="helper-box b-r-2 bg-light border"&gt;&lt;/div&gt;&lt;span&gt;b-r-2&lt;/span&gt;
                          |      &lt;/div&gt;
                          |      &lt;div class="helper-common-box"&gt;
                          |        &lt;div class="helper-box b-r-3 bg-light border"&gt;&lt;/div&gt;&lt;span&gt;b-r-3&lt;/span&gt;
                          |      &lt;/div&gt;
                          |      &lt;div class="helper-common-box"&gt;
                          |        &lt;div class="helper-box b-r-4 bg-light border"&gt;&lt;/div&gt;&lt;span&gt;b-r-4&lt;/span&gt;
                          |      &lt;/div&gt;
                          |      &lt;div class="helper-common-box"&gt;
                          |        &lt;div class="helper-box b-r-5 bg-light border"&gt;&lt;/div&gt;&lt;span&gt;b-r-5&lt;/span&gt;
                          |      &lt;/div&gt;
                          |      &lt;div class="helper-common-box"&gt;
                          |        &lt;div class="helper-box b-r-6 bg-light border"&gt;&lt;/div&gt;&lt;span&gt;b-r-6&lt;/span&gt;
                          |      &lt;/div&gt;
                          |      &lt;div class="helper-common-box"&gt;
                          |        &lt;div class="helper-box b-r-7 bg-light border"&gt;&lt;/div&gt;&lt;span&gt;b-r-7&lt;/span&gt;
                          |      &lt;/div&gt;
                          |      &lt;div class="helper-common-box"&gt;
                          |        &lt;div class="helper-box b-r-8 bg-light border"&gt;&lt;/div&gt;&lt;span&gt;b-r-8&lt;/span&gt;
                          |      &lt;/div&gt;
                          |      &lt;div class="helper-common-box"&gt;
                          |        &lt;div class="helper-box b-r-9 bg-light border"&gt;&lt;/div&gt;&lt;span&gt;b-r-9&lt;/span&gt;
                          |      &lt;/div&gt;
                          |      &lt;div class="helper-common-box"&gt;
                          |        &lt;div class="helper-box b-r-10 bg-light border"&gt;&lt;/div&gt;&lt;span&gt;b-r-10&lt;/span&gt;
                          |      &lt;/div&gt;
                          |    &lt;/div&gt;
                          |  &lt;/div&gt;
                          |  &lt;div class="col-span-6 xxl:col-span-6 sm:col-span-12"&gt;
                          |    &lt;div class="border-wrapper h-full alert-light-light dark-helper"&gt;
                          |      &lt;h6 class="mb-3"&gt;Border Color&lt;/h6&gt;
                          |      &lt;div class="helper-common-box"&gt;
                          |        &lt;div class="helper-box border-primary border"&gt;&lt;/div&gt;&lt;span&gt;border-primary&lt;/span&gt;
                          |      &lt;/div&gt;
                          |      &lt;div class="helper-common-box"&gt;
                          |        &lt;div class="helper-box border-secondary border"&gt;&lt;/div&gt;&lt;span&gt;border-secondary&lt;/span&gt;
                          |      &lt;/div&gt;
                          |      &lt;div class="helper-common-box"&gt;
                          |        &lt;div class="helper-box border-success border"&gt;&lt;/div&gt;&lt;span&gt;border-success&lt;/span&gt;
                          |      &lt;/div&gt;
                          |      &lt;div class="helper-common-box"&gt;
                          |        &lt;div class="helper-box border-danger border"&gt;&lt;/div&gt;&lt;span&gt;border-danger&lt;/span&gt;
                          |      &lt;/div&gt;
                          |      &lt;div class="helper-common-box"&gt;
                          |        &lt;div class="helper-box border-warning border"&gt;&lt;/div&gt;&lt;span&gt;border-warning&lt;/span&gt;
                          |      &lt;/div&gt;
                          |      &lt;div class="helper-common-box"&gt;
                          |        &lt;div class="helper-box border-info border"&gt;&lt;/div&gt;&lt;span&gt;border-info&lt;/span&gt;
                          |      &lt;/div&gt;
                          |      &lt;div class="helper-common-box"&gt;
                          |        &lt;div class="helper-box border-dark border"&gt;&lt;/div&gt;&lt;span&gt;border-dark&lt;/span&gt;
                          |      &lt;/div&gt;
                          |    &lt;/div&gt;
                          |  &lt;/div&gt;
                          |  &lt;div class="col-span-6 xxl:col-span-6 sm:col-span-12"&gt;
                          |    &lt;div class="border-wrapper h-full alert-light-light dark-helper"&gt;
                          |      &lt;h6 class="mb-3"&gt;Border Width&lt;/h6&gt;
                          |      &lt;div class="helper-common-box"&gt;
                          |        &lt;div class="helper-box border-1 border"&gt; &lt;/div&gt;&lt;span&gt;border-1&lt;/span&gt;
                          |      &lt;/div&gt;
                          |      &lt;div class="helper-common-box"&gt;
                          |        &lt;div class="helper-box border-2 border"&gt; &lt;/div&gt;&lt;span&gt;border-2&lt;/span&gt;
                          |      &lt;/div&gt;
                          |      &lt;div class="helper-common-box"&gt;
                          |        &lt;div class="helper-box border-3 border"&gt; &lt;/div&gt;&lt;span&gt;border-3&lt;/span&gt;
                          |      &lt;/div&gt;
                          |      &lt;div class="helper-common-box"&gt;
                          |        &lt;div class="helper-box border-4 border"&gt; &lt;/div&gt;&lt;span&gt;border-4&lt;/span&gt;
                          |      &lt;/div&gt;
                          |      &lt;div class="helper-common-box"&gt;
                          |        &lt;div class="helper-box border-5 border"&gt; &lt;/div&gt;&lt;span&gt;border-5&lt;/span&gt;
                          |      &lt;/div&gt;
                          |      &lt;div class="helper-common-box"&gt;
                          |        &lt;div class="helper-box border-6 border"&gt; &lt;/div&gt;&lt;span&gt;border-6&lt;/span&gt;
                          |      &lt;/div&gt;
                          |      &lt;div class="helper-common-box"&gt;
                          |        &lt;div class="helper-box border-7 border"&gt; &lt;/div&gt;&lt;span&gt;border-7&lt;/span&gt;
                          |      &lt;/div&gt;
                          |      &lt;div class="helper-common-box"&gt;
                          |        &lt;div class="helper-box border-8 border"&gt; &lt;/div&gt;&lt;span&gt;border-8&lt;/span&gt;
                          |      &lt;/div&gt;
                          |      &lt;div class="helper-common-box"&gt;
                          |        &lt;div class="helper-box border-9 border"&gt; &lt;/div&gt;&lt;span&gt;border-9&lt;/span&gt;
                          |      &lt;/div&gt;
                          |      &lt;div class="helper-common-box"&gt;
                          |        &lt;div class="helper-box border-10 border"&gt; &lt;/div&gt;&lt;span&gt;border-10&lt;/span&gt;
                          |      &lt;/div&gt;
                          |    &lt;/div&gt;
                          |  &lt;/div&gt;
                          |  &lt;div class="col-span-6 xxl:col-span-6 sm:col-span-12"&gt;
                          |    &lt;div class="border-wrapper alert-light-light h-full dark-helper"&gt;
                          |      &lt;h6 class="mb-3"&gt;Text Colors&lt;/h6&gt;
                          |      &lt;div class="helper-common-box"&gt;
                          |        &lt;div class="helper-box helper-text border txt-primary"&gt;C &lt;/div&gt;&lt;span&gt;txt-primary&lt;/span&gt;
                          |      &lt;/div&gt;
                          |      &lt;div class="helper-common-box"&gt;
                          |        &lt;div class="helper-box helper-text border txt-secondary"&gt;C &lt;/div&gt;&lt;span&gt;txt-secondary&lt;/span&gt;
                          |      &lt;/div&gt;
                          |      &lt;div class="helper-common-box"&gt;
                          |        &lt;div class="helper-box helper-text border txt-success"&gt;C &lt;/div&gt;&lt;span&gt;txt-success&lt;/span&gt;
                          |      &lt;/div&gt;
                          |      &lt;div class="helper-common-box"&gt;
                          |        &lt;div class="helper-box helper-text border txt-danger"&gt;C &lt;/div&gt;&lt;span&gt;txt-danger&lt;/span&gt;
                          |      &lt;/div&gt;
                          |      &lt;div class="helper-common-box"&gt;
                          |        &lt;div class="helper-box helper-text border txt-warning"&gt;C &lt;/div&gt;&lt;span&gt;txt-warning&lt;/span&gt;
                          |      &lt;/div&gt;
                          |      &lt;div class="helper-common-box"&gt;
                          |        &lt;div class="helper-box helper-text border txt-info"&gt;C &lt;/div&gt;&lt;span&gt;txt-info&lt;/span&gt;
                          |      &lt;/div&gt;
                          |      &lt;div class="helper-common-box"&gt;
                          |        &lt;div class="helper-box helper-text border txt-dark"&gt;C &lt;/div&gt;&lt;span&gt;txt-dark&lt;/span&gt;
                          |      &lt;/div&gt;
                          |      &lt;div class="helper-common-box"&gt;
                          |        &lt;div class="helper-box helper-text border txt-light bg-dark"&gt;C &lt;/div&gt;&lt;span&gt;txt-light&lt;/span&gt;
                          |      &lt;/div&gt;
                          |    &lt;/div&gt;
                          |  &lt;/div&gt;
                          |&lt;/div&gt;
              .col-span-12
                .card
                  .card-header
                    h5 Variation of Borders and Displays
                    p.f-m-light.mt-1 
                      | Use border utilities to add or remove an element's borders.
                    .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-4 xl:col-span-6 sm:col-span-12")
                        .border-wrapper.h-full.border
                          h6.mb-3 Additive Border 
                          .helper-common-box
                            .bg-light.custom-border(class="w-[40px] h-[40px] rounded-[25%]")
                            span border
                          .helper-common-box
                            .bg-light.custom-border-t(class="w-[40px] h-[40px] rounded-[25%]")
                            span border-top
                          .helper-common-box
                            .bg-light.custom-border-b(class="w-[40px] h-[40px] rounded-[25%]")
                            span border-bottom
                          .helper-common-box
                            .bg-light.custom-border-l(class="w-[40px] h-[40px] rounded-[25%]")
                            span border-left
                          .helper-common-box
                            .bg-light.custom-border-r(class="w-[40px] h-[40px] rounded-[25%]")
                            span border-right
                      div(class="col-span-4 xl:col-span-6 sm:col-span-12")
                        .border-wrapper.h-full.border.subtract-border
                          h6.mb-3 Subtractive Border
                          .helper-common-box
                            .bg-light.custom-border.border-0(class="w-[40px] h-[40px] rounded-[25%]") 
                            span border-0
                          .helper-common-box 
                            .bg-light.custom-border.border-t-0(class="w-[40px] h-[40px] rounded-[25%]") 
                            span border-t-0
                          .helper-common-box 
                            .bg-light.custom-border.border-r-0(class="w-[40px] h-[40px] rounded-[25%]") 
                            span border-e-0
                          .helper-common-box
                            .bg-light.custom-border.border-b-0(class="w-[40px] h-[40px] rounded-[25%]") 
                            span border-b-0 
                          .helper-common-box
                            .bg-light.custom-border.border-l-0(class="w-[40px] h-[40px] rounded-[25%]") 
                            span border-s-0
                      div(class="col-span-4 xl:col-span-12")
                        .border-wrapper.h-full.border
                          h6.mb-3 Additive Radius
                          .helper-common-box
                            .helper-radius.radius-wrapper(class="w-[60px] h-[30px] rounded-[6px]") 
                            span rounded
                          .helper-common-box
                            .helper-radius.radius-wrapper(class="w-[60px] h-[30px] rounded-t-[6px]") 
                            span rounded-top
                          .helper-common-box
                            .helper-radius.radius-wrapper(class="w-[60px] h-[30px] rounded-e-[6px]")
                            span rounded-end
                          .helper-common-box
                            .helper-radius.radius-wrapper(class="w-[60px] h-[30px] rounded-b-[6px]")
                            span rounded-bottom
                          .helper-common-box
                            .helper-radius.radius-wrapper(class="w-[60px] h-[30px] rounded-s-[6px]")
                            span rounded-start
                          .helper-common-box
                            .helper-radius.radius-wrapper(class="w-[60px] h-[30px] rounded-[100%]")
                            span rounded-full
                          .helper-common-box
                            .helper-radius.radius-wrapper(class="w-[60px] h-[30px] rounded-full")
                            span rounded-full 
                          .helper-common-box
                            .helper-radius.radius-wrapper(class="w-[60px] h-[30px] rounded-none")
                            span rounded-0 
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#display-b-copy' title='Copy')
                        i.icofont.icofont-copy-alt 
                      pre.custom-scrollbar  
                        code.language-html#display-b-copy
                          |&lt;div class="grid grid-cols-12 gap-3"&gt;
                          |  &lt;div class="col-span-4 xl:col-span-6 sm:col-span-12"&gt;
                          |    &lt;div class="border-wrapper h-full border"&gt;
                          |      &lt;h6 class="mb-3"&gt;Additive Border&lt;/h6&gt;
                          |      &lt;div class="helper-common-box"&gt;
                          |        &lt;div class="helper-box bg-light border"&gt;&lt;/div&gt;&lt;span&gt;border&lt;/span&gt;
                          |      &lt;/div&gt;
                          |      &lt;div class="helper-common-box"&gt;
                          |        &lt;div class="helper-box bg-light border-top"&gt;&lt;/div&gt;&lt;span&gt;border-top&lt;/span&gt;
                          |      &lt;/div&gt;
                          |      &lt;div class="helper-common-box"&gt;
                          |        &lt;div class="helper-box bg-light border-bottom"&gt;&lt;/div&gt;&lt;span&gt;border-bottom&lt;/span&gt;
                          |      &lt;/div&gt;
                          |      &lt;div class="helper-common-box"&gt;
                          |        &lt;div class="helper-box bg-light border-start"&gt;&lt;/div&gt;&lt;span&gt;border-start&lt;/span&gt;
                          |      &lt;/div&gt;
                          |      &lt;div class="helper-common-box"&gt;
                          |        &lt;div class="helper-box bg-light border-end"&gt;&lt;/div&gt;&lt;span&gt;border-end&lt;/span&gt;
                          |      &lt;/div&gt;
                          |    &lt;/div&gt;
                          |  &lt;/div&gt;
                          |  &lt;div class="col-span-4 xl:col-span-6 sm:col-span-12"&gt;
                          |    &lt;div class="border-wrapper h-full border"&gt;
                          |      &lt;h6 class="mb-3"&gt;Subtractive Border&lt;/h6&gt;
                          |      &lt;div class="helper-common-box"&gt;
                          |        &lt;div class="helper-box bg-light border border-0"&gt; &lt;/div&gt;&lt;span&gt;border-0&lt;/span&gt;
                          |      &lt;/div&gt;
                          |      &lt;div class="helper-common-box"&gt;
                          |        &lt;div class="helper-box bg-light border border-top-0"&gt; &lt;/div&gt;&lt;span&gt;border-top-0&lt;/span&gt;
                          |      &lt;/div&gt;
                          |      &lt;div class="helper-common-box"&gt;
                          |        &lt;div class="helper-box bg-light border border-end-0"&gt; &lt;/div&gt;&lt;span&gt;border-end-0&lt;/span&gt;
                          |      &lt;/div&gt;
                          |      &lt;div class="helper-common-box"&gt;
                          |        &lt;div class="helper-box bg-light border border-bottom-0"&gt; &lt;/div&gt;&lt;span&gt;border-bottom-0&lt;/span&gt;
                          |      &lt;/div&gt;
                          |      &lt;div class="helper-common-box"&gt;
                          |        &lt;div class="helper-box bg-light border border-start-0"&gt; &lt;/div&gt;&lt;span&gt;border-start-0&lt;/span&gt;
                          |      &lt;/div&gt;
                          |    &lt;/div&gt;
                          |  &lt;/div&gt;
                          |  &lt;div class="col-xl-4 col-sm-12"&gt;
                          |    &lt;div class="border-wrapper h-full border"&gt;
                          |      &lt;h6 class="mb-3"&gt;Additive Radius&lt;/h6&gt;
                          |      &lt;div class="helper-common-box"&gt;
                          |        &lt;div class="helper-radius radius-wrapper rounded"&gt;&lt;/div&gt;&lt;span&gt;rounded&lt;/span&gt;
                          |      &lt;/div&gt;
                          |      &lt;div class="helper-common-box"&gt;
                          |        &lt;div class="helper-radius radius-wrapper rounded-top"&gt;&lt;/div&gt;&lt;span&gt;rounded-top&lt;/span&gt;
                          |      &lt;/div&gt;
                          |      &lt;div class="helper-common-box"&gt;
                          |        &lt;div class="helper-radius radius-wrapper rounded-end"&gt;&lt;/div&gt;&lt;span&gt;rounded-end&lt;/span&gt;
                          |      &lt;/div&gt;
                          |      &lt;div class="helper-common-box"&gt;
                          |        &lt;div class="helper-radius radius-wrapper rounded-bottom"&gt;&lt;/div&gt;&lt;span&gt;rounded-bottom&lt;/span&gt;
                          |      &lt;/div&gt;
                          |      &lt;div class="helper-common-box"&gt;
                          |        &lt;div class="helper-radius radius-wrapper rounded-start"&gt;&lt;/div&gt;&lt;span&gt;rounded-start&lt;/span&gt;
                          |      &lt;/div&gt;
                          |      &lt;div class="helper-common-box"&gt;
                          |        &lt;div class="helper-radius radius-wrapper rounded-full"&gt;&lt;/div&gt;&lt;span&gt;rounded-full&lt;/span&gt;
                          |      &lt;/div&gt;
                          |      &lt;div class="helper-common-box"&gt;
                          |        &lt;div class="helper-radius radius-wrapper rounded-full"&gt;&lt;/div&gt;&lt;span&gt;rounded-full&lt;/span&gt;
                          |      &lt;/div&gt;
                          |      &lt;div class="helper-common-box"&gt;
                          |        &lt;div class="helper-radius radius-wrapper rounded-0"&gt;&lt;/div&gt;&lt;span&gt;rounded-0&lt;/span&gt;
                          |      &lt;/div&gt;
                          |    &lt;/div&gt;
                          |  &lt;/div&gt;
                          |&lt;/div&gt;
              .col-span-12
                .card
                  .card-header
                    h5 Background Colors 
                    p.f-m-light.mt-1 
                      | Use any component in a theme, use the colors 
                      code bg-* 
                      | and 
                      code alert-light-*.
                    .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-4 xl:col-span-6 sm:col-span-12")
                        .border-wrapper.h-full.border
                          h6.mb-3 Dark Backgrounds
                          .helper-common-box
                            .bg-primary(class="w-[40px] h-[40px] rounded-[25%]")
                            span bg-primary
                          .helper-common-box
                            .bg-secondary(class="w-[40px] h-[40px] rounded-[25%]")
                            span bg-secondary 
                          .helper-common-box
                            .bg-success(class="w-[40px] h-[40px] rounded-[25%]")
                            span bg-success 
                          .helper-common-box
                            .bg-danger(class="w-[40px] h-[40px] rounded-[25%]")
                            span bg-danger 
                          .helper-common-box
                            .bg-warning(class="w-[40px] h-[40px] rounded-[25%]")
                            span bg-warning 
                          .helper-common-box
                            .bg-info(class="w-[40px] h-[40px] rounded-[25%]")
                            span bg-info 
                          .helper-common-box
                            .bg-dark(class="w-[40px] h-[40px] rounded-[25%]")
                            span bg-dark 
                          .helper-common-box
                            .bg-light(class="w-[40px] h-[40px] rounded-[25%]")
                            span bg-light 
                      div(class="col-span-4 xl:col-span-6 sm:col-span-12")
                        .border-wrapper.h-full.border
                          h6.mb-3 Light Backgrounds
                          .helper-common-box
                            .alert-light-primary(class="w-[40px] h-[40px] rounded-[25%]")
                            span alert-light-primary 
                          .helper-common-box
                            .alert-light-secondary(class="w-[40px] h-[40px] rounded-[25%]")
                            span alert-light-secondary
                          .helper-common-box
                            .alert-light-success(class="w-[40px] h-[40px] rounded-[25%]")
                            span alert-light-success
                          .helper-common-box
                            .alert-light-danger(class="w-[40px] h-[40px] rounded-[25%]")
                            span alert-light-danger
                          .helper-common-box
                            .alert-light-warning(class="w-[40px] h-[40px] rounded-[25%]")
                            span alert-light-warning
                          .helper-common-box
                            .alert-light-info(class="w-[40px] h-[40px] rounded-[25%]")
                            span alert-light-info
                          .helper-common-box
                            .alert-light-dark(class="w-[40px] h-[40px] rounded-[25%]")
                            span alert-light-dark
                          .helper-common-box
                            .alert-light-light(class="w-[40px] h-[40px] rounded-[25%]")
                            span alert-light-light
                      div(class="col-span-4 xl:col-span-6 sm:col-span-12")
                        .border-wrapper.h-full.border
                          h6.mb-3 Extended Background Colors
                          .helper-common-box
                            .light-card(class="w-[40px] h-[40px] rounded-[25%]") 
                            span light-card
                          .helper-common-box
                            .light-background.custom-border(class="w-[40px] h-[40px] rounded-[25%]")
                            span light-background  
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#helper-copy' title='Copy')
                        i.icofont.icofont-copy-alt
                      pre.custom-scrollbar  
                        code.language-html#helper-copy
                          |&lt;div class="grid grid-cols-12 gap-3"&gt;
                          |  &lt;div class="col-span-4 xl:col-span-6 sm:col-span-12"&gt;
                          |    &lt;div class="border-wrapper h-full border"&gt;
                          |      &lt;h6 class="mb-3"&gt;Dark Backgrounds&lt;/h6&gt;
                          |      &lt;div class="helper-common-box"&gt;
                          |        &lt;div class="helper-box bg-primary"&gt;&lt;/div&gt;&lt;span&gt;bg-primary&lt;/span&gt;
                          |      &lt;/div&gt;
                          |      &lt;div class="helper-common-box"&gt;
                          |        &lt;div class="helper-box bg-secondary"&gt;&lt;/div&gt;&lt;span&gt;bg-secondary&lt;/span&gt;
                          |      &lt;/div&gt;
                          |      &lt;div class="helper-common-box"&gt;
                          |        &lt;div class="helper-box bg-success"&gt;&lt;/div&gt;&lt;span&gt;bg-success&lt;/span&gt;
                          |      &lt;/div&gt;
                          |      &lt;div class="helper-common-box"&gt;
                          |        &lt;div class="helper-box bg-danger"&gt;&lt;/div&gt;&lt;span&gt;bg-danger&lt;/span&gt;
                          |      &lt;/div&gt;
                          |      &lt;div class="helper-common-box"&gt;
                          |        &lt;div class="helper-box bg-warning"&gt;&lt;/div&gt;&lt;span&gt;bg-warning&lt;/span&gt;
                          |      &lt;/div&gt;
                          |      &lt;div class="helper-common-box"&gt;
                          |        &lt;div class="helper-box bg-info"&gt;&lt;/div&gt;&lt;span&gt;bg-info&lt;/span&gt;
                          |      &lt;/div&gt;
                          |      &lt;div class="helper-common-box"&gt;
                          |        &lt;div class="helper-box bg-dark"&gt;&lt;/div&gt;&lt;span&gt;bg-dark&lt;/span&gt;
                          |      &lt;/div&gt;
                          |      &lt;div class="helper-common-box"&gt;
                          |        &lt;div class="helper-box bg-light"&gt;&lt;/div&gt;&lt;span&gt;bg-light&lt;/span&gt;
                          |      &lt;/div&gt;
                          |    &lt;/div&gt;
                          |  &lt;/div&gt;
                          |  &lt;div class="col-span-4 xl:col-span-6 sm:col-span-12"&gt;
                          |    &lt;div class="border-wrapper h-full border"&gt;
                          |      &lt;h6 class="mb-3"&gt;Light Backgrounds&lt;/h6&gt;
                          |      &lt;div class="helper-common-box"&gt;
                          |        &lt;div class="helper-box alert-light-primary"&gt; &lt;/div&gt;&lt;span&gt;alert-light-primary&lt;/span&gt;
                          |      &lt;/div&gt;
                          |      &lt;div class="helper-common-box"&gt;
                          |        &lt;div class="helper-box alert-light-secondary"&gt;&lt;/div&gt;&lt;span&gt;alert-light-secondary&lt;/span&gt;
                          |      &lt;/div&gt;
                          |      &lt;div class="helper-common-box"&gt;
                          |        &lt;div class="helper-box alert-light-success"&gt;&lt;/div&gt;&lt;span&gt;alert-light-success&lt;/span&gt;
                          |      &lt;/div&gt;
                          |      &lt;div class="helper-common-box"&gt;
                          |        &lt;div class="helper-box alert-light-danger"&gt;&lt;/div&gt;&lt;span&gt;alert-light-danger&lt;/span&gt;
                          |      &lt;/div&gt;
                          |      &lt;div class="helper-common-box"&gt;
                          |        &lt;div class="helper-box alert-light-warning"&gt;&lt;/div&gt;&lt;span&gt;alert-light-warning&lt;/span&gt;
                          |      &lt;/div&gt;
                          |      &lt;div class="helper-common-box"&gt;
                          |        &lt;div class="helper-box alert-light-info"&gt;&lt;/div&gt;&lt;span&gt;alert-light-info&lt;/span&gt;
                          |      &lt;/div&gt;
                          |      &lt;div class="helper-common-box"&gt;
                          |        &lt;div class="helper-box alert-light-dark"&gt;&lt;/div&gt;&lt;span&gt;alert-light-dark&lt;/span&gt;
                          |      &lt;/div&gt;
                          |      &lt;div class="helper-common-box"&gt;
                          |        &lt;div class="helper-box alert-light-light"&gt;&lt;/div&gt;&lt;span&gt;alert-light-light&lt;/span&gt;
                          |      &lt;/div&gt;
                          |    &lt;/div&gt;
                          |  &lt;/div&gt;
                          |  &lt;div class="col-xl-4 col-sm-12"&gt;
                          |    &lt;div class="border-wrapper h-full border"&gt;
                          |      &lt;h6 class="mb-3"&gt;Extended Background Colors&lt;/h6&gt;
                          |      &lt;div class="helper-common-box"&gt;
                          |        &lt;div class="helper-box light-card"&gt; &lt;/div&gt;&lt;span&gt;light-card&lt;/span&gt;
                          |      &lt;/div&gt;
                          |      &lt;div class="helper-common-box"&gt;
                          |        &lt;div class="helper-box light-background border"&gt;&lt;/div&gt;&lt;span&gt;light-background&lt;/span&gt;
                          |      &lt;/div&gt;
                          |    &lt;/div&gt;
                          |  &lt;/div&gt;
                          |&lt;/div&gt; 
              .col-span-12
                .card
                  .card-header
                    h5 Border Colors
                    p.f-m-light.mt-1 
                      | Use 
                      code b-*/ b-t-*/ b-b-*/ b-l-*/ b-r-* 
                      | class for borders.
                    .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 
                    .gradient-border
                      .helper-common-box
                        .b-primary.custom-border.fill-wrapper(class="w-[40px] h-[40px] rounded-[25%]") 
                        span b-primary
                      .helper-common-box
                        .b-t-primary.custom-border.fill-wrapper(class="w-[40px] h-[40px] rounded-[25%]")
                        span b-t-primary
                      .helper-common-box
                        .b-b-primary.custom-border.fill-wrapper(class="w-[40px] h-[40px] rounded-[25%]") 
                        span b-b-primary
                      .helper-common-box
                        .b-l-primary.custom-border.fill-wrapper(class="w-[40px] h-[40px] rounded-[25%]") 
                        span b-l-primary
                      .helper-common-box
                        .b-r-primary.custom-border.fill-wrapper(class="w-[40px] h-[40px] rounded-[25%]") 
                        span b-r-primary
                      .helper-common-box
                        .b-secondary.custom-border.fill-wrapper(class="w-[40px] h-[40px] rounded-[25%]") 
                        span b-secondary
                      .helper-common-box
                        .b-t-secondary.custom-border.fill-wrapper(class="w-[40px] h-[40px] rounded-[25%]") 
                        span b-t-secondary
                      .helper-common-box
                        .b-b-secondary.custom-border.fill-wrapper(class="w-[40px] h-[40px] rounded-[25%]")
                        span b-b-secondary
                      .helper-common-box
                        .b-l-secondary.custom-border.fill-wrapper(class="w-[40px] h-[40px] rounded-[25%]") 
                        span b-l-secondary
                      .helper-common-box
                        .b-r-secondary.custom-border.fill-wrapper(class="w-[40px] h-[40px] rounded-[25%]") 
                        span b-r-secondary
                      .helper-common-box
                        .b-success.custom-border.fill-wrapper(class="w-[40px] h-[40px] rounded-[25%]") 
                        span b-success
                      .helper-common-box
                        .b-t-success.custom-border.fill-wrapper(class="w-[40px] h-[40px] rounded-[25%]") 
                        span b-t-success
                      .helper-common-box
                        .b-b-success.custom-border.fill-wrapper(class="w-[40px] h-[40px] rounded-[25%]") 
                        span b-b-success
                      .helper-common-box
                        .b-l-success.custom-border.fill-wrapper(class="w-[40px] h-[40px] rounded-[25%]") 
                        span b-l-success
                      .helper-common-box
                        .b-r-success.custom-border.fill-wrapper(class="w-[40px] h-[40px] rounded-[25%]") 
                        span b-r-success
                      .helper-common-box
                        .b-danger.custom-border.fill-wrapper(class="w-[40px] h-[40px] rounded-[25%]") 
                        span b-danger
                      .helper-common-box
                        .b-t-danger.custom-border.fill-wrapper(class="w-[40px] h-[40px] rounded-[25%]") 
                        span b-t-danger
                      .helper-common-box
                        .b-b-danger.custom-border.fill-wrapper(class="w-[40px] h-[40px] rounded-[25%]") 
                        span b-b-danger
                      .helper-common-box
                        .b-l-danger.custom-border.fill-wrapper(class="w-[40px] h-[40px] rounded-[25%]") 
                        span b-l-danger
                      .helper-common-box
                        .b-r-danger.custom-border.fill-wrapper(class="w-[40px] h-[40px] rounded-[25%]") 
                        span b-r-danger
                      .helper-common-box
                        .b-warning.custom-border.fill-wrapper(class="w-[40px] h-[40px] rounded-[25%]") 
                        span b-warning
                      .helper-common-box
                        .b-t-warning.custom-border.fill-wrapper(class="w-[40px] h-[40px] rounded-[25%]") 
                        span b-t-warning
                      .helper-common-box
                        .b-b-warning.custom-border.fill-wrapper(class="w-[40px] h-[40px] rounded-[25%]") 
                        span b-b-warning
                      .helper-common-box
                        .b-l-warning.custom-border.fill-wrapper(class="w-[40px] h-[40px] rounded-[25%]") 
                        span b-l-warning
                      .helper-common-box
                        .b-r-warning.custom-border.fill-wrapper(class="w-[40px] h-[40px] rounded-[25%]") 
                        span b-r-warning
                      .helper-common-box
                        .b-info.custom-border.fill-wrapper(class="w-[40px] h-[40px] rounded-[25%]") 
                        span b-info
                      .helper-common-box
                        .b-t-info.custom-border.fill-wrapper(class="w-[40px] h-[40px] rounded-[25%]") 
                        span b-t-info
                      .helper-common-box
                        .b-b-info.custom-border.fill-wrapper(class="w-[40px] h-[40px] rounded-[25%]") 
                        span b-b-info
                      .helper-common-box
                        .b-l-info.custom-border.fill-wrapper(class="w-[40px] h-[40px] rounded-[25%]") 
                        span b-l-info
                      .helper-common-box
                        .b-r-info.custom-border.fill-wrapper(class="w-[40px] h-[40px] rounded-[25%]") 
                        span b-r-info
                      .helper-common-box
                        .b-dark.custom-border.fill-wrapper(class="w-[40px] h-[40px] rounded-[25%]") 
                        span b-dark
                      .helper-common-box
                        .b-t-dark.custom-border.fill-wrapper(class="w-[40px] h-[40px] rounded-[25%]") 
                        span b-t-dark
                      .helper-common-box
                        .b-b-dark.custom-border.fill-wrapper(class="w-[40px] h-[40px] rounded-[25%]") 
                        span b-b-dark
                      .helper-common-box
                        .b-l-dark.custom-border.fill-wrapper(class="w-[40px] h-[40px] rounded-[25%]") 
                        span b-l-dark
                      .helper-common-box
                        .b-r-dark.custom-border.fill-wrapper(class="w-[40px] h-[40px] rounded-[25%]") 
                        span b-r-dark
                      .helper-common-box
                        .b-light.custom-border.fill-wrapper(class="w-[40px] h-[40px] rounded-[25%]") 
                        span b-light
                      .helper-common-box
                        .b-t-light.custom-border.fill-wrapper(class="w-[40px] h-[40px] rounded-[25%]") 
                        span b-t-light
                      .helper-common-box
                        .b-b-light.custom-border.fill-wrapper(class="w-[40px] h-[40px] rounded-[25%]") 
                        span b-b-light
                      .helper-common-box
                        .b-l-light.custom-border.fill-wrapper(class="w-[40px] h-[40px] rounded-[25%]") 
                        span b-l-light
                      .helper-common-box
                        .b-r-light.custom-border.fill-wrapper(class="w-[40px] h-[40px] rounded-[25%]") 
                        span b-r-light
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#color-b-copy' title='Copy')
                        i.icofont.icofont-copy-alt
                      pre.custom-scrollbar
                        code.language-html#color-b-copy
                          |&lt;div class="gradient-border"&gt;
                          |  &lt;div class="helper-common-box"&gt;
                          |    &lt;div class="helper-box b-primary custom-border fill-wrapper"&gt; &lt;/div&gt;&lt;span&gt;b-primary&lt;/span&gt;
                          |  &lt;/div&gt;
                          |  &lt;div class="helper-common-box"&gt;
                          |    &lt;div class="helper-box b-t-primary custom-border fill-wrapper"&gt; &lt;/div&gt;&lt;span&gt;b-t-primary&lt;/span&gt;
                          |  &lt;/div&gt;
                          |  &lt;div class="helper-common-box"&gt;
                          |    &lt;div class="helper-box b-b-primary custom-border fill-wrapper"&gt; &lt;/div&gt;&lt;span&gt;b-b-primary&lt;/span&gt;
                          |  &lt;/div&gt;
                          |  &lt;div class="helper-common-box"&gt;
                          |    &lt;div class="helper-box b-l-primary custom-border fill-wrapper"&gt; &lt;/div&gt;&lt;span&gt;b-l-primary&lt;/span&gt;
                          |  &lt;/div&gt;
                          |  &lt;div class="helper-common-box"&gt;
                          |    &lt;div class="helper-box b-r-primary custom-border fill-wrapper"&gt; &lt;/div&gt;&lt;span&gt;b-r-primary&lt;/span&gt;
                          |  &lt;/div&gt;
                          |  &lt;div class="helper-common-box"&gt;
                          |    &lt;div class="helper-box b-secondary custom-border fill-wrapper"&gt; &lt;/div&gt;&lt;span&gt;b-secondary&lt;/span&gt;
                          |  &lt;/div&gt;
                          |  &lt;div class="helper-common-box"&gt;
                          |    &lt;div class="helper-box b-t-secondary custom-border fill-wrapper"&gt; &lt;/div&gt;&lt;span&gt;b-t-secondary&lt;/span&gt;
                          |  &lt;/div&gt;
                          |  &lt;div class="helper-common-box"&gt;
                          |    &lt;div class="helper-box b-b-secondary custom-border fill-wrapper"&gt; &lt;/div&gt;&lt;span&gt;b-b-secondary&lt;/span&gt;
                          |  &lt;/div&gt;
                          |  &lt;div class="helper-common-box"&gt;
                          |    &lt;div class="helper-box b-l-secondary custom-border fill-wrapper"&gt; &lt;/div&gt;&lt;span&gt;b-l-secondary&lt;/span&gt;
                          |  &lt;/div&gt;
                          |  &lt;div class="helper-common-box"&gt;
                          |    &lt;div class="helper-box b-r-secondary custom-border fill-wrapper"&gt; &lt;/div&gt;&lt;span&gt;b-r-secondary&lt;/span&gt;
                          |  &lt;/div&gt;
                          |  &lt;div class="helper-common-box"&gt;
                          |    &lt;div class="helper-box b-success custom-border fill-wrapper"&gt; &lt;/div&gt;&lt;span&gt;b-success&lt;/span&gt;
                          |  &lt;/div&gt;
                          |  &lt;div class="helper-common-box"&gt;
                          |    &lt;div class="helper-box b-t-success custom-border fill-wrapper"&gt; &lt;/div&gt;&lt;span&gt;b-t-success&lt;/span&gt;
                          |  &lt;/div&gt;
                          |  &lt;div class="helper-common-box"&gt;
                          |    &lt;div class="helper-box b-b-success custom-border fill-wrapper"&gt; &lt;/div&gt;&lt;span&gt;b-b-success&lt;/span&gt;
                          |  &lt;/div&gt;
                          |  &lt;div class="helper-common-box"&gt;
                          |    &lt;div class="helper-box b-l-success custom-border fill-wrapper"&gt; &lt;/div&gt;&lt;span&gt;b-l-success&lt;/span&gt;
                          |  &lt;/div&gt;
                          |  &lt;div class="helper-common-box"&gt;
                          |    &lt;div class="helper-box b-r-success custom-border fill-wrapper"&gt; &lt;/div&gt;&lt;span&gt;b-r-success&lt;/span&gt;
                          |  &lt;/div&gt;
                          |  &lt;div class="helper-common-box"&gt;
                          |    &lt;div class="helper-box b-danger custom-border fill-wrapper"&gt; &lt;/div&gt;&lt;span&gt;b-danger&lt;/span&gt;
                          |  &lt;/div&gt;
                          |  &lt;div class="helper-common-box"&gt;
                          |    &lt;div class="helper-box b-t-danger custom-border fill-wrapper"&gt; &lt;/div&gt;&lt;span&gt;b-t-danger&lt;/span&gt;
                          |  &lt;/div&gt;
                          |  &lt;div class="helper-common-box"&gt;
                          |    &lt;div class="helper-box b-b-danger custom-border fill-wrapper"&gt; &lt;/div&gt;&lt;span&gt;b-b-danger&lt;/span&gt;
                          |  &lt;/div&gt;
                          |  &lt;div class="helper-common-box"&gt;
                          |    &lt;div class="helper-box b-l-danger custom-border fill-wrapper"&gt; &lt;/div&gt;&lt;span&gt;b-l-danger&lt;/span&gt;
                          |  &lt;/div&gt;
                          |  &lt;div class="helper-common-box"&gt;
                          |    &lt;div class="helper-box b-r-danger custom-border fill-wrapper"&gt; &lt;/div&gt;&lt;span&gt;b-r-danger&lt;/span&gt;
                          |  &lt;/div&gt;
                          |  &lt;div class="helper-common-box"&gt;
                          |    &lt;div class="helper-box b-warning custom-border fill-wrapper"&gt; &lt;/div&gt;&lt;span&gt;b-warning&lt;/span&gt;
                          |  &lt;/div&gt;
                          |  &lt;div class="helper-common-box"&gt;
                          |    &lt;div class="helper-box b-t-warning custom-border fill-wrapper"&gt; &lt;/div&gt;&lt;span&gt;b-t-warning&lt;/span&gt;
                          |  &lt;/div&gt;
                          |  &lt;div class="helper-common-box"&gt;
                          |    &lt;div class="helper-box b-b-warning custom-border fill-wrapper"&gt; &lt;/div&gt;&lt;span&gt;b-b-warning&lt;/span&gt;
                          |  &lt;/div&gt;
                          |  &lt;div class="helper-common-box"&gt;
                          |    &lt;div class="helper-box b-l-warning custom-border fill-wrapper"&gt; &lt;/div&gt;&lt;span&gt;b-l-warning&lt;/span&gt;
                          |  &lt;/div&gt;
                          |  &lt;div class="helper-common-box"&gt;
                          |    &lt;div class="helper-box b-r-warning custom-border fill-wrapper"&gt; &lt;/div&gt;&lt;span&gt;b-r-warning&lt;/span&gt;
                          |  &lt;/div&gt;
                          |  &lt;div class="helper-common-box"&gt;
                          |    &lt;div class="helper-box b-info custom-border fill-wrapper"&gt; &lt;/div&gt;&lt;span&gt;b-info&lt;/span&gt;
                          |  &lt;/div&gt;
                          |  &lt;div class="helper-common-box"&gt;
                          |    &lt;div class="helper-box b-t-info custom-border fill-wrapper"&gt; &lt;/div&gt;&lt;span&gt;b-t-info&lt;/span&gt;
                          |  &lt;/div&gt;
                          |  &lt;div class="helper-common-box"&gt;
                          |    &lt;div class="helper-box b-b-info custom-border fill-wrapper"&gt; &lt;/div&gt;&lt;span&gt;b-b-info&lt;/span&gt;
                          |  &lt;/div&gt;
                          |  &lt;div class="helper-common-box"&gt;
                          |    &lt;div class="helper-box b-l-info custom-border fill-wrapper"&gt; &lt;/div&gt;&lt;span&gt;b-l-info&lt;/span&gt;
                          |  &lt;/div&gt;
                          |  &lt;div class="helper-common-box"&gt;
                          |    &lt;div class="helper-box b-r-info custom-border fill-wrapper"&gt; &lt;/div&gt;&lt;span&gt;b-r-info&lt;/span&gt;
                          |  &lt;/div&gt;
                          |  &lt;div class="helper-common-box"&gt;
                          |    &lt;div class="helper-box b-dark custom-border fill-wrapper"&gt; &lt;/div&gt;&lt;span&gt;b-dark&lt;/span&gt;
                          |  &lt;/div&gt;
                          |  &lt;div class="helper-common-box"&gt;
                          |    &lt;div class="helper-box b-t-dark custom-border fill-wrapper"&gt; &lt;/div&gt;&lt;span&gt;b-t-dark&lt;/span&gt;
                          |  &lt;/div&gt;
                          |  &lt;div class="helper-common-box"&gt;
                          |    &lt;div class="helper-box b-b-dark custom-border fill-wrapper"&gt; &lt;/div&gt;&lt;span&gt;b-b-dark&lt;/span&gt;
                          |  &lt;/div&gt;
                          |  &lt;div class="helper-common-box"&gt;
                          |    &lt;div class="helper-box b-l-dark custom-border fill-wrapper"&gt; &lt;/div&gt;&lt;span&gt;b-l-dark&lt;/span&gt;
                          |  &lt;/div&gt;
                          |  &lt;div class="helper-common-box"&gt;
                          |    &lt;div class="helper-box b-r-dark custom-border fill-wrapper"&gt; &lt;/div&gt;&lt;span&gt;b-r-dark&lt;/span&gt;
                          |  &lt;/div&gt;
                          |  &lt;div class="helper-common-box"&gt;
                          |    &lt;div class="helper-box b-light custom-border fill-wrapper"&gt; &lt;/div&gt;&lt;span&gt;b-light&lt;/span&gt;
                          |  &lt;/div&gt;
                          |  &lt;div class="helper-common-box"&gt;
                          |    &lt;div class="helper-box b-t-light custom-border fill-wrapper"&gt; &lt;/div&gt;&lt;span&gt;b-t-light&lt;/span&gt;
                          |  &lt;/div&gt;
                          |  &lt;div class="helper-common-box"&gt;
                          |    &lt;div class="helper-box b-b-light custom-border fill-wrapper"&gt; &lt;/div&gt;&lt;span&gt;b-b-light&lt;/span&gt;
                          |  &lt;/div&gt;
                          |  &lt;div class="helper-common-box"&gt;
                          |    &lt;div class="helper-box b-l-light custom-border fill-wrapper"&gt; &lt;/div&gt;&lt;span&gt;b-l-light&lt;/span&gt;
                          |  &lt;/div&gt;
                          |  &lt;div class="helper-common-box"&gt;
                          |    &lt;div class="helper-box b-r-light custom-border fill-wrapper"&gt; &lt;/div&gt;&lt;span&gt;b-r-light&lt;/span&gt;
                          |  &lt;/div&gt;
                          |&lt;/div&gt;
              div(class="col-span-6 xxl:col-span-12")
                .card.helper-height-equal
                  .card-header
                    h5 Images Sizes
                    p.f-m-light.mt-1 
                      | Use 
                      code img-h-* 
                      | & 
                      code  img-* 
                      |  for image height and border radius for use 
                      code rounded-* / b-r-* / and rounded-full 
                      | for border-radius images.
                    .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") 
                        .card-wrapper.custom-border.rounded-3.h-full
                          .gradient-border.gap-3
                            img(src="../assets/images/blog/comment.jpg" alt="img-size-30" class="w-[30px] h-[30px]")
                            img(src="../assets/images/blog/comment.jpg" alt="img-size-40" class="w-[40px] h-[40px]")
                            img(src="../assets/images/blog/comment.jpg" alt="img-size-50" class="w-[50px] h-[50px]")
                            img(src="../assets/images/blog/comment.jpg" alt="img-size-60" class="w-[60px] h-[60px]")
                            img(src="../assets/images/blog/comment.jpg" alt="img-size-70" class="w-[70px] h-[70px]")
                            img(src="../assets/images/blog/comment.jpg" alt="img-size-80" class="w-[80px] h-[80px]")
                            img(src="../assets/images/blog/comment.jpg" alt="img-size-90" class="w-[90px] h-[90px]")
                            img(src="../assets/images/blog/comment.jpg" alt="img-size-100" class="w-[100px] h-[100px]")                         
                      div(class="col-span-12")
                        .card-wrapper.custom-border.rounded-3.h-full
                          .gradient-border.gap-3
                            img(src="../assets/images/blog/comment.jpg" alt="img-size-30" class="w-[30px] h-[30px] rounded-[4px]")
                            img(src="../assets/images/blog/comment.jpg" alt="img-size-40" class="w-[40px] h-[40px] rounded-[6px]")
                            img(src="../assets/images/blog/comment.jpg" alt="img-size-50" class="w-[50px] h-[50px] rounded-[4px]")
                            img(src="../assets/images/blog/comment.jpg" alt="img-size-60" class="w-[60px] h-[60px] rounded-[4px]")
                            img(src="../assets/images/blog/comment.jpg" alt="img-size-70" class="w-[70px] h-[70px] rounded-[8px]")
                            img(src="../assets/images/blog/comment.jpg" alt="img-size-80" class="w-[80px] h-[80px] rounded-[16px]")
                            img(src="../assets/images/blog/comment.jpg" alt="img-size-90" class="w-[90px] h-[90px] rounded-[32px]")
                            img(src="../assets/images/blog/comment.jpg" alt="img-size-100" class="w-[100px] h-[100px] rounded-[100%]")
                          .code-box-copy
                            button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#image-s-copy' title='Copy')
                              i.icofont.icofont-copy-alt
                            pre.custom-scrollbar
                              code.language-html#image-s-copy
                                |&lt;div class="grid grid-cols-12 gap-3"&gt;
                                |  &lt;div class="colspan-12 helper-col-6"&gt; 
                                |    &lt;div class="card-wrapper border rounded-3 h-full"&gt;
                                |      &lt;div class="gradient-border gap-3"&gt;
                                |        &lt;img class="img-30 img-h-30" src="../assets/images/blog/comment.jpg" alt="img-size-30"&gt;
                                |        &lt;img class="img-40 img-h-40" src="../assets/images/blog/comment.jpg" alt="img-size-40"&gt;
                                |        &lt;img class="img-50 img-h-50" src="../assets/images/blog/comment.jpg" alt="img-size-50"&gt;
                                |        &lt;img class="img-60 img-h-60" src="../assets/images/blog/comment.jpg" alt="img-size-60"&gt;
                                |        &lt;img class="img-70 img-h-70" src="../assets/images/blog/comment.jpg" alt="img-size-70"&gt;
                                |        &lt;img class="img-80 img-h-80" src="../assets/images/blog/comment.jpg" alt="img-size-80"&gt;
                                |        &lt;img class="img-90 img-h-90" src="../assets/images/blog/comment.jpg" alt="img-size-90"&gt;
                                |        &lt;img class="img-100 img-h-full" src="../assets/images/blog/comment.jpg" alt="img-size-100"&gt;
                                |      &lt;/div&gt;
                                |    &lt;/div&gt;
                                |  &lt;/div&gt;
                                |  &lt;div class="colspan-12 helper-col-6"&gt;
                                |    &lt;div class="card-wrapper border rounded-3 h-full"&gt;
                                |      &lt;div class="gradient-border gap-3"&gt;
                                |        &lt;img class="img-30 img-h-30 b-r-4" src="../assets/images/blog/comment.jpg" alt="img-size-30"&gt;
                                |        &lt;img class="img-40 img-h-40 rounded" src="../assets/images/blog/comment.jpg" alt="img-size-40"&gt;
                                |        &lt;img class="img-50 img-h-50 rounded-1" src="../assets/images/blog/comment.jpg" alt="img-size-50"&gt;
                                |        &lt;img class="img-60 img-h-60 rounded-2" src="../assets/images/blog/comment.jpg" alt="img-size-60"&gt;
                                |        &lt;img class="img-70 img-h-70 rounded-3" src="../assets/images/blog/comment.jpg" alt="img-size-70"&gt;
                                |        &lt;img class="img-80 img-h-80 rounded-4" src="../assets/images/blog/comment.jpg" alt="img-size-80"&gt;
                                |        &lt;img class="img-90 img-h-90 rounded-5" src="../assets/images/blog/comment.jpg" alt="img-size-90"&gt;
                                |        &lt;img class="img-100 img-h-full rounded-full" src="../assets/images/blog/comment.jpg" alt="img-size-100"&gt;
                                |      &lt;/div&gt;
                                |    &lt;/div&gt;
                                |  &lt;/div&gt;
                                |&lt;/div&gt;                   
              div(class="col-span-6 xxl:col-span-12")
                .card.helper-height-equal
                  .card-header 
                    h5 Font-style
                    p.f-m-light.mt-1 
                      | Use font-style like: 
                      code  f-s-* [normal / italic / oblique / initial / inherit]
                      | .
                    .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 
                    p.mb-3.f-s-normal 
                      | This is a 
                      strong f-s-normal
                      |  font-style 
                    p.mb-3.f-s-italic
                      | This is a 
                      strong f-s-italic
                      |  font-style 
                    p.mb-3.f-s-oblique
                      | This is a 
                      strong f-s-oblique
                      |  font-style 
                    p.mb-3.f-s-initial
                      | This is a 
                      strong f-s-initial
                      |  font-style 
                    p.mb-3.f-s-inherit
                      | This is a 
                      strong f-s-inherit
                      |  font-style 
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#form-style-copy' title='Copy')
                        i.icofont.icofont-copy-alt
                      pre.custom-scrollbar
                        code.language-html#form-style-copy
                          |&lt;div class="card-body"&gt; 
                          |  &lt;p class="f-s-normal"&gt;This is a&lt;strong&gt;f-s-normal&lt;/strong&gt;font-style&lt;/p&gt;
                          |  &lt;p class="f-s-italic"&gt;This is a&lt;strong&gt;f-s-italic&lt;/strong&gt;font-style&lt;/p&gt;
                          |  &lt;p class="f-s-oblique"&gt;This is a&lt;strong&gt;f-s-oblique&lt;/strong&gt;font-style&lt;/p&gt;
                          |  &lt;p class="f-s-initial"&gt;This is a&lt;strong&gt;f-s-initial&lt;/strong&gt;font-style&lt;/p&gt;
                          |  &lt;p class="f-s-inherit"&gt;This is a&lt;strong&gt;f-s-inherit&lt;/strong&gt;font-style&lt;/p&gt;
                          |&lt;/div&gt;
              div(class="col-span-6 xl:col-span-12")
                .card.helper-height-equal
                  .card-header
                    h5 Font Weight 
                    p.f-m-light.mt-1 
                      | Use font-weight classes like: 
                      code f-w-* [100 / 300 / 400 / 600 / 700 / 900]
                      |.
                    .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
                    .helper-common-box
                      .f-w-100 
                        | You can set light font weight heading f-w-100
                    .helper-common-box
                      .font-light
                        | You can set light font weight heading font-light
                    .helper-common-box
                      .font-normal
                        | You can set light font weight heading font-normal
                    .helper-common-box
                      .font-semibold
                        | You can set bolder font weight heading font-semibold
                    .helper-common-box
                      .font-bold
                        | You can set bold font weight heading font-bold
                    .helper-common-box
                      .font-black
                        | You can set bold font weight heading font-black
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#font-w-copy' title='Copy')
                        i.icofont.icofont-copy-alt
                      pre.custom-scrollbar
                        code.language-html#font-w-copy
                          |&lt;div class="card-body"&gt;
                          |  &lt;div class="helper-common-box"&gt;
                          |    &lt;div class="f-w-100"&gt;You can set light font weight heading f-w-100&lt;/div&gt;
                          |  &lt;/div&gt;
                          |  &lt;div class="helper-common-box"&gt;
                          |    &lt;div class="font-light"&gt;You can set light font weight heading font-light&lt;/div&gt;
                          |  &lt;/div&gt;
                          |  &lt;div class="helper-common-box"&gt;
                          |    &lt;div class="font-normal"&gt;You can set light font weight heading font-normal&lt;/div&gt;
                          |  &lt;/div&gt;
                          |  &lt;div class="helper-common-box"&gt;
                          |    &lt;div class="font-semibold"&gt;You can set bolder font weight heading font-semibold&lt;/div&gt;
                          |  &lt;/div&gt;
                          |  &lt;div class="helper-common-box"&gt;
                          |    &lt;div class="font-bold"&gt;You can set bold font weight heading font-bold&lt;/div&gt;
                          |  &lt;/div&gt;
                          |  &lt;div class="helper-common-box"&gt;
                          |    &lt;div class="font-black"&gt;You can set bold font weight heading font-black&lt;/div&gt;
                          |  &lt;/div&gt;
                          |&lt;/div&gt;
              div(class="col-span-6 xl:col-span-12")
                .card.helper-height-equal
                  .card-header
                    h5 Text Colors
                    p.f-m-light.mt-1 
                      | Use text color for 
                      code font-*
                      |  classes.
                    .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.txt-space
                    .font-primary 
                      | This is a 
                      strong font-primary 
                      |  text used class as font-primary
                    .font-secondary
                      | This is a 
                      strong font-secondary 
                      |  text used class as font-secondary 
                    .font-success
                      | This is a 
                      strong font-success 
                      |  text used class as font-success
                    .font-danger
                      | This is a 
                      strong font-danger 
                      |  text used class as font-danger
                    .font-warning
                      | This is a 
                      strong font-warning 
                      |  text used class as font-warning
                    .font-info
                      | This is a 
                      strong font-info 
                      |  text used class as font-info
                    .font-dark
                      | This is a 
                      strong font-dark 
                      |  text used class as font-dark
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#text-color-copy' title='Copy')
                        i.icofont.icofont-copy-alt
                      pre.custom-scrollbar
                        code.language-html#text-color-copy
                          |&lt;div class="card-body txt-space"&gt;
                          |  &lt;div class="font-primary"&gt;This is a&lt;strong&gt;font-primary&lt;/strong&gt;text used class as font-primary&lt;/div&gt;
                          |  &lt;div class="font-secondary"&gt;This is a&lt;strong&gt;font-secondary&lt;/strong&gt;text used class as font-secondary &lt;/div&gt;
                          |  &lt;div class="font-success"&gt;This is a&lt;strong&gt;font-success&lt;/strong&gt;text used class as font-success&lt;/div&gt;
                          |  &lt;div class="font-danger"&gt;This is a&lt;strong&gt;font-danger&lt;/strong&gt;text used class as font-danger&lt;/div&gt;
                          |  &lt;div class="font-warning"&gt;This is a&lt;strong&gt;font-warning&lt;/strong&gt;text used class as font-warning&lt;/div&gt;
                          |  &lt;div class="font-info"&gt;This is a&lt;strong&gt;font-info&lt;/strong&gt;text used class as font-info&lt;/div&gt;
                          |  &lt;div class="font-dark"&gt;This is a&lt;strong&gt;font-dark&lt;/strong&gt;text used class as font-dark&lt;/div&gt;
                          |&lt;/div&gt;
              div(class="col-span-12")
                .card
                  .card-header
                    h5 Padding
                    p.f-m-light.mt-1 
                      | Use padding classes like: 
                      code p-* [10 / 15 / 20 / 25 / 30 / 35 / 40/ 45 / 50]
                      |.
                    .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
                    .border-wrapper.h-full.alert-light-light.dark-helper
                      .helper-common-box.helper-p-wrapper
                        .helper-p-box.p-10.bg-light.custom-border
                          span p-10
                        .helper-p-box.p-15.bg-light.custom-border
                          span p-15
                        .helper-p-box.p-20.bg-light.custom-border
                          span p-20
                        .helper-p-box.p-25.bg-light.custom-border
                          span p-25
                        .helper-p-box.p-30.bg-light.custom-border
                          span p-30
                        .helper-p-box.p-35.bg-light.custom-border
                          span p-35
                        .helper-p-box.p-40.bg-light.custom-border
                          span p-40
                        .helper-p-box.p-45.bg-light.custom-border
                          span p-45
                        .helper-p-box.p-50.bg-light.custom-border
                          span p-50
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#padding-copy' title='Copy')
                        i.icofont.icofont-copy-alt
                      pre.custom-scrollbar
                        code.language-html#padding-copy
                          |&lt;div class="border-wrapper h-full alert-light-light dark-helper"&gt;
                          |  &lt;div class="helper-common-box helper-p-wrapper"&gt;
                          |    &lt;div class="helper-p-box p-10 bg-light border"&gt;&lt;span&gt;p-10&lt;/span&gt;&lt;/div&gt;
                          |    &lt;div class="helper-p-box p-15 bg-light border"&gt;&lt;span&gt;p-15&lt;/span&gt;&lt;/div&gt;
                          |    &lt;div class="helper-p-box p-5 bg-light border"&gt;&lt;span&gt;p-5&lt;/span&gt;&lt;/div&gt;
                          |    &lt;div class="helper-p-box p-25 bg-light border"&gt;&lt;span&gt;p-25&lt;/span&gt;&lt;/div&gt;
                          |    &lt;div class="helper-p-box p-30 bg-light border"&gt;&lt;span&gt;p-30&lt;/span&gt;&lt;/div&gt;
                          |    &lt;div class="helper-p-box p-35 bg-light border"&gt;&lt;span&gt;p-35&lt;/span&gt;&lt;/div&gt;
                          |    &lt;div class="helper-p-box p-40 bg-light border"&gt;&lt;span&gt;p-40&lt;/span&gt;&lt;/div&gt;
                          |    &lt;div class="helper-p-box p-45 bg-light border"&gt;&lt;span&gt;p-45&lt;/span&gt;&lt;/div&gt;
                          |    &lt;div class="helper-p-box p-50 bg-light border"&gt;&lt;span&gt;p-50&lt;/span&gt;&lt;/div&gt;
                          |  &lt;/div&gt;
                          |&lt;/div&gt;
              div(class="col-span-3 xl:col-span-12")
                .card
                  .card-header
                    h5 Dashed Border
                    p.f-m-light.mt-1 
                      | Use
                      code  b-width-*
                      |  and 
                      code  border-s-dashed
                      |  to dashed border.
                    .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
                    .helper-common-box.helper-p-wrapper
                      .border-common-box.border-s-dashed.b-width-1 b-width-1
                      .border-common-box.border-s-dashed.b-width-2 b-width-2
                      .border-common-box.border-s-dashed.b-width-3 b-width-3
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#dashed-border-copy' title='Copy')
                        i.icofont.icofont-copy-alt
                      pre.custom-scrollbar
                        code.language-html#dashed-border-copy
                          |&lt;div class="helper-common-box helper-p-wrapper"&gt;
                          |  &lt;div class="border-common-box border-s-dashed b-width-1"&gt;b-width-1&lt;/div&gt;
                          |  &lt;div class="border-common-box border-s-dashed b-width-2"&gt;b-width-2&lt;/div&gt;
                          |  &lt;div class="border-common-box border-s-dashed b-width-3"&gt;b-width-3&lt;/div&gt;
                          |&lt;/div&gt;
              div(class="col-span-3 xl:col-span-12")
                .card
                  .card-header
                    h5 Dotted Border
                    p.f-m-light.mt-1 
                      | Use the
                      code  b-width-*
                      |  and 
                      code  border-s-dotted
                      |  to dotted border.
                    .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
                    .helper-common-box.helper-p-wrapper
                      .border-common-box.border-s-dotted.b-width-1 b-width-1
                      .border-common-box.border-s-dotted.b-width-2 b-width-2
                      .border-common-box.border-s-dotted.b-width-3 b-width-3
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#dotted-border-copy' title='Copy')
                        i.icofont.icofont-copy-alt
                      pre.custom-scrollbar
                        code.language-html#dotted-border-copy
                          |&lt;div class="helper-common-box helper-p-wrapper"&gt;
                          |  &lt;div class="border-common-box border-s-dotted b-width-1"&gt;b-width-1&lt;/div&gt;
                          |  &lt;div class="border-common-box border-s-dotted b-width-2"&gt;b-width-2&lt;/div&gt;
                          |  &lt;div class="border-common-box border-s-dotted b-width-3"&gt;b-width-3&lt;/div&gt;
                          |&lt;/div&gt;
              div(class="col-span-3 xl:col-span-12")
                .card
                  .card-header
                    h5 Groove Border
                    p.f-m-light.mt-1 
                      | Use the
                      code  b-width-*
                      |  and 
                      code  border-s-groove
                      |  to groove border.
                    .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
                    .helper-common-box.helper-p-wrapper
                      .border-common-box.border-s-groove.b-width-1 b-width-1
                      .border-common-box.border-s-groove.b-width-2 b-width-2
                      .border-common-box.border-s-groove.b-width-3 b-width-3
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#groove-border-copy' title='Copy')
                        i.icofont.icofont-copy-alt
                      pre.custom-scrollbar
                        code.language-html#groove-border-copy
                          |&lt;div class="helper-common-box helper-p-wrapper"&gt;
                          |  &lt;div class="border-common-box border-s-groove b-width-1"&gt;b-width-1&lt;/div&gt;
                          |  &lt;div class="border-common-box border-s-groove b-width-2"&gt;b-width-2&lt;/div&gt;
                          |  &lt;div class="border-common-box border-s-groove b-width-3"&gt;b-width-3&lt;/div&gt;
                          |&lt;/div&gt;
              div(class="col-span-3 xl:col-span-12")
                .card
                  .card-header
                    h5 Ridge Border
                    p.f-m-light.mt-1 
                      | Use the
                      code  b-width-*
                      |  and 
                      code  border-s-inset
                      |  to ridge border.
                    .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
                    .helper-common-box.helper-p-wrapper
                      .border-common-box.border-s-inset.b-width-1 b-width-1
                      .border-common-box.border-s-inset.b-width-2 b-width-2
                      .border-common-box.border-s-inset.b-width-3 b-width-3
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#ridge-border-copy' title='Copy')
                        i.icofont.icofont-copy-alt
                      pre.custom-scrollbar
                        code.language-html#ridge-border-copy
                          |&lt;div class="helper-common-box helper-p-wrapper"&gt;
                          |  &lt;div class="border-common-box border-s-inset b-width-1"&gt;b-width-1&lt;/div&gt;
                          |  &lt;div class="border-common-box border-s-inset b-width-2"&gt;b-width-2&lt;/div&gt;
                          |  &lt;div class="border-common-box border-s-inset b-width-3"&gt;b-width-3&lt;/div&gt;
                          |&lt;/div&gt;
              div(class="col-span-12")
                .card
                  .card-header
                    h5 Only One Side Padding
                    p.f-m-light.mt-1 
                      | Use padding classes like: 
                      code p-l-* / p-r-* / p-t-* / p-b-*
                      |.
                    .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-3 xxl:col-span-6 sm:col-span-12")
                        .border-wrapper.h-full.alert-light-light.dark-helper
                          h6.mb-3 Padding Left
                          .common-p-box
                            span pl-10
                            span pl-15
                            span pl-20
                            span pl-25
                            span pl-30
                            span pl-35
                            span pl-40
                            span pl-45
                            span pl-50  
                      div(class="col-span-3 xxl:col-span-6 sm:col-span-12")
                        .border-wrapper.h-full.alert-light-light.dark-helper
                          h6.mb-3 Padding Right
                          .common-p-box
                            span pr-10
                            span pr-15
                            span pr-20
                            span pr-25
                            span pr-30
                            span pr-35
                            span pr-40
                            span pr-45
                            span pr-50 
                      div(class="col-span-3 xxl:col-span-6 sm:col-span-12")
                        .border-wrapper.h-full.alert-light-light.dark-helper
                          h6.mb-3 Padding Top
                          .common-p-box
                            span pt-10
                            span pt-15
                            span pt-20
                            span pt-25
                            span pt-30
                            span pt-35
                            span pt-40
                            span pt-45
                            span pt-50 
                      div(class="col-span-3 xxl:col-span-6 sm:col-span-12")
                        .border-wrapper.h-full.alert-light-light.dark-helper
                          h6.mb-3 Padding Bottom
                          .common-p-box
                            span pb-10
                            span pb-15
                            span pb-20
                            span pb-25
                            span pb-30
                            span pb-35
                            span pb-40
                            span pb-45
                            span pb-50 
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#padding-box-copy' title='Copy')
                        i.icofont.icofont-copy-alt
                      pre.custom-scrollbar
                        code.language-html#padding-box-copy
                          |&lt;div class="grid grid-cols-12 gap-3"&gt;   
                          |  &lt;div class="col-span-6 xxl:col-span-6 sm:col-span-12"&gt;
                          |    &lt;div class="border-wrapper h-full alert-light-light dark-helper"&gt;
                          |      &lt;h6 class="mb-3"&gt;Padding Left&lt;/h6&gt;
                          |      &lt;div class="common-p-box"&gt;
                          |        &lt;span&gt;p-l-10&lt;/span&gt;
                          |        &lt;span&gt;p-l-15&lt;/span&gt;
                          |        &lt;span&gt;p-l-20&lt;/span&gt;
                          |        &lt;span&gt;p-l-25&lt;/span&gt;
                          |        &lt;span&gt;p-l-30&lt;/span&gt;
                          |        &lt;span&gt;p-l-35&lt;/span&gt;
                          |        &lt;span&gt;p-l-40&lt;/span&gt;
                          |        &lt;span&gt;p-l-45&lt;/span&gt;
                          |        &lt;span&gt;p-l-50&lt;/span&gt;
                          |      &lt;/div&gt;
                          |    &lt;/div&gt;
                          |  &lt;/div&gt;
                          |  &lt;div class="col-span-6 xxl:col-span-6 sm:col-span-12"&gt;
                          |    &lt;div class="border-wrapper h-full alert-light-light dark-helper"&gt;
                          |      &lt;h6 class="mb-3"&gt;Padding Right&lt;/h6&gt;
                          |      &lt;div class="common-p-box"&gt;
                          |        &lt;span&gt;p-r-10&lt;/span&gt;
                          |        &lt;span&gt;p-r-15&lt;/span&gt;
                          |        &lt;span&gt;p-r-20&lt;/span&gt;
                          |        &lt;span&gt;p-r-25&lt;/span&gt;
                          |        &lt;span&gt;p-r-30&lt;/span&gt;
                          |        &lt;span&gt;p-r-35&lt;/span&gt;
                          |        &lt;span&gt;p-r-40&lt;/span&gt;
                          |        &lt;span&gt;p-r-45&lt;/span&gt;
                          |        &lt;span&gt;p-r-50&lt;/span&gt;
                          |      &lt;/div&gt;
                          |    &lt;/div&gt;
                          |  &lt;/div&gt;
                          |  &lt;div class="col-span-6 xxl:col-span-6 sm:col-span-12"&gt;
                          |    &lt;div class="border-wrapper h-full alert-light-light dark-helper"&gt;
                          |      &lt;h6 class="mb-3"&gt;Padding Top&lt;/h6&gt;
                          |      &lt;div class="common-p-box"&gt;
                          |        &lt;span&gt;p-t-10&lt;/span&gt;
                          |        &lt;span&gt;p-t-15&lt;/span&gt;
                          |        &lt;span&gt;p-t-20&lt;/span&gt;
                          |        &lt;span&gt;p-t-25&lt;/span&gt;
                          |        &lt;span&gt;p-t-30&lt;/span&gt;
                          |        &lt;span&gt;p-t-35&lt;/span&gt;
                          |        &lt;span&gt;p-t-40&lt;/span&gt;
                          |        &lt;span&gt;p-t-45&lt;/span&gt;
                          |        &lt;span&gt;p-t-50&lt;/span&gt;
                          |      &lt;/div&gt;
                          |    &lt;/div&gt;
                          |  &lt;/div&gt;
                          |  &lt;div class="col-span-6 xxl:col-span-6 sm:col-span-12"&gt;
                          |    &lt;div class="border-wrapper h-full alert-light-light dark-helper"&gt;
                          |      &lt;h6 class="mb-3"&gt;Padding Bottom&lt;/h6&gt;
                          |      &lt;div class="common-p-box"&gt;
                          |        &lt;span&gt;p-b-10&lt;/span&gt;
                          |        &lt;span&gt;p-b-15&lt;/span&gt;
                          |        &lt;span&gt;p-b-20&lt;/span&gt;
                          |        &lt;span&gt;p-b-25&lt;/span&gt;
                          |        &lt;span&gt;p-b-30&lt;/span&gt;
                          |        &lt;span&gt;p-b-35&lt;/span&gt;
                          |        &lt;span&gt;p-b-40&lt;/span&gt;
                          |        &lt;span&gt;p-b-45&lt;/span&gt;
                          |        &lt;span&gt;p-b-50&lt;/span&gt;
                          |      &lt;/div&gt;
                          |    &lt;/div&gt;
                          |  &lt;/div&gt;
                          |&lt;/div&gt;
              div(class="col-span-12")
                .card
                  .card-header
                    h5 Margins
                    p.f-m-light.mt-1 
                      | Use margin classes like: 
                      code m-* [10 / 15 / 20 / 25 / 30 / 35 / 40 / 45 / 50]
                      |.
                    .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
                    .gradient-border
                      .helper-common-box.gap-0.mb-0
                        .custom-border.bg-light(class="w-[40px] h-[40px] m-[10px] rounded-[25%]") 
                        span m-10
                      .helper-common-box.gap-0.mb-0
                        .custom-border.bg-light(class="w-[40px] h-[40px] m-[15px]  rounded-[25%]") 
                        span m-15
                      .helper-common-box.gap-0.mb-0
                        .custom-border.bg-light(class="w-[40px] h-[40px] m-[20px] rounded-[25%]") 
                        span m-20
                      .helper-common-box.gap-0.mb-0
                        .custom-border.bg-light(class="w-[40px] h-[40px] m-[25px] rounded-[25%]") 
                        span m-25
                      .helper-common-box.gap-0.mb-0
                        .custom-border.bg-light(class="w-[40px] h-[40px] m-[30px] rounded-[25%]") 
                        span m-30
                      .helper-common-box.gap-0.mb-0
                        .custom-border.bg-light(class="w-[40px] h-[40px] m-[35px] rounded-[25%]") 
                        span m-35
                      .helper-common-box.gap-0.mb-0
                        .custom-border.bg-light(class="w-[40px] h-[40px] m-[40px] rounded-[25%]") 
                        span m-40
                      .helper-common-box.gap-0.mb-0
                        .custom-border.bg-light(class="w-[40px] h-[40px] m-[45px] rounded-[25%]") 
                        span m-45
                      .helper-common-box.gap-0.mb-0
                        .custom-border.bg-light(class="w-[40px] h-[40px] m-[50px] rounded-[25%]") 
                        span m-50
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#margin-copy' title='Copy')
                        i.icofont.icofont-copy-alt
                      pre.custom-scrollbar
                        code.language-html#margin-copy
                          |&lt;div class="gradient-border"&gt;
                          |  &lt;div class="helper-common-box gap-0 mb-0"&gt;
                          |    &lt;div class="helper-box m-10 border bg-light"&gt;&lt;/div&gt;
                          |    &lt;span&gt;m-10&lt;/span&gt;
                          |  &lt;/div&gt;
                          |  &lt;div class="helper-common-box gap-0 mb-0"&gt;
                          |    &lt;div class="helper-box m-15 border bg-light"&gt;&lt;/div&gt;
                          |    &lt;span&gt;m-15&lt;/span&gt;
                          |  &lt;/div&gt;
                          |  &lt;div class="helper-common-box gap-0 mb-0"&gt;
                          |    &lt;div class="helper-box m-20 border bg-light"&gt;&lt;/div&gt;
                          |    &lt;span&gt;m-20&lt;/span&gt;
                          |  &lt;/div&gt;
                          |  &lt;div class="helper-common-box gap-0 mb-0"&gt;
                          |    &lt;div class="helper-box m-25 border bg-light"&gt;&lt;/div&gt;
                          |    &lt;span&gt;m-25&lt;/span&gt;
                          |  &lt;/div&gt;
                          |  &lt;div class="helper-common-box gap-0 mb-0"&gt;
                          |    &lt;div class="helper-box m-30 border bg-light"&gt;&lt;/div&gt;
                          |    &lt;span&gt;m-30&lt;/span&gt;
                          |  &lt;/div&gt;
                          |  &lt;div class="helper-common-box gap-0 mb-0"&gt;
                          |    &lt;div class="helper-box m-35 border bg-light"&gt;&lt;/div&gt;
                          |    &lt;span&gt;m-35&lt;/span&gt;
                          |  &lt;/div&gt;
                          |  &lt;div class="helper-common-box gap-0 mb-0"&gt;
                          |    &lt;div class="helper-box m-40 border bg-light"&gt;&lt;/div&gt;
                          |    &lt;span&gt;m-40&lt;/span&gt;
                          |  &lt;/div&gt;
                          |  &lt;div class="helper-common-box gap-0 mb-0"&gt;
                          |    &lt;div class="helper-box m-45 border bg-light"&gt;&lt;/div&gt;
                          |    &lt;span&gt;m-45&lt;/span&gt;
                          |  &lt;/div&gt;
                          |  &lt;div class="helper-common-box gap-0 mb-0"&gt;
                          |    &lt;div class="helper-box m-50 border bg-light"&gt;&lt;/div&gt;
                          |    &lt;span&gt;m-50&lt;/span&gt;
                          |  &lt;/div&gt;
                          |&lt;/div&gt;
              div(class="col-span-12")
                .card
                  .card-header
                    h5 Just One Side Margin
                    p.f-m-light.mt-1 
                      | Use all around margin classes like: 
                      code m-l-* / m-r-* / m-t-* / m-b-*
                      |.
                    .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-3 xxl:col-span-6 sm:col-span-12")
                        .border-wrapper.h-full.alert-light-light.dark-helper
                          h6.mb-3 Margin Left
                          .common-p-box
                            span ml-10
                            span ml-15
                            span ml-20
                            span ml-25
                            span ml-30
                            span ml-35
                            span ml-40
                            span ml-45
                            span ml-50  
                      div(class="col-span-3 xxl:col-span-6 sm:col-span-12")
                        .border-wrapper.h-full.alert-light-light.dark-helper
                          h6.mb-3 Margin Right
                          .common-p-box
                            span mr-10
                            span mr-15
                            span mr-20
                            span mr-25
                            span mr-30
                            span mr-35
                            span mr-40
                            span mr-45
                            span mr-50 
                      div(class="col-span-3 xxl:col-span-6 sm:col-span-12")
                        .border-wrapper.h-full.alert-light-light.dark-helper
                          h6.mb-3 Margin Top
                          .common-p-box
                            span mt-10
                            span mt-15
                            span mt-20
                            span mt-25
                            span mt-30
                            span mt-35
                            span mt-40
                            span mt-45
                            span mt-50 
                      div(class="col-span-3 xxl:col-span-6 sm:col-span-12")
                        .border-wrapper.h-full.alert-light-light.dark-helper
                          h6.mb-3 Margin Bottom
                          .common-p-box
                            span mb-10
                            span mb-15
                            span mb-20
                            span mb-25
                            span mb-30
                            span mb-35
                            span mb-40
                            span mb-45
                            span mb-50 
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#single-m-copy' title='Copy')
                        i.icofont.icofont-copy-alt 
                      pre.custom-scrollbar 
                        code.language-html#single-m-copy
                          |&lt;div class="grid grid-cols-12 card-gap"&gt;   
                          |  &lt;div class="col-span-6 xxl:col-span-6 sm:col-span-12"&gt;
                          |    &lt;div class="border-wrapper h-full alert-light-light dark-helper"&gt;
                          |      &lt;h6 class="mb-3"&gt;Margin Left&lt;/h6&gt;
                          |      &lt;div class="common-p-box"&gt;
                          |        &lt;span&gt;m-l-10&lt;/span&gt;
                          |        &lt;span&gt;m-l-15&lt;/span&gt;
                          |        &lt;span&gt;m-l-20&lt;/span&gt;
                          |        &lt;span&gt;m-l-25&lt;/span&gt;
                          |        &lt;span&gt;m-l-30&lt;/span&gt;
                          |        &lt;span&gt;m-l-35&lt;/span&gt;
                          |        &lt;span&gt;m-l-40&lt;/span&gt;
                          |        &lt;span&gt;m-l-45&lt;/span&gt;
                          |        &lt;span&gt;m-l-50&lt;/span&gt;
                          |      &lt;/div&gt;
                          |    &lt;/div&gt;
                          |  &lt;/div&gt;
                          |  &lt;div class="col-span-6 xxl:col-span-6 sm:col-span-12"&gt;
                          |    &lt;div class="border-wrapper h-full alert-light-light dark-helper"&gt;
                          |      &lt;h6 class="mb-3"&gt;Margin Right&lt;/h6&gt;
                          |      &lt;div class="common-p-box"&gt;
                          |        &lt;span&gt;m-r-10&lt;/span&gt;
                          |        &lt;span&gt;m-r-15&lt;/span&gt;
                          |        &lt;span&gt;m-r-20&lt;/span&gt;
                          |        &lt;span&gt;m-r-25&lt;/span&gt;
                          |        &lt;span&gt;m-r-30&lt;/span&gt;
                          |        &lt;span&gt;m-r-35&lt;/span&gt;
                          |        &lt;span&gt;m-r-40&lt;/span&gt;
                          |        &lt;span&gt;m-r-45&lt;/span&gt;
                          |        &lt;span&gt;m-r-50&lt;/span&gt;
                          |      &lt;/div&gt;
                          |    &lt;/div&gt;
                          |  &lt;/div&gt; 
                          |  &lt;div class="col-span-6 xxl:col-span-6 sm:col-span-12"&gt;
                          |    &lt;div class="border-wrapper h-full alert-light-light dark-helper"&gt;
                          |      &lt;h6 class="mb-3"&gt;Margin Top&lt;/h6&gt;
                          |      &lt;div class="common-p-box"&gt;
                          |        &lt;span&gt;m-t-10&lt;/span&gt;
                          |        &lt;span&gt;m-t-15&lt;/span&gt;
                          |        &lt;span&gt;m-t-20&lt;/span&gt;
                          |        &lt;span&gt;m-t-25&lt;/span&gt;
                          |        &lt;span&gt;m-t-30&lt;/span&gt;
                          |        &lt;span&gt;m-t-35&lt;/span&gt;
                          |        &lt;span&gt;m-t-40&lt;/span&gt;
                          |        &lt;span&gt;m-t-45&lt;/span&gt;
                          |        &lt;span&gt;m-t-50&lt;/span&gt;
                          |      &lt;/div&gt;
                          |    &lt;/div&gt;
                          |  &lt;/div&gt;
                          |  &lt;div class="col-span-6 xxl:col-span-6 sm:col-span-12"&gt;
                          |    &lt;div class="border-wrapper h-full alert-light-light dark-helper"&gt;
                          |      &lt;h6 class="mb-3"&gt;Margin Bottom&lt;/h6&gt;
                          |      &lt;div class="common-p-box"&gt;
                          |        &lt;span&gt;m-b-10&lt;/span&gt;
                          |        &lt;span&gt;m-b-15&lt;/span&gt;
                          |        &lt;span&gt;m-b-20&lt;/span&gt;
                          |        &lt;span&gt;m-b-25&lt;/span&gt;
                          |        &lt;span&gt;m-b-30&lt;/span&gt;
                          |        &lt;span&gt;m-b-35&lt;/span&gt;
                          |        &lt;span&gt;m-b-40&lt;/span&gt;
                          |        &lt;span&gt;m-b-45&lt;/span&gt;
                          |        &lt;span&gt;m-b-50&lt;/span&gt;
                          |      &lt;/div&gt;
                          |    &lt;/div&gt;
                          |  &lt;/div&gt;
                          |&lt;/div&gt;
              div(class="col-span-12")
                .card
                  .card-header
                    h5 Font Sizes
                    p.f-m-light.mt-1
                      | Use font-size for 
                      code f-* [14 / 16 / 18 / 20 / 22 / 24 / 26 / 28 / 30 / 32 / 34 / 36 / 38 / 40]
                      | .
                    .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 
                    .gradient-border 
                      .font-wrapper.custom-border
                        .f-14
                          | Font-size f-14
                      .font-wrapper.custom-border
                        .f-16
                          | Font-size f-16
                      .font-wrapper.custom-border
                        .f-18
                          | Font-size f-18
                      .font-wrapper.custom-border
                        .f-20
                          | Font-size f-20
                      .font-wrapper.custom-border
                        .f-22
                          | Font-size f-22
                      .font-wrapper.custom-border
                        .f-24
                          | Font-size f-24
                      .font-wrapper.custom-border
                        .f-26
                          | Font-size f-26
                      .font-wrapper.custom-border
                        .f-28
                          | Font-size f-28
                      .font-wrapper.custom-border
                        .f-30
                          | Font-size f-30
                      .font-wrapper.custom-border
                        .f-32
                          | Font-size f-32
                      .font-wrapper.custom-border
                        .f-34
                          | Font-size f-34
                      .font-wrapper.custom-border
                        .f-36
                          | Font-size f-36
                      .font-wrapper.custom-border
                        .f-38
                          | Font-size f-38
                      .font-wrapper.custom-border
                        .f-40
                          | Font-size f-40
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#fz-copy' title='Copy')
                        i.icofont.icofont-copy-alt
                      pre.custom-scrollbar
                        code.language-html#fz-copy
                          |&lt;div class="gradient-border"&gt; 
                          |  &lt;div class="font-wrapper border"&gt;
                          |    &lt;div class="f-14"&gt;Font-size f-14&lt;/div&gt;
                          |  &lt;/div&gt;
                          |  &lt;div class="font-wrapper border"&gt;
                          |    &lt;div class="f-16"&gt;Font-size f-16&lt;/div&gt;
                          |  &lt;/div&gt;
                          |  &lt;div class="font-wrapper border"&gt;
                          |    &lt;div class="f-18"&gt;Font-size f-18&lt;/div&gt;
                          |  &lt;/div&gt;
                          |  &lt;div class="font-wrapper border"&gt;
                          |    &lt;div class="f-20"&gt;Font-size f-20&lt;/div&gt;
                          |  &lt;/div&gt;
                          |  &lt;div class="font-wrapper border"&gt;
                          |    &lt;div class="f-22"&gt;Font-size f-22&lt;/div&gt;
                          |  &lt;/div&gt;
                          |  &lt;div class="font-wrapper border"&gt;
                          |    &lt;div class="f-24"&gt;Font-size f-24&lt;/div&gt;
                          |  &lt;/div&gt;
                          |  &lt;div class="font-wrapper border"&gt;
                          |    &lt;div class="f-26"&gt;Font-size f-26&lt;/div&gt;
                          |  &lt;/div&gt;
                          |  &lt;div class="font-wrapper border"&gt;
                          |    &lt;div class="f-28"&gt;Font-size f-28&lt;/div&gt;
                          |  &lt;/div&gt;
                          |  &lt;div class="font-wrapper border"&gt;
                          |    &lt;div class="f-30"&gt;Font-size f-30&lt;/div&gt;
                          |  &lt;/div&gt;
                          |  &lt;div class="font-wrapper border"&gt;
                          |    &lt;div class="f-32"&gt;Font-size f-32&lt;/div&gt;
                          |  &lt;/div&gt;
                          |  &lt;div class="font-wrapper border"&gt;
                          |    &lt;div class="f-34"&gt;Font-size f-34&lt;/div&gt;
                          |  &lt;/div&gt;
                          |  &lt;div class="font-wrapper border"&gt;
                          |    &lt;div class="f-36"&gt;Font-size f-36&lt;/div&gt;
                          |  &lt;/div&gt;
                          |  &lt;div class="font-wrapper border"&gt;
                          |    &lt;div class="f-38"&gt;Font-size f-38&lt;/div&gt;
                          |  &lt;/div&gt;
                          |  &lt;div class="font-wrapper border"&gt;
                          |    &lt;div class="f-40"&gt;Font-size f-40&lt;/div&gt;
                          |  &lt;/div&gt;
                          |&lt;/div&gt;
          // Container-fluid Ends 
        include ../../components/footer
    include ../../components/footer-files
