- var theme_customizer      = true;
- var tooltip               = true;

doctype html
html(lang='en')
    include ../../components/header-files
    body
        include ../../components/loader
        // page-wrapper Start
        #pageWrapper.page-wrapper
            include ../../components/header
            // Page Body Start
            .page-body-wrapper.horizontal-menu
                include ../../components/sidebar
                .page-body
                    .container-fluid
                        .page-header
                            .row
                                .col-sm-6
                                    h3
                                      | Tag & Pills
                                    ol.breadcrumb
                                      li.breadcrumb-item
                                        a(href='index.html')
                                         | Home
                                      li.breadcrumb-item Base
                                      li.breadcrumb-item.active Tag & Pills
                                .col-sm-6
                                  include ../../components/bookmark
                    // Container-fluid starts
                    .container-fluid
                      .row
                        .col-sm-12.col-md-6
                          .card
                            .card-header.pb-0
                              h5 Contextual variations
                            .card-body
                              span.badge.badge-primary Primary
                              span.badge.badge-secondary Secondary
                              span.badge.badge-success Success
                              span.badge.badge-info Info
                              span.badge.badge-warning.text-dark Warning
                              span.badge.badge-danger Danger
                              span.badge.badge-light.text-dark Light
                              span.badge.badge-dark.tag-pills-sm-mb Dark
                        .col-sm-12.col-md-6
                          .card
                            .card-header.pb-0
                              h5 Contextual variations
                            .card-body
                              span.badge.rounded-pill.badge-primary Primary
                              span.badge.rounded-pill.badge-secondary Secondary
                              span.badge.rounded-pill.badge-success Success
                              span.badge.rounded-pill.badge-info Info
                              span.badge.rounded-pill.badge-warning.text-dark Warning
                              span.badge.rounded-pill.badge-danger Danger
                              span.badge.rounded-pill.badge-light.text-dark Light
                              span.badge.rounded-pill.badge-dark.tag-pills-sm-mb Dark
                        .col-sm-12.col-md-6
                          .card
                            .card-header.pb-0
                              h5 Tags with number
                            .card-body
                              a.badge.badge-primary(href='#') 1
                              a.badge.badge-secondary(href='#') 2
                              a.badge.badge-success(href='#') 3
                              a.badge.badge-info(href='#') 4
                              a.badge.badge-warning.text-dark(href='#') 5
                              a.badge.badge-danger(href='#') 6
                              a.badge.badge-light.text-dark(href='#') 7
                              a.badge.badge-dark(href='#') 8
                        .col-sm-12.col-md-6
                          .card
                            .card-header.pb-0
                              h5 Pills with number
                            .card-body
                              span.badge.rounded-pill.badge-primary 1
                              span.badge.rounded-pill.badge-secondary 2
                              span.badge.rounded-pill.badge-success 3
                              span.badge.rounded-pill.badge-info 4
                              span.badge.rounded-pill.badge-warning.text-dark 5
                              span.badge.rounded-pill.badge-danger 6
                              span.badge.rounded-pill.badge-light.text-dark 7
                              span.badge.rounded-pill.badge-dark 8
                        .col-sm-12.col-md-6
                          .card
                            .card-header.pb-0
                              h5 Tags With icon
                            .card-body
                              a.badge.badge-primary(href='#')
                                i(data-feather='dollar-sign')
                              a.badge.badge-secondary(href='#')
                                i(data-feather='headphones')
                              a.badge.badge-success(href='#')
                                i(data-feather='link')
                              a.badge.badge-info(href='#')
                                i(data-feather='github')
                              a.badge.badge-warning.text-dark(href='#')
                                i(data-feather='award')
                              a.badge.badge-danger(href='#')
                                i(data-feather='activity')
                              a.badge.badge-light.text-dark(href='#')
                                i(data-feather='heart')
                              a.badge.badge-dark(href='#')
                                i(data-feather='mail')
                        .col-sm-12.col-md-6
                          .card
                            .card-header.pb-0
                              h5 Pills with Icon
                            .card-body
                              a.badge.rounded-pill.badge-primary(href='#')
                                i(data-feather='dollar-sign')
                              a.badge.rounded-pill.badge-secondary(href='#')
                                i(data-feather='headphones')
                              a.badge.rounded-pill.badge-success(href='#')
                                i(data-feather='link')
                              a.badge.rounded-pill.badge-info(href='#')
                                i(data-feather='github')
                              a.badge.rounded-pill.badge-warning.text-dark(href='#')
                                i(data-feather='award')
                              a.badge.rounded-pill.badge-danger(href='#')
                                i(data-feather='activity')
                              a.badge.rounded-pill.badge-light.text-dark(href='#')
                                i(data-feather='heart')
                              a.badge.rounded-pill.badge-dark(href='#')
                                i(data-feather='mail')
                        .col-sm-12.col-md-6
                          .card.height-equal
                            .card-header.pb-0
                              h5 Badges Example
                            .card-body
                              h1
                                | heading 
                                span.badge.badge-primary New
                              h2
                                | heading 
                                span.badge.badge-primary New
                              h3
                                | heading 
                                span.badge.badge-primary New
                              h4
                                | heading 
                                span.badge.badge-primary New
                              h5
                                | heading 
                                span.badge.badge-primary New
                              h6
                                | heading 
                                span.badge.badge-primary New
                        .col-sm-12.col-md-6
                          .card.height-equal
                            .card-header.pb-0
                              h5 Badges as part buttons
                            .card-body
                              .mb-3
                                button.btn.btn-primary(type='button')
                                  | Messages 
                                  span.badge.rounded-pill.badge-light.text-dark
                                    i(data-feather='mail')
                              .mb-3
                                button.btn.btn-secondary(type='button')
                                  | notifications 
                                  span.badge.rounded-pill.badge-light.text-dark
                                    i(data-feather='bell')
                              .mb-3
                                button.btn.btn-success(type='button')
                                  | Update available 
                                  span.badge.rounded-pill.badge-light.text-dark
                                    i(data-feather='settings')
                              .mb-3
                                button.btn.btn-info(type='button')
                                  | Playing Now 
                                  span.badge.rounded-pill.badge-light.text-dark
                                    i(data-feather='music')
                              .mb-3
                                button.btn.btn-warning.text-dark(type='button')
                                  | 1.2 GB Used 
                                  span.badge.rounded-pill.badge-light.text-dark
                                    i(data-feather='alert-triangle')
                              div
                                button.btn.btn-danger(type='button')
                                  | Alert 
                                  span.badge.rounded-pill.badge-light.text-dark
                                    i(data-feather='alert-circle')
                    // Container-fluid Ends
                include ../../components/footer
        include ../../components/footer-files   
