- var page_Title = 'Tag & Pills';
- var theme_customizer      = true;
- var sidebar               = true;
- var slick                 = true;
- var header_slider         = true;
- var scrollbar             = true;
- var height_equal          = true;
- var prism                 = true;
- var clipboard             = true;
- var customcard            = true;
doctype html
html(lang='en')
  include ../../components/header-files
  body
    include ../../components/loader
    include ../../components/taptop
    // page-wrapper Start
    #pageWrapper.page-wrapper.compact-wrapper
      include ../../components/header
      // Page Body Start
      .page-body-wrapper
        include ../../components/sidebar
        .page-body
          .container.w-full
            .page-title
              .grid.grid-cols-12.mx-2.items-center
                div(class="col-span-6 sm:col-span-12")
                  h3
                    | Tag & Pills
                div(class="col-span-6 sm:col-span-12")
                  ol.breadcrumb.flex
                    li.breadcrumb-item
                      a(href='index.html')                                        
                        svg.stroke-icon
                          use(href='../assets/svg/icon-sprite.svg#stroke-home')
                    li.breadcrumb-item  Ui Kits
                    li.breadcrumb-item.active Tag & Pills
          // Container-fluid starts
          .container
            .grid.grid-cols-12.card-gap
              div(class="col-span-6 xl:col-span-12")
                .card 
                  .card-header
                    h5 Badges Contextual Variations
                    p.f-m-light.mt-1 
                      | Use
                      code  badge 
                      | class to make more badges.
                    .card-header-right
                      ul.list-unstyled.card-option
                        li
                          i.fa-solid.fa-gear.fa-spin
                        li
                          i.view-html.fa-solid.fa-code
                        li
                          i.icofont.icofont-maximize.full-card
                        li
                          i.icofont.icofont-minus.minimize-card
                        li
                          i.icofont.icofont-refresh.reload-card
                        li
                          i.icofont.icofont-error.close-card  
                  .card-body
                    .badge-spacing 
                      span.badge.text-white.badge-primary Primary
                      span.badge.text-white.badge-secondary Secondary
                      span.badge.text-white.badge-success Success
                      span.badge.text-white.badge-info Info
                      span.badge.text-white.badge-warning Warning
                      span.badge.text-white.badge-danger Danger
                      span.badge.badge-light.txt-dark Light
                      span.badge.text-white.badge-dark Dark
                    .code-box-copy 
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#badge-c-variations', title='Copy')
                        i.icofont.icofont-copy-alt
                      pre.custom-scrollbar
                        code.language-html#badge-c-variations
                          |&lt;div class="badge-spacing"&gt;
                          |  &lt;span class="badge badge-primary"&gt;Primary&lt;/span&gt;
                          |  &lt;span class="badge badge-secondary"&gt;Secondary&lt;/span&gt;
                          |  &lt;span class="badge badge-success"&gt;Success&lt;/span&gt;
                          |  &lt;span class="badge badge-info"&gt;Info&lt;/span&gt;
                          |  &lt;span class="badge badge-warning"&gt;Warning&lt;/span&gt;
                          |  &lt;span class="badge badge-danger"&gt;Danger&lt;/span&gt;
                          |  &lt;span class="badge badge-light txt-dark"&gt;Light&lt;/span&gt;
                          |  &lt;span class="badge badge-dark"&gt;Dark&lt;/span&gt;
                          |&lt;/div&gt;
              div(class="col-span-6 xl:col-span-12")
                .card
                  .card-header
                    h5 Badges Outline Contextual Variations
                    p.f-m-light.mt-1 
                      | Use
                      code  badge 
                      | class to make more badges.
                    .card-header-right
                      ul.list-unstyled.card-option
                        li
                          i.fa-solid.fa-gear.fa-spin
                        li
                          i.view-html.fa-solid.fa-code
                        li
                          i.icofont.icofont-maximize.full-card
                        li
                          i.icofont.icofont-minus.minimize-card
                        li
                          i.icofont.icofont-refresh.reload-card
                        li
                          i.icofont.icofont-error.close-card  
                  .card-body
                    .badge-spacing 
                      span.badge.badge-b-primary.txt-primary Primary
                      span.badge.badge-b-secondary.txt-secondary Secondary
                      span.badge.badge-b-success.txt-success Success
                      span.badge.badge-b-info.txt-info Info
                      span.badge.badge-b-warning.txt-warning Warning
                      span.badge.badge-b-danger.txt-danger Danger
                      span.badge.badge-b-light.txt-dark Light
                      span.badge.badge-b-dark.txt-dark Dark
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#badge-outline-variations', title='Copy')
                        i.icofont.icofont-copy-alt
                      pre.custom-scrollbar
                        code.language-html#badge-outline-variations
                          |&lt;div class="badge-spacing"&gt;
                          |  &lt;span class="badge badge-b-primary txt-primary"&gt;Primary&lt;/span&gt;
                          |  &lt;span class="badge badge-b-secondary txt-secondary"&gt;Secondary&lt;/span&gt;
                          |  &lt;span class="badge badge-b-success txt-success"&gt;Success&lt;/span&gt;
                          |  &lt;span class="badge badge-b-info txt-info"&gt;Info&lt;/span&gt;
                          |  &lt;span class="badge badge-b-warning txt-warning"&gt;Warning&lt;/span&gt;
                          |  &lt;span class="badge badge-b-danger txt-danger"&gt;Danger&lt;/span&gt;
                          |  &lt;span class="badge badge-b-light txt-dark"&gt;Light&lt;/span&gt;
                          |  &lt;span class="badge badge-b-dark txt-dark"&gt;Dark&lt;/span&gt;
                          |&lt;/div&gt;
              div(class="col-span-6 xl:col-span-12")
                .card
                  .card-header
                    h5 Pill Contextual Variations
                    p.f-m-light.mt-1 
                      | Use
                      code  rounded-full 
                      | class to make badges with background (badge-*) more rounded with a larger 
                      code border-radius 
                      |.
                    .card-header-right
                      ul.list-unstyled.card-option
                        li
                          i.fa-solid.fa-gear.fa-spin
                        li
                          i.view-html.fa-solid.fa-code
                        li
                          i.icofont.icofont-maximize.full-card
                        li
                          i.icofont.icofont-minus.minimize-card
                        li
                          i.icofont.icofont-refresh.reload-card
                        li
                          i.icofont.icofont-error.close-card
                  .card-body
                    .badge-spacing
                      span.badge.rounded-full.text-white.badge-primary Primary
                      span.badge.rounded-full.text-white.badge-secondary Secondary
                      span.badge.rounded-full.text-white.badge-success Success
                      span.badge.rounded-full.text-white.badge-info Info
                      span.badge.rounded-full.text-white.badge-warning Warning
                      span.badge.rounded-full.text-white.badge-danger Danger
                      span.badge.rounded-full.badge-light.txt-dark Light
                      span.badge.rounded-full.text-white.badge-dark Dark
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#pills-variations', title='Copy')
                        i.icofont.icofont-copy-alt
                      pre.custom-scrollbar
                        code.language-html#pills-variations
                          |&lt;div class="badge-spacing"&gt;
                          |  &lt;span class="badge text-white rounded-full badge-primary"&gt;Primary&lt;/span&gt;
                          |  &lt;span class="badge text-white rounded-full badge-secondary"&gt;Secondary&lt;/span&gt;
                          |  &lt;span class="badge text-white rounded-full badge-success"&gt;Success&lt;/span&gt;
                          |  &lt;span class="badge text-white rounded-full badge-info"&gt;Info&lt;/span&gt;
                          |  &lt;span class="badge text-white rounded-full badge-warning"&gt;Warning&lt;/span&gt;
                          |  &lt;span class="badge text-white rounded-full badge-danger"&gt;Danger&lt;/span&gt;
                          |  &lt;span class="badge text-white rounded-full badge-light txt-dark"&gt;Light&lt;/span&gt;
                          |  &lt;span class="badge text-white rounded-full badge-dark"&gt;Dark&lt;/span&gt;
                          |&lt;/div&gt;
              div(class="col-span-6 xl:col-span-12")
                .card
                  .card-header
                    h5 Pill Outline Variations
                    p.f-m-light.mt-1 
                      | Use
                      code  rounded-full 
                      |  class to make badges with background (badge-b-*) more rounded with a larger 
                      code border-radius
                      |.
                    .card-header-right
                      ul.list-unstyled.card-option
                        li
                          i.fa-solid.fa-gear.fa-spin
                        li
                          i.view-html.fa-solid.fa-code
                        li
                          i.icofont.icofont-maximize.full-card
                        li
                          i.icofont.icofont-minus.minimize-card
                        li
                          i.icofont.icofont-refresh.reload-card
                        li
                          i.icofont.icofont-error.close-card
                  .card-body
                    .badge-spacing
                      span.badge.rounded-full.txt-primary.badge-b-primary Primary
                      span.badge.rounded-full.txt-secondary.badge-b-secondary Secondary
                      span.badge.rounded-full.txt-success.badge-b-success Success
                      span.badge.rounded-full.txt-info.badge-b-info Info
                      span.badge.rounded-full.txt-warning.badge-b-warning Warning
                      span.badge.rounded-full.txt-danger.badge-b-danger Danger
                      span.badge.rounded-full.txt-light.badge-b-light.txt-dark Light
                      span.badge.rounded-full.txt-dark.badge-b-dark Dark
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#pills-outline-variations', title='Copy')
                        i.icofont.icofont-copy-alt
                      pre.custom-scrollbar
                        code.language-html#pills-outline-variations
                          |&lt;div class="badge-spacing"&gt; 
                          |  &lt;span class="badge rounded-full txt-primary badge-b-primary"&gt;Primary&lt;/span&gt;
                          |  &lt;span class="badge rounded-full txt-secondary badge-b-secondary"&gt;Secondary&lt;/span&gt;
                          |  &lt;span class="badge rounded-full txt-success badge-b-success"&gt;Success&lt;/span&gt;
                          |  &lt;span class="badge rounded-full txt-info badge-b-info"&gt;Info&lt;/span&gt;
                          |  &lt;span class="badge rounded-full txt-warning badge-b-warning"&gt;Warning&lt;/span&gt;
                          |  &lt;span class="badge rounded-full txt-danger badge-b-danger"&gt;Danger&lt;/span&gt;
                          |  &lt;span class="badge rounded-full txt-light badge-b-light txt-dark"&gt;Light&lt;/span&gt;
                          |  &lt;span class="badge rounded-full txt-dark badge-b-dark"&gt;Dark&lt;/span&gt;
                          |&lt;/div&gt;
              div(class="col-span-6 xl:col-span-12")
                .card
                  .card-header
                    h5 Number of Badges
                    p.f-m-light.mt-1 
                      | Use
                      code  badge
                      |  class to make square badges with numbers.
                    .card-header-right
                      ul.list-unstyled.card-option
                        li
                          i.fa-solid.fa-gear.fa-spin
                        li
                          i.view-html.fa-solid.fa-code
                        li
                          i.icofont.icofont-maximize.full-card
                        li
                          i.icofont.icofont-minus.minimize-card
                        li
                          i.icofont.icofont-refresh.reload-card
                        li
                          i.icofont.icofont-error.close-card
                  .card-body
                    .badge-spacing
                      a.badge.text-white.badge-primary(href='#') 1
                      a.badge.text-white.badge-secondary(href='#') 2
                      a.badge.text-white.badge-success(href='#') 3
                      a.badge.text-white.badge-info(href='#') 4
                      a.badge.text-white.badge-warning(href='#') 5
                      a.badge.text-white.badge-danger(href='#') 6
                      a.badge.badge-light.txt-dark(href='#') 7
                      a.badge.text-white.badge-dark(href='#') 8
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#number-of-badge', title='Copy')
                        i.icofont.icofont-copy-alt
                      pre.custom-scrollbar
                        code.language-html#number-of-badge
                          |&lt;div class="badge-spacing"&gt;
                          |  &lt;a class="badge text-white rounded badge-primary" href="#"&gt;1&lt;/a&gt;
                          |  &lt;a class="badge text-white rounded badge-secondary" href="#"&gt;2&lt;/a&gt;
                          |  &lt;a class="badge text-white rounded badge-success" href="#"&gt;3&lt;/a&gt;
                          |  &lt;a class="badge text-white rounded badge-info" href="#"&gt;4&lt;/a&gt;
                          |  &lt;a class="badge text-white rounded badge-warning" href="#"&gt;5&lt;/a&gt;
                          |  &lt;a class="badge text-white rounded badge-danger" href="#"&gt;6&lt;/a&gt;
                          |  &lt;a class="badge rounded badge-light txt-dark" href="#"&gt;7&lt;/a&gt;
                          |  &lt;a class="badge text-white rounded badge-dark" href="#"&gt;8&lt;/a&gt;
                          |&lt;/div&gt;
              div(class="col-span-6 xl:col-span-12")
                .card
                  .card-header
                    h5 Number of Pill Badges
                    p.f-m-light.mt-1 
                      | Use
                      code  rounded-full 
                      |  class to make rounded badges with numbers.
                    .card-header-right
                      ul.list-unstyled.card-option
                        li
                          i.fa-solid.fa-gear.fa-spin
                        li
                          i.view-html.fa-solid.fa-code
                        li
                          i.icofont.icofont-maximize.full-card
                        li
                          i.icofont.icofont-minus.minimize-card
                        li
                          i.icofont.icofont-refresh.reload-card
                        li
                          i.icofont.icofont-error.close-card
                  .card-body
                    .badge-spacing
                      span.badge.rounded-full.text-white.badge-p-space.badge-primary 1
                      span.badge.rounded-full.text-white.badge-p-space.badge-secondary 2
                      span.badge.rounded-full.text-white.badge-p-space.badge-success 3
                      span.badge.rounded-full.text-white.badge-p-space.badge-info 4
                      span.badge.rounded-full.text-white.badge-p-space.badge-warning 5
                      span.badge.rounded-full.text-white.badge-p-space.badge-danger 6
                      span.badge.rounded-full.badge-p-space.badge-light.txt-dark 7
                      span.badge.rounded-full.text-white.badge-p-space.badge-dark 8
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#number-of-pills', title='Copy')
                        i.icofont.icofont-copy-alt
                      pre.custom-scrollbar 
                        code.language-html#number-of-pills
                          |&lt;div class="badge-spacing"&gt;
                          |  &lt;span class="badge rounded-full text-white badge-p-space badge-primary"&gt;1&lt;/span&gt;
                          |  &lt;span class="badge rounded-full text-white badge-p-space badge-secondary"&gt;2&lt;/span&gt;
                          |  &lt;span class="badge rounded-full text-white badge-p-space badge-success"&gt;3&lt;/span&gt;
                          |  &lt;span class="badge rounded-full text-white badge-p-space badge-info"&gt;4&lt;/span&gt;
                          |  &lt;span class="badge rounded-full text-white badge-p-space badge-warning"&gt;5&lt;/span&gt;
                          |  &lt;span class="badge rounded-full text-white badge-p-space badge-danger"&gt;6&lt;/span&gt;
                          |  &lt;span class="badge rounded-full text-white badge-p-space badge-light txt-dark"&gt;7&lt;/span&gt;
                          |  &lt;span class="badge rounded-full text-white badge-p-space badge-dark"&gt;8&lt;/span&gt;
                          |&lt;/div&gt; 
              div(class="col-span-6 xl:col-span-12")
                .card
                  .card-header
                    h5 Badge Tag with Icons
                    p.f-m-light.mt-1 
                      | Use
                      code  badge 
                      |  class to make square badges with icons.
                    .card-header-right
                      ul.list-unstyled.card-option
                        li
                          i.fa-solid.fa-gear.fa-spin
                        li
                          i.view-html.fa-solid.fa-code
                        li
                          i.icofont.icofont-maximize.full-card
                        li
                          i.icofont.icofont-minus.minimize-card
                        li
                          i.icofont.icofont-refresh.reload-card
                        li
                          i.icofont.icofont-error.close-card
                  .card-body
                    .badge-spacing
                      a.badge.b-ln-height.badge-primary(href='#')
                        i(class="stroke-white" data-feather='dollar-sign')
                      a.badge.b-ln-height.badge-secondary(href='#')
                        i(class="stroke-white" data-feather='headphones')
                      a.badge.b-ln-height.badge-success(href='#')
                        i(class="stroke-white" data-feather='link')
                      a.badge.b-ln-height.badge-info(href='#')
                        i(class="stroke-white" data-feather='github')
                      a.badge.b-ln-height.badge-warning(href='#')
                        i(class="stroke-white" data-feather='award')
                      a.badge.b-ln-height.badge-danger(href='#')
                        i(class="stroke-white" data-feather='activity')
                      a.badge.b-ln-height.badge-light.txt-dark(href='#')
                        i(class="stroke-dark" data-feather='heart')
                      a.badge.badge-dark(href='#')
                        i(class="stroke-white" data-feather='mail')
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#badge-icons', title='Copy')
                        i.icofont.icofont-copy-alt
                      pre.custom-scrollbar
                        code.language-html#badge-icons
                          |&lt;div class="badge-spacing"&gt;
                          |  &lt;a class="badge rounded b-ln-height badge-primary" href="#"&gt;
                          |    &lt;i class="stroke-white" data-feather="dollar-sign"&gt;&lt;/i&gt;
                          |  &lt;/a&gt;
                          |  &lt;a class="badge rounded b-ln-height badge-secondary" href="#"&gt;
                          |    &lt;i class="stroke-white" data-feather="headphones"&gt;&lt;/i&gt;
                          |  &lt;/a&gt;
                          |  &lt;a class="badge rounded b-ln-height badge-success" href="#"&gt;
                          |    &lt;i class="stroke-white" data-feather="link"&gt;&lt;/i&gt;
                          |  &lt;/a&gt;
                          |  &lt;a class="badge rounded b-ln-height badge-info" href="#"&gt;
                          |    &lt;i class="stroke-white" data-feather="github"&gt;&lt;/i&gt;
                          |  &lt;/a&gt;
                          |  &lt;a class="badge rounded b-ln-height badge-warning" href="#"&gt;
                          |    &lt;i class="stroke-white" data-feather="award"&gt;&lt;/i&gt;
                          |  &lt;/a&gt;
                          |  &lt;a class="badge rounded b-ln-height badge-danger" href="#"&gt;
                          |    &lt;i class="stroke-white" data-feather="activity"&gt;&lt;/i&gt;
                          |  &lt;/a&gt;
                          |  &lt;a class="badge rounded b-ln-height badge-light txt-dark" href="#"&gt;
                          |    &lt;i class="stroke-white" data-feather="heart"&gt;&lt;/i&gt;
                          |  &lt;/a&gt;
                          |  &lt;a class="badge rounded badge-dark" href="#"&gt;
                          |    &lt;i class="stroke-white" data-feather="mail"&gt;&lt;/i&gt;
                          |  &lt;/a&gt; 
                          |&lt;/div&gt;
              div(class="col-span-6 xl:col-span-12")
                .card
                  .card-header
                    h5 Rounded Pills with Icons
                    p.f-m-light.mt-1 
                      | Use
                      code  rounded-full 
                      |  class to make rounded badges with icons.
                    .card-header-right
                      ul.list-unstyled.card-option
                        li
                          i.fa-solid.fa-gear.fa-spin
                        li
                          i.view-html.fa-solid.fa-code
                        li
                          i.icofont.icofont-maximize.full-card
                        li
                          i.icofont.icofont-minus.minimize-card
                        li
                          i.icofont.icofont-refresh.reload-card
                        li
                          i.icofont.icofont-error.close-card
                  .card-body
                    .badge-spacing
                      a.badge.rounded-full.badge-primary(href='#' class="!p-[8px] !leading-[1]")
                        i(class="stroke-white" data-feather='dollar-sign')
                      a.badge.rounded-full.badge-secondary(href='#' class="!p-[8px] !leading-[1]")
                        i(class="stroke-white" data-feather='headphones')
                      a.badge.rounded-full.badge-success(href='#' class="!p-[8px] !leading-[1]")
                        i(class="stroke-white" data-feather='link')
                      a.badge.rounded-full.badge-info(href='#' class="!p-[8px] !leading-[1]")
                        i(class="stroke-white" data-feather='github')
                      a.badge.rounded-full.badge-warning(href='#' class="!p-[8px] !leading-[1]")
                        i(class="stroke-white" data-feather='award')
                      a.badge.rounded-full.badge-danger(href='#' class="!p-[8px] !leading-[1]")
                        i(class="stroke-white" data-feather='activity')
                      a.badge.rounded-full.badge-light.txt-dark(href='#' class="!p-[8px] !leading-[1]")
                        i(class="stroke-dark" data-feather='heart')
                      a.badge.rounded-full.badge-dark(href='#' class="!p-[8px] !leading-[1]")
                        i(class="stroke-white" data-feather='mail')
                    .code-box-copy 
                        button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#rounded-fulls-icons', title='Copy')
                          i.icofont.icofont-copy-alt
                        pre.custom-scrollbar
                          code.language-html#rounded-fulls-icons
                            |&lt;div class="badge-spacing"&gt;
                            |  &lt;a class="badge rounded-full p-2 badge-primary" href="#"&gt;
                            |    &lt;i class="stroke-white" data-feather="dollar-sign"&gt;&lt;/i&gt;
                            |  &lt;/a&gt;
                            |  &lt;a class="badge rounded-full p-2 badge-secondary" href="#"&gt;
                            |    &lt;i class="stroke-white" data-feather="headphones"&gt;&lt;/i&gt;
                            |  &lt;/a&gt;
                            |  &lt;a class="badge rounded-full p-2 badge-success" href="#"&gt;
                            |    &lt;i class="stroke-white" data-feather="link"&gt;&lt;/i&gt;
                            |  &lt;/a&gt;
                            |  &lt;a class="badge rounded-full p-2 badge-info" href="#"&gt;
                            |    &lt;i class="stroke-white" data-feather="github"&gt;&lt;/i&gt;
                            |  &lt;/a&gt;
                            |  &lt;a class="badge rounded-full p-2 badge-warning" href="#"&gt;
                            |    &lt;i class="stroke-white" data-feather="award"&gt;&lt;/i&gt;
                            |  &lt;/a&gt;
                            |  &lt;a class="badge rounded-full p-2 badge-danger" href="#"&gt;
                            |    &lt;i class="stroke-white" data-feather="activity"&gt;&lt;/i&gt;
                            |  &lt;/a&gt;
                            |  &lt;a class="badge rounded-full p-2 badge-light txt-dark" href="#"&gt;
                            |    &lt;i class="stroke-white" data-feather="heart"&gt;&lt;/i&gt;
                            |  &lt;/a&gt;
                            |  &lt;a class="badge rounded-full p-2 badge-dark" href="#"&gt;
                            |    &lt;i class="stroke-white" data-feather="mail"&gt;&lt;/i&gt;
                            |  &lt;/a&gt;
                            |&lt;/div&gt;
              div(class="col-span-6 xl:col-span-12")
                .card
                  .card-header
                    h5 Badge Headings
                    p.f-m-light.mt-1 
                      | All html headings, 
                      code &lt;h1&gt;
                      |  through 
                      code &lt;h6&gt;
                      |  , are available in 
                      code badge 
                      | tags.
                    .card-header-right
                      ul.list-unstyled.card-option
                        li
                          i.fa-solid.fa-gear.fa-spin
                        li
                          i.view-html.fa-solid.fa-code
                        li
                          i.icofont.icofont-maximize.full-card
                        li
                          i.icofont.icofont-minus.minimize-card
                        li
                          i.icofont.icofont-refresh.reload-card
                        li
                          i.icofont.icofont-error.close-card
                  .card-body.badge-heading
                    h1
                      | Example heading 
                      span.badge.text-white.text-bg-secondary New
                    h2
                      | Example heading 
                      span.badge.text-white.text-bg-secondary New
                    h3
                      | Example heading 
                      span.badge.text-white.text-bg-secondary New
                    h4
                      | Example heading 
                      span.badge.text-white.text-bg-secondary New
                    h5
                      | Example heading 
                      span.badge.text-white.text-bg-secondary New
                    h6
                      | Example heading 
                      span.badge.text-white.text-bg-secondary New
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#badge-headings', title='Copy')
                        i.icofont.icofont-copy-alt
                      pre.custom-scrollbar
                        code.language-html#badge-headings
                          |&lt;div class="card-body badge-heading"&gt;
                          |  &lt;h1&gt;Example heading
                          |    &lt;span class="badge text-white rounded text-bg-secondary"&gt;New&lt;/span&gt;
                          |  &lt;/h1&gt;
                          |  &lt;h2&gt;Example heading
                          |    &lt;span class="badge text-white rounded text-bg-secondary"&gt;New&lt;/span&gt;
                          |  &lt;/h2&gt;
                          |  &lt;h3&gt;Example heading
                          |    &lt;span class="badge text-white rounded text-bg-secondary"&gt;New&lt;/span&gt;
                          |  &lt;/h3&gt;
                          |  &lt;h4&gt;Example heading
                          |    &lt;span class="badge text-white rounded text-bg-secondary"&gt;New&lt;/span&gt;
                          |  &lt;/h4&gt;
                          |  &lt;h5&gt;Example heading
                          |    &lt;span class="badge text-white rounded text-bg-secondary"&gt;New&lt;/span&gt;
                          |  &lt;/h5&gt;
                          |  &lt;h6&gt;Example heading
                          |    &lt;span class="badge text-white rounded text-bg-secondary"&gt;New&lt;/span&gt;
                          |  &lt;/h6&gt;  
                          |&lt;/div&gt;
              div(class="col-span-6 xl:col-span-12")
                .grid.grid-cols-12.card-gap 
                  .col-span-12
                    .card
                      .card-header
                        h5 Positioned Badges
                        p.f-m-light.mt-1 
                          | Use utilities to modify a 
                          code badge 
                          | and position it in the corner of a link or 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
                      .card-body
                        .badge-flex 
                          button.btn.btn-primary.relative.text-white(type='button')
                            | Inbox 
                            span.absolute.translate-middle.badge.bg-danger(class="text-[10px] left-[100%] top-[0px]")
                              | 99+
                          button.btn.text-white.btn-info.relative.badge-square(type='button')
                            i.fa-brands.fa-x-twitter 
                            span.absolute.translate-middle.badge.rounded-full.bg-danger(class="text-[10px] left-[100%] top-[0px]")
                              | 8 
                          button.btn.btn-primary.relative.text-white(type='button')
                            | Profile
                            span.absolute.translate-middle.bg-danger.border.border-light.rounded-full.badge-p-5(class="text-[10px] left-[100%] top-[0px]")
                              span(class="!hidden") New alerts
                          button.btn.btn-info.relative.badge-square.text-white(type='button')
                            i.fa-brands.fa-linkedin-in
                            span.absolute.translate-middle.badge-p-5.bg-danger.border.border-light.rounded-full(class="text-[10px] left-[100%] top-[0px]")
                              span(class="!hidden") New alerts 
                          button.btn.btn-success.relative.badge-square.text-white(type='button')
                            i.fa-solid.fa-comments
                            span.absolute.translate-middle.badge-p-5.bg-danger.border.border-light.rounded-full(class="text-[10px] left-[100%] top-[0px]")
                              span(class="!hidden") New alerts
                          button.btn.btn-info.relative.badge-square.text-white(type='button')
                            i.fa-brands.fa-x-twitter
                            span.absolute.translate-middle.badge-p-5.bg-danger.border.border-light.rounded-full(class="text-[10px] left-[100%] top-[0px]")
                              span(class="!hidden") New alerts 
                        .code-box-copy 
                          button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#position-badge', title='Copy')
                            i.icofont.icofont-copy-alt
                          pre.custom-scrollbar
                            code.language-html#position-badge
                              |&lt;div class="badge-flex"&gt;
                              |  &lt;button class="btn text-white rounded btn-primary relative" type="button"&gt;Inbox
                              |    &lt;span class="absolute text-[10px] left-[88%] top-[-5px] translate-middle badge rounded-full bg-danger"&gt;99+&lt;/span&gt;
                              |  &lt;/button&gt;
                              |  &lt;button class="btn text-white rounded btn-primary relative" type="button"&gt;Inbox
                              |    &lt;span class="absolute text-[10px] left-[88%] top-[-5px] translate-middle badge rounded-full bg-danger"&gt;99+&lt;/span&gt;
                              |  &lt;/button&gt;
                              |  &lt;button class="btn text-white rounded btn-info relative badge-square" type="button"&gt;
                              |    &lt;i class="fa-brands fa-twitter"&gt;&lt;/i&gt;
                              |    &lt;span class="absolute text-[10px] left-[88%] top-[-5px] translate-middle badge rounded-full bg-danger"&gt;8&lt;/span&gt;
                              |  &lt;/button&gt;
                              |  &lt;button class="btn text-white rounded btn-primary relative" type="button"&gt;Profile
                              |    &lt;span class="absolute text-[10px] left-[88%] top-[-5px] translate-middle bg-danger border border-light rounded-full badge-p-5"&gt;
                              |      &lt;span class="visually-hidden"&gt;New alerts&lt;/span&gt;
                              |    &lt;/span&gt;
                              |  &lt;/button&gt;
                              |  &lt;button class="btn text-white rounded btn-info relative badge-square" type="button"&gt;
                              |    &lt;i class="fa-brands fa-linkedin-in"&gt;&lt;/i&gt;
                              |    &lt;span class="absolute text-[10px] left-[88%] top-[-5px] translate-middle badge-p-5 bg-danger border border-light rounded-full"&gt;
                              |      &lt;span class="visually-hidden"&gt;New alerts&lt;/span&gt;
                              |    &lt;/span&gt;
                              |  &lt;/button&gt;
                              |  &lt;button class="btn text-white rounded btn-success relative badge-square" type="button"&gt;
                              |    &lt;i class="fa-solid fa-comments"&gt;&lt;/i&gt;
                              |    &lt;span class="absolute text-[10px] left-[88%] top-[-5px] translate-middle badge-p-5 bg-danger border border-light rounded-full"&gt;
                              |      &lt;span class="visually-hidden"&gt;New alerts&lt;/span&gt;
                              |    &lt;/span&gt;
                              |  &lt;/button&gt; 
                              |  &lt;button class="btn text-white rounded btn-info relative badge-square" type="button"&gt;
                              |    &lt;i class="fa-brands fa-twitter"&gt;&lt;/i&gt;
                              |    &lt;span class="absolute text-[10px] left-[88%] top-[-5px] translate-middle badge-p-5 bg-danger border border-light rounded-full"&gt;
                              |      &lt;span class="visually-hidden"&gt;New alerts&lt;/span&gt;
                              |    &lt;/span&gt;
                              |  &lt;/button&gt; 
                              |&lt;/div&gt;
                  .col-span-12
                    .card 
                      .card-header
                        h5 Button Badges
                        p.f-m-light.mt-1 
                          code  badge  
                          |  can be used as part of links or buttons to provide a counter.
                        .card-header-right
                          ul.list-unstyled.card-option
                            li
                              i.fa-solid.fa-gear.fa-spin
                            li
                              i.view-html.fa-solid.fa-code
                            li
                              i.icofont.icofont-maximize.full-card
                            li
                              i.icofont.icofont-minus.minimize-card
                            li
                              i.icofont.icofont-refresh.reload-card
                            li
                              i.icofont.icofont-error.close-card
                      .card-body
                        .badge-flex
                          button.btn.btn-primary.text-white
                            | Notifications 
                            span.badge.text-bg-danger.ms-2.text-white 4
                          button.btn.button-light-primary
                            | Sale
                            span.badge.text-bg-danger.ms-2.text-white 9
                          button.btn.border-dashed-primary
                            | Instagram 
                            span.badge.text-bg-danger.ms-2.text-white 6
                          button.btn.btn-pill.button-light-info.txt-info.rounded-full
                            | LinkedIn 
                            span.badge.text-bg-info.ms-2.txt-light 3
                        .code-box-copy
                          button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#button-badge', title='Copy')
                            i.icofont.icofont-copy-alt
                          pre.custom-scrollbar 
                            code.language-html#button-badge
                              |&lt;div class="badge-flex"&gt;
                              |  &lt;button class="btn btn-primary rounded"&gt;Notifications
                              |    &lt;span class="badge text-bg-danger ms-2"&gt;4&lt;/span&gt;
                              |  &lt;/button&gt;
                              |  &lt;button class="btn button-light-primary rounded"&gt;Sale
                              |    &lt;span class="badge text-bg-danger rounded-full ms-2"&gt;9&lt;/span&gt;
                              |  &lt;/button&gt;
                              |  &lt;button class="btn border-dashed-primary rounded"&gt;Instagram
                              |    &lt;span class="badge text-bg-danger ms-2"&gt;6&lt;/span&gt;
                              |  &lt;/button&gt;
                              |  &lt;button class="btn btn-pill button-light-info txt-info rounded"&gt;LinkedIn
                              |    &lt;span class="badge text-bg-info rounded-full ms-2 txt-light"&gt;3&lt;/span&gt;
                              |  &lt;/button&gt;
                              |&lt;/div&gt;
              div(class="col-span-6 xl:col-span-12") 
                .card 
                  .card-header
                    h5 Image Badges
                    p.f-m-light.mt-1 
                      | Use
                      code  image-badges 
                      | class to set image 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
                  .card-body
                    .badge-spacing.image-badges
                      span.badge.common-align.txt-primary.badge-l-primary.rounded-full.border.border-primary
                        img.rounded-full.me-1(src="../assets/images/dashboard-9/user/5.png", alt="user")
                        | Primary
                      span.badge.common-align.txt-secondary.badge-l-secondary.rounded-full.border.border-secondary
                        img.rounded-full.me-1(src="../assets/images/dashboard-9/user/2.png", alt="user")
                        | Secondary 
                      span.badge.common-align.txt-success.badge-l-success.rounded-full.border.border-success
                        img.rounded-full.me-1(src="../assets/images/dashboard-9/user/3.png", alt="user")
                        | Success 
                      span.badge.common-align.txt-danger.badge-l-danger.rounded-full.border.border-danger
                        img.rounded-full.me-1(src="../assets/images/dashboard-9/user/4.png", alt="user")
                        | Danger
                      span.badge.common-align.txt-warning.badge-l-warning.rounded-full.border.border-warning
                        img.rounded-full.me-1(src="../assets/images/dashboard/user/11.jpg", alt="user")
                        | Warning
                      span.badge.common-align.txt-info.badge-l-info.rounded-full.border.border-info
                        img.rounded-full.me-1(src="../assets/images/dashboard/user/4.jpg", alt="user")
                        | Info
                      span.badge.common-align.txt-light.badge-l-light.rounded-full.border.border-light
                        img.rounded-full.me-1(src="../assets/images/dashboard/user/10.jpg", alt="user")
                        | Light
                      span.badge.common-align.txt-dark.badge-l-dark.rounded-full.border.border-dark
                        img.rounded-full.me-1(src="../assets/images/dashboard/user/7.jpg", alt="user")
                        | Dark
                    .code-box-copy 
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#image-badges', title='Copy')
                        i.icofont.icofont-copy-alt
                      pre.custom-scrollbar 
                        code.language-html#image-badges
                          |&lt;div class="badge-spacing image-badges"&gt;
                          |  &lt;span class="badge common-align txt-primary  badge-l-primary rounded border border-primary"&gt;
                          |    &lt;img class="rounded me-1" src="../assets/images/dashboard-9/user/5.png" alt="user"&gt;Primary
                          |  &lt;/span&gt;
                          |  &lt;span class="badge common-align txt-secondary  badge-l-secondary rounded border border-secondary"&gt;
                          |    &lt;img class="rounded me-1" src="../assets/images/dashboard-9/user/2.png" alt="user"&gt;Secondary
                          |  &lt;/span&gt;
                          |  &lt;span class="badge common-align txt-success  badge-l-success rounded border border-success"&gt;
                          |    &lt;img class="rounded me-1" src="../assets/images/dashboard-9/user/3.png" alt="user"&gt;Success
                          |  &lt;/span&gt;
                          |  &lt;span class="badge common-align txt-danger  badge-l-danger rounded border border-danger"&gt;
                          |    &lt;img class="rounded me-1" src="../assets/images/dashboard-9/user/4.png" alt="user"&gt;Danger
                          |  &lt;/span&gt;
                          |  &lt;span class="badge common-align txt-warning badge-l-warning rounded border border-warning"&gt;
                          |    &lt;img class="rounded me-1" src="../assets/images/dashboard/user/11.jpg" alt="user"&gt;Warning
                          |  &lt;/span&gt;
                          |  &lt;span class="badge common-align txt-info rounded badge-l-info  border border-info"&gt;
                          |    &lt;img class="rounded me-1" src="../assets/images/dashboard/user/4.jpg" alt="user"&gt;Info
                          |  &lt;/span&gt;
                          |  &lt;span class="badge common-align txt-light rounded badge-l-light  border border-light"&gt;
                          |    &lt;img class="rounded me-1" src="../assets/images/dashboard/user/10.jpg" alt="user"&gt;Light
                          |  &lt;/span&gt;
                          |  &lt;span class="badge common-align txt-dark rounded badge-l-dark border border-dark"&gt;
                          |    &lt;img class="rounded me-1" src="../assets/images/dashboard/user/7.jpg" alt="user"&gt;Dark
                          |  &lt;/span&gt;
                          |&lt;/div&gt;
              div(class="col-span-6 xl:col-span-12") 
                .card
                  .card-header
                    h5 Close Badges
                    p.f-m-light.mt-1 
                      | Use
                      code  badge-l-*
                      | classes to provide background-colors and 
                      code border-* 
                      | classes to provide border-colors.
                    .card-header-right
                      ul.list-unstyled.card-option
                        li
                          i.fa-solid.fa-gear.fa-spin
                        li
                          i.view-html.fa-solid.fa-code
                        li
                          i.icofont.icofont-maximize.full-card
                        li
                          i.icofont.icofont-minus.minimize-card
                        li
                          i.icofont.icofont-refresh.reload-card
                        li
                          i.icofont.icofont-error.close-card
                  .card-body
                    .badge-spacing.image-badges
                      span.badge.common-align.txt-primary.badge-l-primary.rounded-full.border.border-primary
                        | Primary   
                        a(href="#!")
                          i.ms-1.stroke-primary(data-feather='x-circle') 
                      span.badge.common-align.txt-secondary.badge-l-secondary.rounded-full.border.border-secondary
                        | Secondary   
                        a(href="#!") 
                          i.ms-1.stroke-secondary(data-feather='x-circle') 
                      span.badge.common-align.txt-success.badge-l-success.rounded-full.border.border-success
                        | Success   
                        a(href="#!") 
                          i.ms-1.stroke-success(data-feather='x-circle') 
                      span.badge.common-align.txt-danger.badge-l-danger.rounded-full.border.border-danger
                        | Danger   
                        a(href="#!") 
                          i.ms-1.stroke-danger(data-feather='x-circle') 
                      span.badge.common-align.txt-warning.badge-l-warning.rounded-full.border.border-warning
                        | Warning   
                        a(href="#!") 
                          i.ms-1.stroke-warning(data-feather='x-circle') 
                      span.badge.common-align.txt-info.badge-l-info.rounded-full.border.border-info
                        | Info   
                        a(href="#!") 
                          i.ms-1.stroke-info(data-feather='x-circle') 
                      span.badge.common-align.txt-light.badge-l-light.rounded-full.border.border-light
                        | Light   
                        a(href="#!") 
                          i.ms-1.stroke-light(data-feather='x-circle') 
                      span.badge.common-align.txt-dark.badge-l-dark.rounded-full.border.border-dark
                        | Dark   
                        a(href="#!")  
                          i.ms-1.stroke-dark(data-feather='x-circle')
                      .code-box-copy
                        button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#close-badges', title='Copy')
                          i.icofont.icofont-copy-alt
                        pre.custom-scrollbar
                          code.language-html#close-badges
                            |&lt;div class="badge-spacing image-badges"&gt;
                            |  &lt;span class="badge common-align txt-primary  badge-l-primary rounded-full border border-primary"&gt;Primary
                            |    &lt;a href="#!"&gt;
                            |      &lt;i class="ms-1 stroke-primary" data-feather="x-circle"&gt;&lt;/i&gt;
                            |    &lt;/a&gt;
                            |  &lt;/span&gt;
                            |  &lt;span class="badge common-align txt-secondary  badge-l-secondary rounded-full border border-secondary"&gt;Secondary
                            |    &lt;a href="#!"&gt;
                            |      &lt;i class="ms-1 stroke-secondary" data-feather="x-circle"&gt;&lt;/i&gt;
                            |    &lt;/a&gt;
                            |  &lt;/span&gt;
                            |  &lt;span class="badge common-align txt-success  badge-l-success rounded-full border border-success"&gt;Success
                            |    &lt;a href="#!"&gt;
                            |      &lt;i class="ms-1 stroke-success" data-feather="x-circle"&gt;&lt;/i&gt;
                            |    &lt;/a&gt;
                            |  &lt;/span&gt;
                            |  &lt;span class="badge common-align txt-danger badge-l-danger rounded-full border border-danger"&gt;Danger
                            |    &lt;a href="#!"&gt;
                            |      &lt;i class="ms-1 stroke-danger" data-feather="x-circle"&gt;&lt;/i&gt;
                            |    &lt;/a&gt;
                            |  &lt;/span&gt;
                            |  &lt;span class="badge common-align txt-warning badge-l-warning rounded-full border border-warning"&gt;Warning
                            |    &lt;a href="#!"&gt;
                            |      &lt;i class="ms-1 stroke-warning" data-feather="x-circle"&gt;&lt;/i&gt;
                            |    &lt;/a&gt;
                            |  &lt;/span&gt;
                            |  &lt;span class="badge common-align txt-info badge-l-info rounded-full border border-info"&gt;Info
                            |    &lt;a href="#!"&gt;
                            |      &lt;i class="ms-1 stroke-info" data-feather="x-circle"&gt;&lt;/i&gt;
                            |    &lt;/a&gt;
                            |  &lt;/span&gt;
                            |  &lt;span class="badge common-align txt-light badge-l-light rounded-full border border-light"&gt;Light
                            |    &lt;a href="#!"&gt;
                            |      &lt;i class="ms-1 stroke-light" data-feather="x-circle"&gt;&lt;/i&gt;
                            |    &lt;/a&gt;
                            |  &lt;/span&gt;
                            |  &lt;span class="badge common-align txt-dark badge-l-dark rounded-full border border-dark"&gt;Dark
                            |    &lt;a href="#!"&gt;
                            |      &lt;i class="ms-1 stroke-dark" data-feather="x-circle"&gt;&lt;/i&gt;
                            |    &lt;/a&gt;
                            |  &lt;/span&gt;
                            |&lt;/div&gt;
              .col-span-12 
                .card
                  .card-header
                    h5 Image with Close Badges
                    p.f-m-light.mt-1 
                      | Use
                      code  badge-l-* 
                      | classes to provide background-color. and 
                      code vr 
                      | classes to partitions.
                    .card-header-right
                      ul.list-unstyled.card-option
                        li
                          i.fa-solid.fa-gear.fa-spin
                        li
                          i.view-html.fa-solid.fa-code
                        li
                          i.icofont.icofont-maximize.full-card
                        li
                          i.icofont.icofont-minus.minimize-card
                        li
                          i.icofont.icofont-refresh.reload-card
                        li
                          i.icofont.icofont-error.close-card
                  .card-body
                    .badge-spacing.image-badges
                      span.badge.common-align.txt-primary.badge-l-primary.rounded-full.border.border-primary
                        img.rounded-full.me-1(src="../assets/images/dashboard/user/1.jpg", alt="user")
                        | Primary
                        span.vr.mx-2
                        a(href="#!") 
                          i.stroke-primary(data-feather='x-circle')  
                      span.badge.common-align.txt-secondary.badge-l-secondary.rounded-full.border.border-secondary
                        img.rounded-full.me-1(src="../assets/images/dashboard/user/2.jpg", alt="user")
                        | Secondary   
                        span.vr.mx-2
                        a(href="#!") 
                          i.stroke-secondary(data-feather='x-circle') 
                      span.badge.common-align.txt-success.badge-l-success.rounded-full.border.border-success
                        img.rounded-full.me-1(src="../assets/images/dashboard/user/3.jpg", alt="user")
                        | Success   
                        span.vr.mx-2
                        a(href="#!") 
                          i.stroke-success(data-feather='x-circle') 
                      span.badge.common-align.txt-danger.badge-l-danger.rounded-full.border.border-danger
                        img.rounded-full.me-1(src="../assets/images/dashboard/user/5.jpg", alt="user")
                        | Danger 
                        span.vr.mx-2
                        a(href="#!") 
                          i.stroke-danger(data-feather='x-circle') 
                      span.badge.common-align.txt-warning.badge-l-warning.rounded-full.border.border-warning
                        img.rounded-full.me-1(src="../assets/images/dashboard/user/6.jpg", alt="user")
                        | Warning    
                        span.vr.mx-2
                        a(href="#!") 
                          i.stroke-warning(data-feather='x-circle') 
                      span.badge.common-align.txt-info.badge-l-info.rounded-full.border.border-info
                        img.rounded-full.me-1(src="../assets/images/dashboard/user/12.jpg", alt="user")
                        | Info   
                        span.vr.mx-2
                        a(href="#!") 
                          i.stroke-info(data-feather='x-circle') 
                      span.badge.common-align.txt-light.badge-l-light.rounded-full.border.border-light
                        img.rounded-full.me-1(src="../assets/images/user/3.png", alt="user")
                        | Light   
                        span.vr.mx-2
                        a(href="#!") 
                          i.stroke-light(data-feather='x-circle') 
                      span.badge.common-align.txt-dark.badge-l-dark.rounded-full.border.border-dark
                        img.rounded-full.me-1(src="../assets/images/user/6.jpg", alt="user")
                        | Dark 
                        span.vr.mx-2
                        a(href="#!") 
                          i.stroke-dark(data-feather='x-circle') 
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#img-close-badges', title='Copy')
                        i.icofont.icofont-copy-alt
                      pre.custom-scrollbar
                        code.language-html#img-close-badges 
                          |&lt;div class="badge-spacing image-badges"&gt;
                          |  &lt;span class="badge common-align txt-primary  badge-l-primary rounded-full border border-primary"&gt;
                          |    &lt;img class="rounded-full me-1" src="../assets/images/dashboard/user/1.jpg" alt="user"&gt;Primary
                          |    &lt;span class="vr mx-2"&gt;&lt;/span&gt;
                          |    &lt;a href="#!"&gt;
                          |      &lt;i class="stroke-primary" data-feather="x-circle"&gt;&lt;/i&gt;
                          |    &lt;/a&gt;
                          |  &lt;/span&gt;
                          |  &lt;span class="badge common-align txt-secondary rounded-full badge-l-secondary  border border-secondary"&gt;
                          |    &lt;img class="rounded-full me-1" src="../assets/images/dashboard/user/2.jpg" alt="user"&gt;Secondary
                          |    &lt;span class="vr mx-2"&gt;&lt;/span&gt;
                          |    &lt;a href="#!"&gt;
                          |      &lt;i class="stroke-secondary" data-feather="x-circle"&gt;&lt;/i&gt;
                          |    &lt;/a&gt;
                          |  &lt;/span&gt;
                          |  &lt;span class="badge common-align txt-success rounded-full badge-l-success border border-success"&gt;
                          |    &lt;img class="rounded-full me-1" src="../assets/images/dashboard/user/3.jpg" alt="user"&gt;Success
                          |    &lt;span class="vr mx-2"&gt;&lt;/span&gt;
                          |    &lt;a href="#!"&gt;
                          |      &lt;i class="stroke-success" data-feather="x-circle"&gt;&lt;/i&gt;
                          |    &lt;/a&gt;
                          |  &lt;/span&gt;
                          |  &lt;span class="badge common-align txt-danger rounded-full badge-l-danger  border border-danger"&gt;
                          |    &lt;img class="rounded-full me-1" src="../assets/images/dashboard/user/5.jpg" alt="user"&gt;Danger
                          |    &lt;span class="vr mx-2"&gt;&lt;/span&gt;
                          |    &lt;a href="#!"&gt;
                          |      &lt;i class="stroke-danger" data-feather="x-circle"&gt;&lt;/i&gt;
                          |    &lt;/a&gt;
                          |  &lt;/span&gt;
                          |  &lt;span class="badge common-align txt-warning  badge-l-warning rounded-full border border-warning"&gt;
                          |    &lt;img class="rounded-full me-1" src="../assets/images/dashboard/user/6.jpg" alt="user"&gt;Warning
                          |    &lt;span class="vr mx-2"&gt;&lt;/span&gt;
                          |    &lt;a href="#!"&gt;
                          |      &lt;i class="stroke-warning" data-feather="x-circle"&gt;&lt;/i&gt;
                          |    &lt;/a&gt;
                          |  &lt;/span&gt;
                          |  &lt;span class="badge common-align txt-info rounded-full badge-l-info  border border-info"&gt;
                          |    &lt;img class="rounded-full me-1" src="../assets/images/dashboard/user/12.jpg" alt="user"&gt;Info
                          |    &lt;span class="vr mx-2"&gt;&lt;/span&gt;
                          |    &lt;a href="#!"&gt;
                          |      &lt;i class="stroke-info" data-feather="x-circle"&gt;&lt;/i&gt;
                          |    &lt;/a&gt;
                          |  &lt;/span&gt;
                          |  &lt;span class="badge common-align txt-light rounded-full badge-l-light  border border-light"&gt;
                          |    &lt;img class="rounded-full me-1" src="../assets/images/user/3.png" alt="user"&gt;Light
                          |    &lt;span class="vr mx-2"&gt;&lt;/span&gt;
                          |    &lt;a href="#!"&gt;
                          |      &lt;i class="stroke-light" data-feather="x-circle"&gt;&lt;/i&gt;
                          |    &lt;/a&gt;
                          |  &lt;/span&gt;
                          |  &lt;span class="badge common-align txt-dark rounded-full badge-l-dark  border border-dark"&gt;
                          |    &lt;img class="rounded-full me-1" src="../assets/images/user/6.jpg" alt="user"&gt;Dark
                          |    &lt;span class="vr mx-2"&gt;&lt;/span&gt;
                          |    &lt;a href="#!"&gt;
                          |      &lt;i class="stroke-dark" data-feather="x-circle"&gt;&lt;/i&gt;
                          |    &lt;/a&gt;
                          |  &lt;/span&gt;
                          |&lt;/div&gt; 
          // Container-fluid Ends  
        include ../../components/footer
      include ../../components/footer-files 