- var page_Title = 'Buttons';
- var theme_customizer      = true;
- var slick                 = true;
- var header_slider         = true;
- var sidebar               = true;
- var prism                 = true;
- var clipboard             = true;
- var customcard            = true;
- var tooltip               = true;
- var ripple_btn            = true;
- var popper                = true;
- var scrollbar             = 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
                    | Buttons
                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 Buttons
                    li.breadcrumb-item.active Buttons
          // Container-fluid starts
          .container
            .grid.grid-cols-12.card-gap
              div(class="col-span-6 xxl:col-span-12")
                .card
                  .card-header
                    h5 Flat Buttons
                    .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
                    p.f-m-light.mt-1 Use
                      code  btn-square
                      |  class for square button.
                  .card-body.common-flex
                    button.btn.btn-square.btn-primary.text-white Primary Button
                    button.btn.btn-square.btn-secondary.text-white Secondary Button
                    button.btn.btn-square.btn-success.text-white Success Button
                    button.btn.btn-square.btn-info Info Button
                    button.btn.btn-square.btn-warning Warning Button
                    button.btn.btn-square.btn-danger.text-white Danger Button
                    button.btn.btn-square.btn-light Light Button
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head1', title='Copy')
                        i.icofont.icofont-copy-alt
                      pre.custom-scrollbar
                        code.language-html#example-head1
                          |&lt;div class="card-body common-flex"&gt;
                          |  &lt;button class="btn btn-square btn-primary"&gt;Primary Button&lt;/button&gt;
                          |  &lt;button class="btn btn-square btn-secondary"&gt;Secondary Button&lt;/button&gt;
                          |  &lt;button class="btn btn-square btn-success"&gt;Success Button&lt;/button&gt;
                          |  &lt;button class="btn btn-square btn-info"&gt;Info Button&lt;/button&gt;
                          |  &lt;button class="btn btn-square btn-warning"&gt;Warning Button&lt;/button&gt;
                          |  &lt;button class="btn btn-square btn-danger"&gt;Danger Button&lt;/button&gt;
                          |  &lt;button class="btn btn-square btn-light"&gt;Light Button&lt;/button&gt;
                          |&lt;/div&gt;

              div(class="col-span-6 xxl:col-span-12")
                .card
                  .card-header
                    h5 Default Buttons
                    .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
                    p.f-m-light.mt-1 Use
                      code  btn 
                      | class to set default buttons and set background color like this : 
                      code bg-* [primary/secondary..]. 
                  .card-body.common-flex
                    button.btn.btn-primary.text-white.rounded(type='button' data-bs-toggle='tooltip' title='btn btn-primary') Primary Button
                    button.btn.btn-secondary.text-white.rounded(type='button' data-bs-toggle='tooltip' title='btn btn-secondary') Secondary Button
                    button.btn.btn-success.text-white.rounded(type='button' data-bs-toggle='tooltip' title='btn btn-success') Success Button
                    button.btn.btn-info.rounded(type='button' data-bs-toggle='tooltip' title='btn btn-info') Info Button
                    button.btn.btn-warning.rounded(type='button' data-bs-toggle='tooltip' title='btn btn-warning') Warning Button
                    button.btn.btn-danger.rounded.text-white(type='button' data-bs-toggle='tooltip' title='btn btn-danger') Danger Button
                    button.btn.btn-light.rounded(type='button' data-bs-toggle='tooltip' title='btn btn-light') Light Button
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head2', title='Copy')
                        i.icofont.icofont-copy-alt
                      pre.custom-scrollbar
                        code.language-html#example-head2
                          |&lt;div class="card-body common-flex"&gt;
                          |  &lt;button class="btn btn-primary" type="button" data-bs-toggle="tooltip" title="btn btn-primary"&gt;Primary Button&lt;/button&gt;
                          |  &lt;button class="btn btn-secondary" type="button" data-bs-toggle="tooltip" title="btn btn-secondary"&gt;Secondary Button&lt;/button&gt;
                          |  &lt;button class="btn btn-success" type="button" data-bs-toggle="tooltip" title="btn btn-success"&gt;Success Button&lt;/button&gt;
                          |  &lt;button class="btn btn-info" type="button" data-bs-toggle="tooltip" title="btn btn-info"&gt;Info Button&lt;/button&gt;
                          |  &lt;button class="btn btn-warning" type="button" data-bs-toggle="tooltip" title="btn btn-warning"&gt;Warning Button&lt;/button&gt;
                          |  &lt;button class="btn btn-danger" type="button" data-bs-toggle="tooltip" title="btn btn-danger"&gt;Danger Button&lt;/button&gt;
                          |  &lt;button class="btn btn-light" type="button" data-bs-toggle="tooltip" title="btn btn-light"&gt;Light Button&lt;/button&gt;
                          |&lt;/div&gt;
              div(class="col-span-6 xxl:col-span-12")
                .card
                  .card-header
                      h5 Button Sizes
                      .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
                      p.f-m-light.mt-1
                        | Use
                        code  btn-lg, btn-sm, btn-xs 
                        | for sizes of buttons
                  .card-body.common-flex.items-center.buttons-box
                    button.btn.button-light-primary.btn-lg.rounded-lg Large button
                    button.btn.button-light-secondary.rounded-es-lg Default button
                    button.btn.button-light-warning.btn-sm.rounded-lg Small button
                    button.btn.button-light-success.btn-xs.rounded-es-md Extra small button
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head3', title='Copy')
                        i.icofont.icofont-copy-alt
                      pre.custom-scrollbar
                        code.language-html#example-head3
                          |&lt;div class="card-body common-flex align-items-center buttons-box"&gt;
                          |  &lt;button class="btn button-light-primary btn-lg rounded-es-lg"&gt;Large button&lt;/button&gt;
                          |  &lt;button class="btn button-light-secondary rounded-es-lg"&gt;Default button&lt;/button&gt;
                          |  &lt;button class="btn button-light-warning btn-sm rounded-es-lg"&gt;Small button&lt;/button&gt;
                          |  &lt;button class="btn button-light-success btn-xs rounded-es-md"&gt;Extra small button&lt;/button&gt;
                          |&lt;/div&gt;
              div(class="col-span-6 xxl:col-span-12")
                .card
                  .card-header
                      h5 Outline Button Sizes
                      .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
                      p.f-m-light.mt-1
                        | Use 
                        code button-lg, button-sm, and button-xs 
                        | for size, and use the 
                        code "outline-*" 
                        | class for outline colors.
                  .card-body.common-flex.items-center
                    button.btn.btn-outline-primary.border.btn-lg.rounded-lg Large button
                    button.btn.btn-outline-secondary.border.rounded-es-lg Default button
                    button.btn.btn-outline-warning.border.btn-sm.rounded-md Small button
                    button.btn.btn-outline-success.border.btn-xs.rounded-es-md Extra small button
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head4', title='Copy')
                        i.icofont.icofont-copy-alt
                      pre.custom-scrollbar
                        code.language-html#example-head4
                          |&lt;div class="card-body common-flex align-items-center"&gt;
                          |  &lt;button class="btn btn-outline-primary btn-lg rounded-es-lg"&gt;Large button&lt;/button&gt;
                          |  &lt;button class="btn btn-outline-secondary rounded-es-lg"&gt;Default button&lt;/button&gt;
                          |  &lt;button class="btn btn-outline-warning btn-sm rounded-es-lg"&gt;Small button&lt;/button&gt;
                          |  &lt;button class="btn btn-outline-success btn-xs rounded-es-md"&gt;Extra small button&lt;/button&gt;
                          |&lt;/div&gt;
              div(class="col-span-6 xxl:col-span-12") 
                .card
                  .card-header 
                    h5 Rounded Buttons
                    .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
                    p.f-m-light.mt-1
                      | Use
                      code  btn-pill
                      |  class for rounded buttons.
                  .card-body.common-flex.buttons-box
                    button.btn.btn-pill.button-light-primary Contacts
                    button.btn.btn-pill.button-light-dark Users
                    button.btn.btn-pill.button-light-success Chats
                    button.btn.btn-pill.button-light-info Animation
                    button.btn.btn-pill.button-light-warning Widgets
                    button.btn.btn-pill.button-light-danger Project
                    button.btn.btn-pill.button-light-light Icons
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head5', title='Copy')
                        i.icofont.icofont-copy-alt
                      pre.custom-scrollbar
                        code.language-html#example-head5
                          |&lt;div class="card-body common-flex buttons-box"&gt;
                          |  &lt;button class="btn btn-pill button-light-primary"&gt;Contacts&lt;/button&gt;
                          |  &lt;button class="btn btn-pill button-light-dark"&gt;Users&lt;/button&gt;
                          |  &lt;button class="btn btn-pill button-light-success"&gt;Chats&lt;/button&gt;
                          |  &lt;button class="btn btn-pill button-light-info"&gt;Animation&lt;/button&gt;
                          |  &lt;button class="btn btn-pill button-light-warning"&gt;Widgets&lt;/button&gt;
                          |  &lt;button class="btn btn-pill button-light-danger"&gt;Project&lt;/button&gt;
                          |  &lt;button class="btn btn-pill button-light-light"&gt;Icons&lt;/button&gt;
                          |&lt;/div&gt;
              div(class="col-span-6 xxl:col-span-12") 
                .card
                  .card-header
                    h5 Outline Rounded Buttons
                    .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
                    p.f-m-light.mt-1
                      | Use
                      code  btn-pill
                      |  and 
                      code  btn-outline-*
                      |  class for outline with buttons.
                  .card-body.common-flex
                    button.btn.border.btn-pill.btn-outline-primary Contacts
                    button.btn.border.btn-pill.btn-outline-secondary Users
                    button.btn.border.btn-pill.btn-outline-success Chats
                    button.btn.border.btn-pill.btn-outline-info Animation
                    button.btn.border.btn-pill.btn-outline-warning Widgets
                    button.btn.border.btn-pill.btn-outline-danger Project
                    button.btn.border.btn-pill.btn-outline-light Icons
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head6', title='Copy')
                        i.icofont.icofont-copy-alt
                      pre.custom-scrollbar
                        code.language-html#example-head6
                          |&lt;div class="card-body common-flex"&gt;
                          |  &lt;button class="btn btn-pill btn-outline-primary"&gt;Contacts&lt;/button&gt;
                          |  &lt;button class="btn btn-pill btn-outline-secondary"&gt;Users&lt;/button&gt;
                          |  &lt;button class="btn btn-pill btn-outline-success"&gt;Chats&lt;/button&gt;
                          |  &lt;button class="btn btn-pill btn-outline-info"&gt;Animation&lt;/button&gt;
                          |  &lt;button class="btn btn-pill btn-outline-warning"&gt;Widgets&lt;/button&gt;
                          |  &lt;button class="btn btn-pill btn-outline-danger"&gt;Project&lt;/button&gt;
                          |  &lt;button class="btn btn-pill btn-outline-light"&gt;Icons&lt;/button&gt;
                          |&lt;/div&gt;
              div(class="col-span-6 xxl:col-span-12")
                .card
                  .card-header
                      h5 Rounded Sizes
                      .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
                      p.f-m-light.mt-1
                        | Use
                        code  btn-lg, btn-sm, btn-xs 
                        | for sizes of buttons
                  .card-body.common-flex.items-center
                    button.btn.btn-pill.btn-primary.btn-lg.text-white Large button
                    button.btn.btn-pill.btn-secondary.text-white Default button
                    button.btn.btn-pill.btn-warning.btn-sm.text-white Small button
                    button.btn.btn-pill.btn-success.btn-xs.text-white Extra small button
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head7', title='Copy')
                        i.icofont.icofont-copy-alt
                      pre.custom-scrollbar
                        code.language-html#example-head7
                          |&lt;div class="card-body common-flex align-items-center"&gt;
                          |  &lt;button class="btn btn-pill btn-primary btn-lg"&gt;Large button&lt;/button&gt;
                          |  &lt;button class="btn btn-pill btn-secondary"&gt;Default button&lt;/button&gt;
                          |  &lt;button class="btn btn-pill btn-warning btn-sm"&gt;Small button&lt;/button&gt;
                          |  &lt;button class="btn btn-pill btn-success btn-xs"&gt;Extra small button&lt;/button&gt;
                          |&lt;/div&gt;
              div(class="col-span-6 xxl:col-span-12")
                .card
                  .card-header
                      h5 Outline Rounded Sizes
                      .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
                      p.f-m-light.mt-1
                        | Use
                        code  btn-lg, btn-sm, btn-xs 
                        | for sizes of buttons
                  .card-body.common-flex.items-center
                    button.btn.border.btn-pill.btn-outline-primary.btn-lg Large button
                    button.btn.border.btn-pill.btn-outline-secondary Default button
                    button.btn.border.btn-pill.btn-outline-warning.btn-sm Small button
                    button.btn.border.btn-pill.btn-outline-success.btn-xs Extra small button
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head8', title='Copy')
                        i.icofont.icofont-copy-alt
                      pre.custom-scrollbar
                        code.language-html#example-head8
                          |&lt;div class="card-body common-flex align-items-center"&gt;
                          |  &lt;button class="btn btn-pill btn-outline-primary btn-lg"&gt;Large button&lt;/button&gt;
                          |  &lt;button class="btn btn-pill btn-outline-secondary"&gt;Default button&lt;/button&gt;
                          |  &lt;button class="btn btn-pill btn-outline-warning btn-sm"&gt;Small button&lt;/button&gt;
                          |  &lt;button class="btn btn-pill btn-outline-success btn-xs"&gt;Extra small button&lt;/button&gt;
                          |&lt;/div&gt;
              
              div(class="col-span-6 xxl:col-span-12")
                .card
                  .card-header
                    h5 Disabled Buttons
                    .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
                    p.f-m-light.mt-1
                      | Use
                      code  disabled
                      |  class or 
                      code disabled="disabled"
                      |  attribute for disabled button
                  .card-body.common-flex
                    button.btn.btn-primary.disabled.text-white(type='button') I'm disabled
                    button.btn.btn-pill.btn-warning.disabled(type='button') Having problems
                    button.btn.border.btn-outline-primary.disabled(type='button') Inaccessible
                    button.btn.border.btn-pill.btn-outline-warning.disabled(type='button') Disabled
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head9', title='Copy')
                        i.icofont.icofont-copy-alt
                      pre.custom-scrollbar
                        code.language-html#example-head9
                          |&lt;div class="card-body common-flex"&gt;
                          |  &lt;button class="btn btn-primary disabled" type="button"&gt;I'm disabled&lt;/button&gt;
                          |  &lt;button class="btn btn-pill btn-warning disabled" type="button"&gt;Having problems&lt;/button&gt;
                          |  &lt;button class="btn btn-outline-primary disabled" type="button"&gt;Inaccessible&lt;/button&gt;
                          |  &lt;button class="btn btn-pill btn-outline-warning disabled" type="button"&gt;Disabled&lt;/button&gt;
                          |&lt;/div&gt;
              div(class="col-span-6 xxl:col-span-12")
                .card
                  .card-header
                    h5 Icons Buttons
                    .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
                    p.f-m-light.mt-1
                      | Use 
                      code btn-square 
                      | and 
                      code btn-pill 
                      | class for icons buttons.
                  .card-body.common-flex.visual-button
                    button.btn.b-ln-height.btn-primary.btn-square.text-white
                      i(data-feather='help-circle')
                    button.btn.b-ln-height.btn-secondary.btn-square.text-white
                      i(data-feather='clock')
                    button.btn.b-ln-height.btn-warning
                      i(data-feather='loader')
                    button.btn.b-ln-height.button-light-primary
                      i(data-feather='radio')
                    button.btn-pill.button-light-secondary
                      i(data-feather='loader')
                    button.btn-pill.button-light-warning
                      i(data-feather='radio')
                    button.btn.border.b-ln-height.btn-outline-primary
                      i(data-feather='radio')
                    button.btn-pill.btn-outline-secondary.border-secondary(class="!border")
                      i(data-feather='loader')
                    button.btn-pill.btn-outline-warning.border-warning(class="!border")
                      i(data-feather='radio')
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#icon-btn-copy', title='Copy')
                        i.icofont.icofont-copy-alt
                      pre.custom-scrollbar
                        code.language-html#icon-btn-copy
                          |&lt;div class="card-body common-flex visual-button"&gt;
                          |  &lt;button class="btn b-ln-height btn-primary btn-square"&gt;&lt;i data-feather="help-circle"&gt;&lt;/i&gt;&lt;/button&gt;
                          |  &lt;button class="btn b-ln-height btn-secondary btn-square"&gt;&lt;i data-feather="clock"&gt;&lt;/i&gt;&lt;/button&gt;
                          |  &lt;button class="btn b-ln-height btn-warning"&gt;&lt;i data-feather="loader"&gt;&lt;/i&gt;&lt;/button&gt;
                          |  &lt;button class="btn b-ln-height button-light-primary"&gt;&lt;i data-feather="radio"&gt;&lt;/i&gt;&lt;/button&gt;
                          |  &lt;button class="btn-pill button-light-secondary"&gt;&lt;i data-feather="loader"&gt;&lt;/i&gt;&lt;/button&gt;
                          |  &lt;button class="btn-pill button-light-warning"&gt;&lt;i data-feather="radio"&gt;&lt;/i&gt;&lt;/button&gt;
                          |  &lt;button class="btn b-ln-height btn-outline-primary"&gt;&lt;i data-feather="radio"&gt;&lt;/i&gt;&lt;/button&gt;
                          |  &lt;button class="btn-pill btn-outline-secondary border border-secondary"&gt;&lt;i data-feather="loader"&gt;&lt;/i&gt;&lt;/button&gt;
                          |  &lt;button class="btn-pill btn-outline-warning border border-warning"&gt;&lt;i data-feather="radio"&gt;&lt;/i&gt;&lt;/button&gt;
                          |&lt;/div&gt;
              div(class="col-span-6 xxl:col-span-12")
                .card
                  .card-header
                    h5 Icons with Title Buttons
                    .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
                    p.f-m-light.mt-1
                      | Use
                      code  btn-square , btn-pill , button-light-* , btn-* , .btn-outline-* , border-*
                      |  for icons with title buttons.
                  .card-body.common-flex.visual-button.visual-button1
                    button.btn.b-ln-height.btn-secondary.btn-square
                      i(data-feather='clock')
                      span Secondary
                    button.btn.b-ln-height.btn-warning
                      i(data-feather='alert-triangle')
                      span Warning
                    button.btn-pill.button-light-success
                      i(data-feather='check-square')
                      span Success
                    button.btn.border.b-ln-height.btn-outline-info
                      i(data-feather='volume-1')
                      span Info
                    button.btn-pill.btn-outline-primary.border.border-primary
                      i(data-feather='loader')
                      span Primary
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#icon-title-btn-copy', title='Copy')
                        i.icofont.icofont-copy-alt
                      pre.custom-scrollbar
                        code.language-html#icon-title-btn-copy
                          |&lt;div class="card-body common-flex visual-button visual-button1"&gt;
                          |  &lt;button class="btn b-ln-height btn-secondary btn-square"&gt;&lt;i data-feather="clock"&gt;&lt;/i&gt;&lt;span&gt;Secondary&lt;/span&gt;&lt;/button&gt;
                          |  &lt;button class="btn b-ln-height btn-warning"&gt;&lt;i data-feather="alert-triangle"&gt;&lt;/i&gt;&lt;span&gt;Warning&lt;/span&gt;&lt;/button&gt;
                          |  &lt;button class="btn-pill button-light-success"&gt;&lt;i data-feather="check-square"&gt;&lt;/i&gt;&lt;span&gt;Success&lt;/span&gt;&lt;/button&gt;
                          |  &lt;button class="btn b-ln-height btn-outline-info"&gt;&lt;i data-feather="volume-1"&gt;&lt;/i&gt;&lt;span&gt;Info&lt;/span&gt;&lt;/button&gt;
                          |  &lt;button class="btn-pill btn-outline-primary border border-primary"&gt;&lt;i data-feather="loader"&gt;&lt;/i&gt;&lt;span&gt;Primary&lt;/span&gt;&lt;/button&gt;
                          |&lt;/div&gt;
              
              div(class="col-span-6 xxl:col-span-12")
                .card
                  .card-header
                    h5 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
                    p.f-m-light.mt-1
                      | Use 
                      code border-dashed-*
                      |  &
                      code  txt-*
                      |  for dashed border.
                  .card-body.common-flex
                    button.btn.border-dashed-primary Primary
                    button.btn.border-dashed-secondary Secondary
                    button.btn.border-dashed-success Success
                    button.btn.border-dashed-info Info
                    button.btn.border-dashed-warning Warning
                    button.btn.border-dashed-danger Danger
                    button.btn.border-dashed-dark Dark
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#dash-border-btn-copy', title='Copy')
                        i.icofont.icofont-copy-alt
                      pre.custom-scrollbar
                        code.language-html#dash-border-btn-copy
                          |&lt;div class="card-body common-flex"&gt;
                          |  &lt;button class="btn border-dashed-primary"&gt;Primary&lt;/button&gt;
                          |  &lt;button class="btn border-dashed-secondary"&gt;Secondary&lt;/button&gt;
                          |  &lt;button class="btn border-dashed-success"&gt;Success&lt;/button&gt;
                          |  &lt;button class="btn border-dashed-info"&gt;Info&lt;/button&gt;
                          |  &lt;button class="btn border-dashed-warning"&gt;Warning&lt;/button&gt;
                          |  &lt;button class="btn border-dashed-danger"&gt;Danger&lt;/button&gt;
                          |  &lt;button class="btn border-dashed-dark"&gt;Dark&lt;/button&gt;
                          |&lt;/div&gt;
              
              div(class="col-span-6 xxl:col-span-12")
                .card
                  .card-header
                    h5 Loader Buttons
                    .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
                    p.f-m-light.mt-1
                      | Use 
                      code border-dashed-*
                      |  &
                      code  loader-buttons
                      |  for loader buttons.
                  .card-body.common-flex.loader-buttons
                    button.btn.border-dashed-primary
                      | Initiating Connection...
                      i.fa-solid.fa-circle-notch.fa-spin
                    button.btn.border-dashed-secondary
                      | Spooling Data...
                      i.fa-solid.fa-arrows-rotate.fa-spin
                    button.btn.border-dashed-success
                      | Compiling Request...
                      i.fa-solid.fa-spinner.fa-spin-pulse
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#loader-btn-copy', title='Copy')
                        i.icofont.icofont-copy-alt
                      pre.custom-scrollbar
                        code.language-html#loader-btn-copy
                          |&lt;div class="card-body common-flex loader-buttons"&gt;
                          |  &lt;button class="btn border-dashed-primary"&gt;Initiating Connection...&lt;i class="fa fa-spin fa-circle-o-notch"&gt;&lt;/i&gt;&lt;/button&gt;
                          |  &lt;button class="btn border-dashed-secondary"&gt;Spooling Data...&lt;i class="fa fa-solid fa-arrows-rotate fa-spin"&gt;&lt;/i&gt;&lt;/button&gt;
                          |  &lt;button class="btn border-dashed-success"&gt;Compiling Request...&lt;i class="fa-solid fa-spinner fa-spin-pulse"&gt;&lt;/i&gt;&lt;/button&gt;
                          |&lt;/div&gt;
              div(class="col-span-6 xxl:col-span-12")
                .card
                  .card-header
                    h5 Ripple Button
                    .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
                    p.f-m-light.mt-1
                      | Use
                      code  ripple-button
                      |  for ripple animation button.
                  .card-body.common-flex 
                    button.btn.btn-primary.ripple-button.text-white
                      | Ripple Button
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#ripple-btn-copy', title='Copy')
                        i.icofont.icofont-copy-alt
                      pre.custom-scrollbar
                        code.language-html#ripple-btn-copy
                          |&lt;div class="card-body common-flex ripple-button"&gt;
                          |  &lt;button class="btn btn-primary ripple-button"&gt;Ripple Button&lt;/button&gt;
                          |&lt;/div&gt;
              div(class="col-span-12")
                .card
                  .card-header
                    h5 Button Groups
                    .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
                    p.f-m-light.mt-1
                      | Wrap a series of buttons with 
                      code btn 
                      | in 
                      code btn-group 
                      |  and for custom class used for sizes: 
                      code btn-lg 
                      | & 
                      code btn-sm
                      |.
                  .card-body.btn-groups
                    .grid.grid-cols-12.gap-3
                      div(class="col-span-4 xl:col-span-6 md:col-span-12 box-col-6")
                        .card-wrapper.custom-border.rounded-3.h-full
                          h6.sub-title.fw-bold Button Group Variation
                          .button-wrapper.button-variation
                            .btn-group.btn-group-square(role='group', aria-label='Basic example')
                              button.btn.btn-primary.text-white(type='button') Left
                              button.btn.button-light-primary(type='button') Middle
                              button.btn.btn-primary.text-white(type='button') Right
                            .btn-group.btn-group-pill(role='group', aria-label='Basic example')
                              button.btn.button-light-primary(type='button') Left
                              button.btn.btn-primary.text-white(type='button' class="!rounded-none") Middle
                              button.btn.button-light-primary(type='button') Right
                            .btn-group(role='group' aria-label='Basic example')
                              button.btn.btn-primary.text-white(type='button' class="!rounded-l-lg !rounded-r-none") Left
                              button.btn.button-light-primary(type='button' class="!rounded-none !border-x-0") Middle
                              button.btn.btn-primary.text-white(type='button' class="!rounded-r-lg !rounded-l-none") Right
                      div(class="col-span-4 xl:col-span-6 md:col-span-12 box-col-6")
                        .card-wrapper.custom-border.rounded-3.h-full
                          h6.sub-title.fw-bold Outline Button Group
                          .button-wrapper.button-outlined
                            .btn-group.btn-group-square(role='group' aria-label='Basic outlined example')
                              button.btn.border.btn-outline-primary(type='button')
                                i(data-feather='arrow-left')
                              button.btn.border.btn-outline-primary(type='button' class="!rounded-none !border-x-0")
                                i(data-feather='arrow-up')
                              button.btn.border.btn-outline-primary(type='button')
                                i(data-feather='arrow-right')
                            .btn-group.btn-group-pill(role='group' aria-label='Basic outlined example')
                              button.btn.border.btn-outline-primary(type='button') 
                                i(data-feather='arrow-left-circle')
                              button.btn.border.btn-outline-primary(type='button' class="!rounded-none !border-x-0")
                                i(data-feather='arrow-up-circle')
                              button.btn.border.btn-outline-primary(type='button')
                                i(data-feather='arrow-right-circle')
                            .btn-group(role='group' aria-label='Basic outlined example')
                              button.btn.border.btn-outline-primary(type='button'  class="!rounded-l-lg !rounded-r-none") 
                                i(data-feather='align-left')
                              button.btn.border.btn-outline-primary(type='button' class="!rounded-none !border-x-0")
                                i(data-feather='align-center')
                              button.btn.border.btn-outline-primary(type='button' class="!rounded-r-lg !rounded-l-none")
                                i(data-feather='align-right')
                      div(class="col-span-4 xxl:col-span-12 box-col-12")
                        .card-wrapper.custom-border.rounded-3.h-full
                          h6.sub-title.fw-bold Button Group Sizes
                          .button-wrapper
                            .btn-group(role='group' aria-label='Large button group')
                              button.btn.border.btn-outline-primary.btn-lg(type='button' class="!rounded-l-lg !rounded-r-none") Left
                              button.btn.border.btn-outline-primary.btn-lg(type='button' class="!rounded-none !border-x-0") Middle
                              button.btn.border.btn-outline-primary.btn-lg(type='button' class="!rounded-r-lg !rounded-l-none") Right
                            .btn-group(role='group' aria-label='Default button group')
                              button.btn.border.btn-outline-primary(type='button' class="!rounded-l-lg !rounded-r-none") Left
                              button.btn.border.btn-outline-primary(type='button' class="!rounded-none !border-x-0") Middle
                              button.btn.border.btn-outline-primary(type='button' class="!rounded-r-lg !rounded-l-none") Right 
                            .btn-group(role='group' aria-label='Small buttongroup')
                              button.btn.border.btn-outline-primary.btn-sm(type='button' class="!rounded-l-lg !rounded-r-none") Left
                              button.btn.border.btn-outline-primary.btn-sm(type='button' class="!rounded-none !border-x-0") Middle
                              button.btn.border.btn-outline-primary.btn-sm(type='button' class="!rounded-r-lg !rounded-l-none") Right
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head11', title='Copy')
                        i.icofont.icofont-copy-alt
                      pre.custom-scrollbar
                        code.language-html#example-head11
                          |&lt;div class="card-body btn-groups"&gt;
                          |  &lt;div class="grid.grid-cols-12 g-3"&gt;
                          |    &lt;div class="col-span-4 xxl:col-span-6 md:col-span-12 box-col-6"&gt;
                          |      &lt;div class="card-wrapper custom-border rounded-3 h-full"&gt;
                          |        &lt;h6 class="sub-title fw-bold"&gt;Button Group Variation&lt;/h6&gt;
                          |        &lt;div class="button-wrapper button-variation"&gt;
                          |          &lt;div class="btn-group btn-group-square" role="group" aria-label="Basic example"&gt;
                          |            &lt;button class="btn btn-primary" type="button"&gt;Left&lt;/button&gt;
                          |            &lt;button class="btn button-light-primary" type="button"&gt;Middle&lt;/button&gt;
                          |            &lt;button class="btn btn-primary" type="button"&gt;Right&lt;/button&gt;
                          |          &lt;/div&gt;
                          |          &lt;div class="btn-group btn-group-pill" role="group" aria-label="Basic example"&gt;
                          |            &lt;button class="btn button-light-primary" type="button"&gt;Left&lt;/button&gt;
                          |            &lt;button class="btn btn-primary" type="button"&gt;Middle&lt;/button&gt;
                          |            &lt;button class="btn button-light-primary" type="button"&gt;Right&lt;/button&gt;
                          |          &lt;/div&gt;
                          |          &lt;div class="btn-group" role="group" aria-label="Basic example"&gt;
                          |            &lt;button class="btn btn-primary" type="button"&gt;Left&lt;/button&gt;
                          |            &lt;button class="btn button-light-primary" type="button"&gt;Middle&lt;/button&gt;
                          |            &lt;button class="btn btn-primary" type="button"&gt;Right&lt;/button&gt;
                          |          &lt;/div&gt;
                          |        &lt;/div&gt;
                          |      &lt;/div&gt;
                          |    &lt;/div&gt;
                          |    &lt;div class="col-span-4 xxl:col-span-6 md:col-span-12 box-col-6"&gt;
                          |      &lt;div class="card-wrapper custom-border rounded-3 h-full"&gt;
                          |        &lt;h6 class="sub-title fw-bold"&gt;Outline Button Group&lt;/h6&gt;
                          |        &lt;div class="button-wrapper button-outlined"&gt;
                          |          &lt;div class="btn-group btn-group-square" role="group" aria-label="Basic outlined example"&gt;
                          |            &lt;button class="btn btn-outline-primary" type="button"&gt;&lt;i data-feather="arrow-left"&gt;&lt;/i&gt;&lt;/button&gt;
                          |            &lt;button class="btn btn-outline-primary" type="button"&gt;&lt;i data-feather="arrow-up"&gt;&lt;/i&gt;&lt;/button&gt;
                          |            &lt;button class="btn btn-outline-primary" type="button"&gt;&lt;i data-feather="arrow-right"&gt;&lt;/i&gt;&lt;/button&gt;
                          |          &lt;/div&gt;
                          |          &lt;div class="btn-group btn-group-pill" role="group" aria-label="Basic outlined example"&gt;
                          |            &lt;button class="btn btn-outline-primary" type="button"&gt;&lt;i data-feather="arrow-left-circle"&gt;&lt;/i&gt;&lt;/button&gt;
                          |            &lt;button class="btn btn-outline-primary" type="button"&gt;&lt;i data-feather="arrow-up-circle"&gt;&lt;/i&gt;&lt;/button&gt;
                          |            &lt;button class="btn btn-outline-primary" type="button"&gt;&lt;i data-feather="arrow-right-circle"&gt;&lt;/i&gt;&lt;/button&gt;
                          |          &lt;/div&gt;
                          |          &lt;div class="btn-group" role="group" aria-label="Basic outlined example"&gt;
                          |            &lt;button class="btn btn-outline-primary" type="button"&gt;&lt;i data-feather="align-left"&gt;&lt;/i&gt;&lt;/button&gt;
                          |            &lt;button class="btn btn-outline-primary" type="button"&gt;&lt;i data-feather="align-center"&gt;&lt;/i&gt;&lt;/button&gt;
                          |            &lt;button class="btn btn-outline-primary" type="button"&gt;&lt;i data-feather="align-right"&gt;&lt;/i&gt;&lt;/button&gt;
                          |          &lt;/div&gt;
                          |        &lt;/div&gt;
                          |      &lt;/div&gt;
                          |    &lt;/div&gt;
                          |    &lt;div class="col-xxl-4 col-12 box-col-12"&gt;
                          |      &lt;div class="card-wrapper custom-border rounded-3 h-full"&gt;
                          |        &lt;h6 class="sub-title fw-bold"&gt;Button Group Sizes&lt;/h6&gt;
                          |        &lt;div class="button-wrapper"&gt;
                          |          &lt;div class="btn-group" role="group" aria-label="Large button group"&gt;
                          |            &lt;button class="btn btn-outline-primary btn-lg" type="button"&gt;Left&lt;/button&gt;
                          |            &lt;button class="btn btn-outline-primary btn-lg" type="button"&gt;Middle&lt;/button&gt;
                          |            &lt;button class="btn btn-outline-primary btn-lg" type="button"&gt;Right&lt;/button&gt;
                          |          &lt;/div&gt;
                          |          &lt;div class="btn-group" role="group" aria-label="Default button group"&gt;
                          |            &lt;button class="btn btn-outline-primary" type="button"&gt;Left&lt;/button&gt;
                          |            &lt;button class="btn btn-outline-primary" type="button"&gt;Middle&lt;/button&gt;
                          |            &lt;button class="btn btn-outline-primary" type="button"&gt;Right&lt;/button&gt;
                          |          &lt;/div&gt;
                          |          &lt;div class="btn-group" role="group" aria-label="Small buttongroup"&gt;
                          |            &lt;button class="btn btn-outline-primary btn-sm" type="button"&gt;Left&lt;/button&gt;
                          |            &lt;button class="btn btn-outline-primary btn-sm" type="button"&gt;Middle&lt;/button&gt;
                          |            &lt;button class="btn btn-outline-primary btn-sm" type="button"&gt;Right&lt;/button&gt;
                          |          &lt;/div&gt;
                          |        &lt;/div&gt;
                          |      &lt;/div&gt;
                          |    &lt;/div&gt;
                          |  &lt;/div&gt;
                          |&lt;/div&gt;
              div(class="col-span-12")
                .card
                  .card-header
                    h5 Block Level Buttons
                    .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
                    p.f-m-light.mt-1
                      | Use
                      code  btn 
                      | class for buttons and 
                      code d-grid 
                      | used for block level buttons.
                  .card-body
                    .grid.grid-cols-12.gap-4
                      div(class="col-span-12") 
                        .card-wrapper.custom-border.rounded-3
                          h6.sub-title.fw-bold Block Button
                          .grid.gap-2.buttons-box
                            button.btn.button-light-primary(type='button') Click here, there is a big surprise with you, Hurry Up!!
                            button.btn.btn-primary.text-white(type='button') 40% off all B-Stock Sale!! Hurry Up!!
                      div(class="col-span-12") 
                        .card-wrapper.custom-border.rounded-3
                          h6.sub-title.fw-bold Button Center
                          .grid.grid-cols-12.gap-2.buttons-box
                            div(class="col-span-6 col-start-3")
                              button.btn.w-full.button-light-primary.mb-3(type='button') Center Button
                              button.btn.w-full.btn-primary.text-white(type='button') Center Button
                      div(class="col-span-12") 
                        .card-wrapper.custom-border.rounded-3
                          h6.sub-title.fw-bold Button End
                          .gap-2.buttons-box.justify-content-md-end.buttons-box(class="md:block flex justify-end [@media(min-width:768px)]:justify-end")
                            button.btn.button-light-primary.mr-2(type='button') Cancel
                            button.btn.btn-primary.text-white(type='button') Submit
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head12', title='Copy')
                        i.icofont.icofont-copy-alt
                      pre.custom-scrollbar
                        code.language-html#example-head12
                          |&lt;div class="card-body"&gt;
                          |  &lt;div class="grid.grid-cols-12 gap-3"&gt;
                          |    &lt;div class="col-span-12"&gt;
                          |      &lt;div class="card-wrapper custom-border rounded-3"&gt;
                          |        &lt;h6 class="sub-title fw-bold"&gt;Block Button&lt;/h6&gt;
                          |        &lt;div class="d-grid gap-2 buttons-box"&gt;
                          |          &lt;button class="btn button-light-primary" type="button"&gt;Click here, there is a big surprise with you, Hurry Up!!&lt;/button&gt;
                          |          &lt;button class="btn btn-primary" type="button"&gt;40% off all B-Stock Sale!! Hurry Up!!&lt;/button&gt;
                          |        &lt;/div&gt;
                          |      &lt;/div&gt;
                          |    &lt;/div&gt;
                          |    &lt;div class="col-span-12"&gt;
                          |      &lt;div class="card-wrapper custom-border rounded-3"&gt;
                          |        &lt;h6 class="sub-title fw-bold"&gt;Button Center&lt;/h6&gt;
                          |        &lt;div class="d-grid gap-2 col-6 mx-auto buttons-box"&gt;
                          |          &lt;button class="btn button-light-primary" type="button"&gt;Center Button&lt;/button&gt;
                          |          &lt;button class="btn btn-primary" type="button"&gt;Center Button&lt;/button&gt;
                          |        &lt;/div&gt;
                          |      &lt;/div&gt;
                          |    &lt;/div&gt;
                          |    &lt;div class="col-span-12"&gt;
                          |      &lt;div class="card-wrapper custom-border rounded-3"&gt;
                          |        &lt;h6 class="sub-title fw-bold"&gt;Button End&lt;/h6&gt;
                          |        &lt;div class="d-grid gap-2 flex buttons-box"&gt;
                          |          &lt;button class="btn button-light-primary me-md-2" type="button"&gt;Cancel&lt;/button&gt;
                          |          &lt;button class="btn btn-primary" type="button"&gt;Submit&lt;/button&gt;
                          |        &lt;/div&gt;
                          |      &lt;/div&gt;
                          |    &lt;/div&gt;
                          |  &lt;/div&gt;
                          |&lt;/div&gt;
              div(class="col-span-12")
                .card
                  .card-header
                    h5 Button Variations
                    .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
                    p.f-m-light.mt-1
                      | Use
                      code  btn 
                      | class used for buttons and 
                      code btn-group-vertical 
                      | for vertical buttons and made different types of design using 
                      code btn-group
                      |.
                  .card-body
                    .grid.grid-cols-12.gap-3
                      div(class="col-span-6 xxl:col-span-12")
                        .card-wrapper.custom-border.rounded-3.h-full
                          h6.sub-title.fw-bold Vertical Variations
                          .flex.gap-3.items-end.flex-wrap
                            .btn-group-vertical.flex.flex-col(role='group' aria-label='Vertical button group')
                              button.btn.btn-primary(type='button' class="!rounded-none !rounded-t-lg text-white") Primary
                              button.btn.btn-secondary(type='button' class="!rounded-none text-white") Secondary
                              button.btn.btn-success(type='button' class="!rounded-none text-white") Success
                              button.btn.btn-danger(type='button' class="!rounded-none text-white") Danger
                              button.btn.btn-warning(type='button' class="!rounded-none !rounded-b-lg") Warning
                            .btn-group-vertical.buttons-box.flex.flex-col(role='group' aria-label='Vertical button group')
                              button.btn.button-light-primary(type='button' class="!rounded-none !rounded-t-lg" ) Light-primary
                              button.btn.button-light-dark(type='button' class="!rounded-none") Light-dark
                              .btn-group.dropdown(role='group')
                                button.btn.button-light-success.dropdown-toggle.whitespace-nowrap(type='button' class="!rounded-none"  data-bs-toggle='dropdown' aria-expanded='false' class="!w-full")
                                  | Light-success
                                ul.dropdown-menu
                                  li
                                    a.dropdown-item(href='#') Dropdown link
                                  li
                                    a.dropdown-item(href='#') Dropdown link
                              .btn-group.dropstart(role='group')
                                button.btn.button-light-danger.dropdown-toggle.whitespace-nowrap(type='button' class="!rounded-none" data-bs-toggle='dropdown' aria-expanded='false' class="!w-full")
                                  | Light-danger
                                ul.dropdown-menu
                                  li
                                    a.dropdown-item(href='#') Dropdown link
                                  li
                                    a.dropdown-item(href='#') Dropdown link
                              .btn-group.dropend(role='group')
                                button.btn.button-light-warning.dropdown-toggle.whitespace-nowrap(type='button' class="!rounded-none" data-bs-toggle='dropdown' aria-expanded='false' class="!w-full")
                                  | Light-warning
                                ul.dropdown-menu
                                  li
                                    a.dropdown-item(href='#') Dropdown link
                                  li
                                    a.dropdown-item(href='#') Dropdown link
                              .btn-group.dropup(role='group')
                                button.btn.button-light-info.dropdown-toggle.whitespace-nowrap(type='button' class="!rounded-none !rounded-b-lg" data-bs-toggle='dropdown' aria-expanded='false' class="!w-full")
                                  | Light-info
                                ul.dropdown-menu
                                  li
                                    a.dropdown-item(href='#') Dropdown link
                                  li
                                    a.dropdown-item(href='#') Dropdown link
                            .btn-group-vertical.flex.flex-col(role='group' aria-label='Vertical radio toggle button group')
                              input#vbtn-radio1.btn-check.appearance-none(type='radio' name='vbtn-radio' checked='')
                              label.btn.border.btn-outline-primary.whitespace-nowrap(for='vbtn-radio1' class="!rounded-b-none") Radio 1
                              input#vbtn-radio2.btn-check.appearance-none(type='radio' name='vbtn-radio')
                              label.btn.border.btn-outline-primary.whitespace-nowrap(for='vbtn-radio2' class="!rounded-none") Radio 2
                              input#vbtn-radio3.btn-check.appearance-none(type='radio' name='vbtn-radio')
                              label.btn.border.btn-outline-primary.whitespace-nowrap(for='vbtn-radio3' class="!rounded-t-none") Radio 3
 
                      div(class="col-span-6 xxl:col-span-12")
                        .grid.grid-cols-12.gap-3
                          div(class="col-span-12 xl:col-span-6 sm:col-span-12") 
                            .card-wrapper.custom-border.rounded-3.h-full
                              h6.sub-title.fw-bold Horizontal Variations
                              .button-wrapper.button-box.horizontal-variations-box
                                .btn-group(role='group' aria-label='Default button group')
                                  button.btn.border.btn-outline-primary(type='button' class="!rounded-r-none") How
                                  button.btn.border.btn-outline-primary(type='button' class="!rounded-none !border-x-0") Are
                                  button.btn.border.btn-outline-primary(type='button' class="!rounded-l-none") You?
                                .btn-group(role='group' aria-label='Button group with nested dropdown')
                                  button.btn.btn-primary.text-white(type='button' class="!rounded-r-none") C 
                                  button.btn.btn-warning(type='button' class="!rounded-none") U
                                  button.btn.btn-primary.text-white(type='button' class="!rounded-none") B 
                                  button.btn.btn-warning(type='button' class="!rounded-none") A
                                  .btn-group.dropdown(role='group')
                                    button.btn.btn-primary.dropdown-toggle(type='button' data-bs-toggle='dropdown' aria-expanded='false' class="!rounded-l-none")
                                      | Pages
                                    ul.dropdown-menu
                                      li
                                        a.dropdown-item(href='#') Gallery
                                      li
                                        a.dropdown-item(href='#') Blog
                                .btn-group.select-checkbox(role='group' aria-label='Basic checkbox toggle button group')
                                  input#btncheck1.btn-check.appearance-none(type='checkbox')
                                  label.btn.border.btn-outline-success.mb-0(for='btncheck1' class="!rounded-r-none") Checkbox 1
                                  input#btncheck2.btn-check.appearance-none(type='checkbox')
                                  label.btn.border.btn-outline-primary.mb-0(for='btncheck2' class="!border-x-0 !rounded-none [@media(max-width:1065px)]:hidden") Checkbox 2
                                  input#btncheck3.btn-check.appearance-none(type='checkbox')
                                  label.btn.border.btn-outline-success.mb-0(for='btncheck3' class="!rounded-l-none") Checkbox 3
                          div(class="col-span-12 xl:col-span-6 sm:col-span-12")
                            .card-wrapper.custom-border.rounded-3.h-full
                              h6.sub-title.fw-bold Button Toolbar
                              .btn-toolbar.flex.flex-wrap(role='toolbar' aria-label='Toolbar with button groups')
                                .btn-group(role='group' aria-label='First group')
                                  button.btn.btn-primary.text-white(type='button' class="!rounded-r-none") I 
                                  button.btn.btn-warning(type='button' class="!rounded-none") II 
                                  button.btn.btn-primary.text-white(type='button' class="!rounded-none") III
                                  button.btn.btn-warning(type='button' class="!rounded-l-none") IV 
                                .btn-group(role='group' aria-label='Second group')
                                  button.btn.btn-primary.text-white(type='button' class="!rounded-r-none") V 
                                  button.btn.btn-warning(type='button' class="!rounded-none") VI 
                                  button.btn.btn-primary.text-white(type='button' class="!rounded-l-none") VII
                                .btn-group(role='group' aria-label='Third group')
                                  button.btn.btn-warning(type='button') VIII
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head13', title='Copy')
                        i.icofont.icofont-copy-alt
                      pre.custom-scrollbar
                        code.language-html#example-head13
                          |&lt;div class="card-body"&gt;
                          |  &lt;div class="grid grid-cols-12 gap-3"&gt;
                          |    &lt;div class="col-span-6 xxl:col-span-12"&gt;
                          |      &lt;div class="card-wrapper custom-border rounded-3 h-full"&gt;
                          |        &lt;h6 class="sub-title fw-bold"&gt;Vertical Variations&lt;/h6&gt;
                          |        &lt;div class="flex gap-3 align-items-end flex-wrap"&gt;
                          |          &lt;div class="btn-group-vertical" role="group" aria-label="Vertical button group"&gt;
                          |            &lt;button class="btn btn-primary" type="button"&gt;Primary&lt;/button&gt;
                          |            &lt;button class="btn btn-secondary" type="button"&gt;Secondary&lt;/button&gt;
                          |            &lt;button class="btn btn-success" type="button"&gt;Success&lt;/button&gt;
                          |            &lt;button class="btn btn-danger" type="button"&gt;Danger&lt;/button&gt;
                          |            &lt;button class="btn btn-warning" type="button"&gt;Warning&lt;/button&gt;
                          |          &lt;/div&gt;
                          |          &lt;div class="btn-group-vertical buttons-box" role="group" aria-label="Vertical button group"&gt;
                          |            &lt;button class="btn button-light-primary" type="button"&gt;Light-primary&lt;/button&gt;
                          |            &lt;button class="btn button-light-dark" type="button"&gt;Light-dark&lt;/button&gt;
                          |            &lt;div class="btn-group" role="group"&gt;
                          |              &lt;button class="btn button-light-success dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"&gt;Light-success&lt;/button&gt;
                          |              &lt;ul class="dropdown-menu"&gt;
                          |                &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Dropdown link&lt;/a&gt;&lt;/li&gt;
                          |                &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Dropdown link&lt;/a&gt;&lt;/li&gt;
                          |              &lt;/ul&gt;
                          |            &lt;/div&gt;
                          |            &lt;div class="btn-group dropstart" role="group"&gt;
                          |              &lt;button class="btn button-light-danger dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"&gt;Light-danger&lt;/button&gt;
                          |              &lt;ul class="dropdown-menu"&gt;
                          |                &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Dropdown link&lt;/a&gt;&lt;/li&gt;
                          |                &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Dropdown link&lt;/a&gt;&lt;/li&gt;
                          |              &lt;/ul&gt;
                          |            &lt;/div&gt;
                          |            &lt;div class="btn-group dropend" role="group"&gt;
                          |              &lt;button class="btn button-light-warning dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"&gt;Light-warning&lt;/button&gt;
                          |              &lt;ul class="dropdown-menu"&gt;
                          |                &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Dropdown link&lt;/a&gt;&lt;/li&gt;
                          |                &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Dropdown link&lt;/a&gt;&lt;/li&gt;
                          |              &lt;/ul&gt;
                          |            &lt;/div&gt;
                          |            &lt;div class="btn-group dropup" role="group"&gt;
                          |              &lt;button class="btn button-light-info dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"&gt;Light-info&lt;/button&gt;
                          |              &lt;ul class="dropdown-menu"&gt;
                          |                &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Dropdown link&lt;/a&gt;&lt;/li&gt;
                          |                &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Dropdown link&lt;/a&gt;&lt;/li&gt;
                          |              &lt;/ul&gt;
                          |            &lt;/div&gt;
                          |          &lt;/div&gt;
                          |          &lt;div class="btn-group-vertical" role="group" aria-label="Vertical radio toggle button group"&gt;
                          |            &lt;input class="btn-check" id="vbtn-radio1" type="radio" name="vbtn-radio" checked=""&gt;
                          |            &lt;label class="btn btn-outline-primary" for="vbtn-radio1"&gt;Radio 1&lt;/label&gt;
                          |            &lt;input class="btn-check" id="vbtn-radio2" type="radio" name="vbtn-radio"&gt;
                          |            &lt;label class="btn btn-outline-primary" for="vbtn-radio2"&gt;Radio 2&lt;/label&gt;
                          |            &lt;input class="btn-check" id="vbtn-radio3" type="radio" name="vbtn-radio"&gt;
                          |            &lt;label class="btn btn-outline-primary mb-0" for="vbtn-radio3"&gt;Radio 3&lt;/label&gt;
                          |          &lt;/div&gt;
                          |        &lt;/div&gt;
                          |      &lt;/div&gt;
                          |    &lt;/div&gt;
                          |    &lt;div class="col-span-6 xxl:col-span-12"&gt;
                          |      &lt;div class="grid grid-cols-12 gap-3"&gt;
                          |        &lt;div class="col-span-12 xl:col-span-6 sm:col-span-12 "&gt;
                          |          &lt;div class="card-wrapper custom-border rounded-3 h-full"&gt;
                          |            &lt;h6 class="sub-title fw-bold"&gt;Horizontal Variations&lt;/h6&gt;
                          |            &lt;div class="button-wrapper button-box"&gt;
                          |              &lt;div class="btn-group" role="group" aria-label="Default button group"&gt;
                          |                &lt;button class="btn btn-outline-primary" type="button"&gt;How&lt;/button&gt;
                          |                &lt;button class="btn btn-outline-primary" type="button"&gt;Are&lt;/button&gt;
                          |                &lt;button class="btn btn-outline-primary" type="button"&gt;You?&lt;/button&gt;
                          |              &lt;/div&gt;
                          |              &lt;div class="btn-group" role="group" aria-label="Button group with nested dropdown"&gt;
                          |                &lt;button class="btn btn-primary" type="button"&gt;C &lt;/button&gt;
                          |                &lt;button class="btn btn-warning" type="button"&gt;U&lt;/button&gt;
                          |                &lt;button class="btn btn-primary" type="button"&gt;B &lt;/button&gt;
                          |                &lt;button class="btn btn-warning" type="button"&gt;A&lt;/button&gt;
                          |                &lt;div class="btn-group" role="group"&gt;
                          |                  &lt;button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"&gt;Pages&lt;/button&gt;
                          |                  &lt;ul class="dropdown-menu"&gt;
                          |                    &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Gallery&lt;/a&gt;&lt;/li&gt;
                          |                    &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Blog&lt;/a&gt;&lt;/li&gt;
                          |                  &lt;/ul&gt;
                          |                &lt;/div&gt;
                          |              &lt;/div&gt;
                          |              &lt;div class="btn-group select-checkbox" role="group" aria-label="Basic checkbox toggle button group"&gt;
                          |                &lt;input class="btn-check" id="btncheck1" type="checkbox"&gt;
                          |                &lt;label class="btn btn-outline-success mb-0" for="btncheck1"&gt;Checkbox 1&lt;/label&gt;
                          |                &lt;input class="btn-check" id="btncheck2" type="checkbox"&gt;
                          |                &lt;label class="btn btn-outline-primary mb-0" for="btncheck2"&gt;Checkbox 2&lt;/label&gt;
                          |                &lt;input class="btn-check" id="btncheck3" type="checkbox"&gt;
                          |                &lt;label class="btn btn-outline-success mb-0" for="btncheck3"&gt;Checkbox 3&lt;/label&gt;
                          |              &lt;/div&gt;
                          |            &lt;/div&gt;
                          |          &lt;/div&gt;
                          |        &lt;/div&gt;
                          |        &lt;div class="col-span-12 xl:col-span-6 sm:col-span-12 "&gt;
                          |          &lt;div class="card-wrapper custom-border rounded-3 h-full"&gt;
                          |            &lt;h6 class="sub-title fw-bold"&gt;Button Toolbar&lt;/h6&gt;
                          |            &lt;div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups"&gt;
                          |              &lt;div class="btn-group" role="group" aria-label="First group"&gt;
                          |                &lt;button class="btn btn-primary" type="button"&gt;I &lt;/button&gt;
                          |                &lt;button class="btn btn-warning" type="button"&gt;II &lt;/button&gt;
                          |                &lt;button class="btn btn-primary" type="button"&gt;III&lt;/button&gt;
                          |                &lt;button class="btn btn-warning" type="button"&gt;IV &lt;/button&gt;
                          |              &lt;/div&gt;
                          |              &lt;div class="btn-group" role="group" aria-label="Second group"&gt;
                          |                &lt;button class="btn btn-primary" type="button"&gt;V &lt;/button&gt;
                          |                &lt;button class="btn btn-warning" type="button"&gt;VI &lt;/button&gt;
                          |                &lt;button class="btn btn-primary" type="button"&gt;VII&lt;/button&gt;
                          |              &lt;/div&gt;
                          |              &lt;div class="btn-group" role="group" aria-label="Third group"&gt;
                          |                &lt;button class="btn btn-warning" type="button"&gt;VIII&lt;/button&gt;
                          |              &lt;/div&gt;
                          |            &lt;/div&gt;
                          |          &lt;/div&gt;
                          |        &lt;/div&gt;
                          |      &lt;/div&gt;
                          |    &lt;/div&gt;
                          |  &lt;/div&gt;
                          |&lt;/div&gt;
              
              div(class="col-span-12")
                .card
                  .card-header
                    h5 Bold Border Outline Buttons
                    .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
                    p.f-m-light.mt-1
                      | Use 
                      code  btn-outline-*-2x
                      |  class for bold outline buttons.
                  .card-body.common-flex
                    button.btn.btn-outline-primary-2x Animation
                    button.btn.btn-outline-secondary-2x Icons
                    button.btn.btn-outline-success-2x Blog
                    button.btn.btn-outline-info-2x Widgets
                    button.btn.btn-outline-warning-2x Chat
                    button.btn.btn-outline-danger-2x Users
                    button.btn.btn-outline-light-2x.txt-dark FAQ
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head14', title='Copy')
                        i.icofont.icofont-copy-alt
                      pre.custom-scrollbar
                        code.language-html#example-head14
                          |&lt;div class="card-body common-flex"&gt;
                          |  &lt;button class="btn btn-outline-primary-2x"&gt;Animation&lt;/button&gt;
                          |  &lt;button class="btn btn-outline-secondary-2x"&gt;Icons&lt;/button&gt;
                          |  &lt;button class="btn btn-outline-success-2x"&gt;Blog&lt;/button&gt;
                          |  &lt;button class="btn btn-outline-info-2x"&gt;Widgets&lt;/button&gt;
                          |  &lt;button class="btn btn-outline-warning-2x"&gt;Chat&lt;/button&gt;
                          |  &lt;button class="btn btn-outline-danger-2x"&gt;Users&lt;/button&gt;
                          |  &lt;button class="btn btn-outline-light-2x txt-dark"&gt;FAQ&lt;/button&gt;
                          |&lt;/div&gt;
              div(class="col-span-12")
                .card
                  .card-header
                    h5 Radio-checkbox Groups and Animated Buttons
                    .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
                    p.f-m-light.mt-1
                      | Use radio for 
                      code radio 
                      |  class & checkbox for 
                      code checkbox 
                      |  class used.
                  .card-body
                    .grid.grid-cols-12.gap-3
                      div(class="col-span-4 xxl:col-span-6 md:col-span-12 xl-50 box-col-6")
                        .card-wrapper.custom-border.rounded-3.bg-light
                          h6.sub-title.fw-bold Radio Buttons
                          .btn-radio
                            .btn-group(data-bs-toggle='buttons')
                              div.btn.button-light-primary(class="!rounded-r-none")
                                .radio.radio-primary
                                  input#radio7(type='radio', name='radio1', value='option1')
                                  label.mb-0(for='radio7') Theme
                              div.btn.button-light-primary(class="!rounded-l-none")
                                .radio.radio-primary
                                  input#radio8(type='radio', name='radio1', value='option1', checked='')
                                  label.mb-0(for='radio8') E-commerce
                      div(class="col-span-4 xxl:col-span-6 md:col-span-12 xl-50 box-col-6")
                        .card-wrapper.custom-border.rounded-3.bg-light
                          h6.sub-title.fw-bold Checkbox Buttons
                          .btn-group.btn-option(data-bs-toggle='buttons')
                            div.btn.button-light-dark(class="!rounded-r-none")
                              .checkbox.checkbox-dark
                                input#checkbox-primary-1(type='checkbox')
                                label(for='checkbox-primary-1' class="!mb-0") Theme
                            div.btn.button-light-dark(class="!rounded-l-none")
                              .checkbox.checkbox-dark
                                input#checkbox-primary-2(type='checkbox')
                                label(for='checkbox-primary-2' class="!mb-0") E-commerce
                      div(class="col-span-4 xxl:col-span-6 md:col-span-12 xl-100 box-col-12")
                        .card-wrapper.custom-border.rounded-3.bg-light
                          h6.sub-title.fw-bold Animated Buttons
                          .common-flex.mix-hover-btn
                            button.btn.btn-border-pop.btn-primary FAQ
                            button.btn.btn-bg-slide.button-light-primary.text-black Blog
                            button.btn.btn-border-bottom.button-light-primary.txt-dark Icons
                            button.button.button--winona.button--border-thin.button--round-s(data-text='Open Project')
                              span Open Project
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head15', title='Copy')
                        i.icofont.icofont-copy-alt
                      pre.custom-scrollbar
                        code.language-html#example-head15
                          |&lt;div class="card-body"&gt;
                          |  &lt;div class="grid grid-cols-12 gap-3"&gt;
                          |    &lt;div class="col-span-4 xxl:col-span-6 md:col-span-12 box-col-6 xl-50"&gt;
                          |      &lt;div class="card-wrapper custom-border rounded-3 bg-light"&gt;
                          |        &lt;h6 class="sub-title fw-bold"&gt;Radio Buttons&lt;/h6&gt;
                          |        &lt;div class="btn-radio"&gt;
                          |          &lt;div class="btn-group" data-bs-toggle="buttons"&gt;
                          |            &lt;div class="btn button-light-primary"&gt;
                          |              &lt;div class="radio radio-primary"&gt;
                          |                &lt;input id="radio7" type="radio" name="radio1" value="option1"&gt;
                          |                &lt;label class="mb-0" for="radio7"&gt;Theme&lt;/label&gt;
                          |              &lt;/div&gt;
                          |            &lt;/div&gt;
                          |            &lt;div class="btn button-light-primary"&gt;
                          |              &lt;div class="radio radio-primary"&gt;
                          |                &lt;input id="radio8" type="radio" name="radio1" value="option1" checked=""&gt;
                          |                &lt;label class="mb-0" for="radio8"&gt;E-commerce&lt;/label&gt;
                          |              &lt;/div&gt;
                          |            &lt;/div&gt;
                          |          &lt;/div&gt;
                          |        &lt;/div&gt;
                          |      &lt;/div&gt;
                          |    &lt;/div&gt;
                          |    &lt;div class="col-span-4 xxl:col-span-6 md:col-span-12 box-col-6 xl-50"&gt;
                          |      &lt;div class="card-wrapper custom-border rounded-3 bg-light"&gt;
                          |        &lt;h6 class="sub-title fw-bold"&gt;Checkbox Buttons&lt;/h6&gt;
                          |        &lt;div class="btn-group btn-option" data-bs-toggle="buttons"&gt;
                          |          &lt;div class="btn button-light-dark"&gt;
                          |            &lt;div class="checkbox checkbox-dark"&gt;
                          |              &lt;input id="checkbox-primary-1" type="checkbox"&gt;
                          |              &lt;label class="mb-0" for="checkbox-primary-1"&gt;Theme&lt;/label&gt;
                          |            &lt;/div&gt;
                          |          &lt;/div&gt;
                          |          &lt;div class="btn button-light-dark"&gt;
                          |            &lt;div class="checkbox checkbox-dark"&gt;
                          |              &lt;input id="checkbox-primary-2" type="checkbox"&gt;
                          |              &lt;label class="mb-0" for="checkbox-primary-2"&gt;E-commerce&lt;/label&gt;
                          |            &lt;/div&gt;
                          |          &lt;/div&gt;
                          |        &lt;/div&gt;
                          |      &lt;/div&gt;
                          |    &lt;/div&gt;
                          |    &lt;div class="col-span-4 xxl:col-span-6 md:col-span-12 box-col-12 xl-100"&gt;
                          |      &lt;div class="card-wrapper custom-border rounded-3 bg-light"&gt;
                          |        &lt;h6 class="sub-title fw-bold"&gt;Animated Buttons&lt;/h6&gt;
                          |        &lt;div class="common-flex mix-hover-btn"&gt;
                          |          &lt;button class="btn btn-border-pop btn-primary"&gt;FAQ&lt;/button&gt;
                          |          &lt;button class="btn btn-bg-slide button-light-primary"&gt;Blog&lt;/button&gt;
                          |          &lt;button class="btn btn-border-bottom button-light-primary txt-dark"&gt;Icons&lt;/button&gt;
                          |          &lt;button class="button button--winona button--border-thin button--round-s" data-text="Open Project"&gt;&lt;span&gt;Open Project&lt;/span&gt;&lt;/button&gt;
                          |        &lt;/div&gt;
                          |      &lt;/div&gt;
                          |    &lt;/div&gt;
                          |  &lt;/div&gt;
                          |&lt;/div&gt;

              div(class="col-span-12")
                .card
                  .card-header
                    h5 Radial Buttons
                    .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
                    p.f-m-light.mt-1
                      | You can used 
                      code btn-*-gradien
                      |  class for gradien buttons.
                  .card-body
                    .grid.grid-cols-12.gap-3
                      div(class="col-span-4 xl:col-span-6 sm:col-span-12").col-xl-4.col-sm-6
                        .card-wrapper.custom-border.rounded-3.bg-light
                          h6.sub-title.fw-bold Default Gradient Buttons
                          .common-flex 
                            button.btn.btn-primary-gradien Icons
                            button.btn.btn-secondary-gradien Animation
                            button.btn.btn-success-gradien Tasks
                            button.btn.btn-info-gradien Letter box
                            button.btn.btn-warning-gradien Chat
                            button.btn.btn-danger-gradien Blog
                            button.btn.btn-light-gradien.text-dark Gallery
                      div(class="col-span-4 xl:col-span-6 sm:col-span-12").col-xl-4.col-sm-6
                        .card-wrapper.custom-border.rounded-3.bg-light
                          h6.sub-title.fw-bold Flat Gradient Buttons
                          .common-flex
                            button.btn.btn-square.btn-primary-gradien Icons
                            button.btn.btn-square.btn-secondary-gradien Animation
                            button.btn.btn-square.btn-success-gradien Tasks
                            button.btn.btn-square.btn-info-gradien Letter box
                            button.btn.btn-square.btn-warning-gradien Chat
                            button.btn.btn-square.btn-danger-gradien Blog
                            button.btn.btn-square.btn-light-gradien.text-dark Gallery
                      div(class="col-span-4 xl:col-span-12").col-xl-4.col-sm-12
                        .card-wrapper.custom-border.rounded-3.bg-light
                          h6.sub-title.fw-bold Rounded Gradient Buttons
                          .common-flex
                            button.btn.btn-pill.btn-air-primary.btn-primary-gradien Icons
                            button.btn.btn-pill.btn-air-secondary.btn-secondary-gradien Animation
                            button.btn.btn-pill.btn-air-success.btn-success-gradien Tasks
                            button.btn.btn-pill.btn-air-info.btn-info-gradien Letter box
                            button.btn.btn-pill.btn-air-warning.btn-warning-gradien Chat
                            button.btn.btn-pill.btn-air-danger.btn-danger-gradien Blog
                            button.btn.btn-pill.btn-air-light.btn-light-gradien.txt-dark Gallery

                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head16', title='Copy')
                        i.icofont.icofont-copy-alt
                      pre.custom-scrollbar
                        code.language-html#example-head16
                          |&lt;div class="card-body"&gt;
                          |  &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="card-wrapper custom-border rounded-3 bg-light"&gt;
                          |        &lt;h6 class="sub-title fw-bold"&gt;Default Gradient Buttons&lt;/h6&gt;
                          |        &lt;div class="common-flex"&gt;
                          |          &lt;button class="btn btn-primary-gradien"&gt;Icons&lt;/button&gt;
                          |          &lt;button class="btn btn-secondary-gradien"&gt;Animation&lt;/button&gt;
                          |          &lt;button class="btn btn-success-gradien"&gt;Tasks&lt;/button&gt;
                          |          &lt;button class="btn btn-info-gradien"&gt;Letter box&lt;/button&gt;
                          |          &lt;button class="btn btn-warning-gradien"&gt;Chat&lt;/button&gt;
                          |          &lt;button class="btn btn-danger-gradien"&gt;Blog&lt;/button&gt;
                          |          &lt;button class="btn btn-light-gradien text-dark"&gt;Gallery&lt;/button&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="card-wrapper custom-border rounded-3 bg-light"&gt;
                          |        &lt;h6 class="sub-title fw-bold"&gt;Flat Gradient Buttons&lt;/h6&gt;
                          |        &lt;div class="common-flex"&gt;
                          |          &lt;button class="btn btn-square btn-primary-gradien"&gt;Icons&lt;/button&gt;
                          |          &lt;button class="btn btn-square btn-secondary-gradien"&gt;Animation&lt;/button&gt;
                          |          &lt;button class="btn btn-square btn-success-gradien"&gt;Tasks&lt;/button&gt;
                          |          &lt;button class="btn btn-square btn-info-gradien"&gt;Letter box&lt;/button&gt;
                          |          &lt;button class="btn btn-square btn-warning-gradien"&gt;Chat&lt;/button&gt;
                          |          &lt;button class="btn btn-square btn-danger-gradien"&gt;Blog&lt;/button&gt;
                          |          &lt;button class="btn btn-square btn-light-gradien text-dark"&gt;Gallery&lt;/button&gt;
                          |        &lt;/div&gt;
                          |      &lt;/div&gt;
                          |    &lt;/div&gt;
                          |    &lt;div class="col-span-4 xl:col-span-12"&gt;
                          |      &lt;div class="card-wrapper custom-border rounded-3 bg-light"&gt;
                          |        &lt;h6 class="sub-title fw-bold"&gt;Rounded Gradient Buttons&lt;/h6&gt;
                          |        &lt;div class="common-flex"&gt;
                          |          &lt;button class="btn btn-pill btn-air-primary btn-primary-gradien"&gt;Icons&lt;/button&gt;
                          |          &lt;button class="btn btn-pill btn-air-secondary btn-secondary-gradien"&gt;Animation&lt;/button&gt;
                          |          &lt;button class="btn btn-pill btn-air-success btn-success-gradien"&gt;Tasks&lt;/button&gt;
                          |          &lt;button class="btn btn-pill btn-air-info btn-info-gradien"&gt;Letter box&lt;/button&gt;
                          |          &lt;button class="btn btn-pill btn-air-warning btn-warning-gradien"&gt;Chat&lt;/button&gt;
                          |          &lt;button class="btn btn-pill btn-air-danger btn-danger-gradien"&gt;Blog&lt;/button&gt;
                          |          &lt;button class="btn btn-pill btn-air-light btn-light-gradien txt-dark"&gt;Gallery&lt;/button&gt;
                          |        &lt;/div&gt;
                          |      &lt;/div&gt;
                          |    &lt;/div&gt;
                          |  &lt;/div&gt;
                          |&lt;/div&gt;

          // Container-fluid Ends
        include ../../components/footer
    include ../../components/footer-files
