- var prism                 = true;
- var clipboard             = true;
- var customcard            = true;
- var theme_customizer      = true;
- var sidebar               = true;
- var scrollbar             = 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
                                      | Raised Buttons
                                    ol.breadcrumb
                                      li.breadcrumb-item
                                        a(href='index.html')
                                         | Home
                                      li.breadcrumb-item Buttons
                                      li.breadcrumb-item.active Raised Style
                                .col-sm-6
                                  include ../../components/bookmark
                    // Container-fluid starts
                    .container-fluid
                      .row
                        .col-sm-12
                          .card
                            .card-header.pb-0
                              h5 Default buttons
                              .setting-list
                                ul.list-unstyled.setting-option
                                  li
                                    .setting-primary
                                     i.icon-settings
                                  li
                                    i.view-html.fa.fa-code.font-primary
                                  li
                                    i.icofont.icofont-maximize.full-card.font-primary
                                  li
                                    i.icofont.icofont-minus.minimize-card.font-primary
                                  li
                                    i.icofont.icofont-refresh.reload-card.font-primary
                                  li
                                    i.icofont.icofont-error.close-card.font-primary 
                              span
                                | Add 
                                code .btn-pill
                                |  and 
                                code .btn-air-*
                                |  class  for raised button
                            .card-body.btn-showcase
                              button.btn.btn-pill.btn-primary.btn-air-primary(type='button' title='btn btn-pill btn-primary btn-air-primary') Primary Button
                              button.btn.btn-pill.btn-secondary.btn-air-secondary(type='button' title='btn btn-pill btn-secondary btn-air-secondary') Secondary Button
                              button.btn.btn-pill.btn-success.btn-air-success(type='button' title='btn btn-pill btn-success btn-air-success') Success Button
                              button.btn.btn-pill.btn-info.btn-air-info(type='button' title='btn btn-pill btn-info btn-air-info') Info Button
                              button.btn.btn-pill.btn-warning.btn-air-warning(type='button' title='btn btn-pill btn-warning btn-air-warning') Warning Button
                              button.btn.btn-pill.btn-danger.btn-air-danger(type='button' title='btn btn-pill btn-danger btn-air-danger') Danger Button
                              button.btn.btn-pill.btn-light.btn-air-light(type='button' title='btn btn-pill btn-light btn-air-light') Light Button
                              .code-box-copy
                                button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head', title='Copy')
                                  i.icofont.icofont-copy-alt
                                pre
                                  code.language-html#example-head
                                    | &lt;!-- Cod Box Copy begin --&gt;
                                    | &lt;button type=&quot;button&quot; class=&quot;btn btn-pill btn-primary btn-air-primary&quot;&gt;Primary button&lt;/button&gt;
                                    | &lt;button type=&quot;button&quot; class=&quot;btn btn-pill btn-secondary btn-air-secondary&quot;&gt;Secondary button&lt;/button&gt;
                                    | &lt;button type=&quot;button&quot; class=&quot;btn btn-pill btn-success btn-air-success&quot;&gt;Success button&lt;/button&gt;
                                    | &lt;button type=&quot;button&quot; class=&quot;btn btn-pill btn-info btn-air-info&quot;&gt;Info button&lt;/button&gt;
                                    | &lt;button type=&quot;button&quot; class=&quot;btn btn-pill btn-warning btn-air-warning&quot;&gt;Warning button&lt;/button&gt;
                                    | &lt;button type=&quot;button&quot; class=&quot;btn btn-pill btn-danger btn-air-danger&quot;&gt;Danger button&lt;/button&gt;
                                    | &lt;button type=&quot;button&quot; class=&quot;btn btn-pill btn-light btn-air-light&quot;&gt;Light button&lt;/button&gt;
                                    | &lt;!-- Cod Box Copy end --&gt;
                          .card
                            .card-header.pb-0
                              h5 Large buttons
                              .setting-list
                                ul.list-unstyled.setting-option
                                  li
                                    .setting-primary
                                     i.icon-settings
                                  li
                                    i.view-html.fa.fa-code.font-primary
                                  li
                                    i.icofont.icofont-maximize.full-card.font-primary
                                  li
                                    i.icofont.icofont-minus.minimize-card.font-primary
                                  li
                                    i.icofont.icofont-refresh.reload-card.font-primary
                                  li
                                    i.icofont.icofont-error.close-card.font-primary 
                              span
                                | Add 
                                code .btn-pill
                                | ,
                                code .btn-air-*
                                |  and 
                                code .btn-lg
                                |  class for large button
                            .card-body.btn-showcase
                              button.btn.btn-pill.btn-primary.btn-air-primary.btn-lg(type='button' title='btn btn-pill btn-primary btn-air-primary btn-lg') Primary Button
                              button.btn.btn-pill.btn-secondary.btn-air-secondary.btn-lg(type='button' title='btn btn-pill btn-secondary btn-air-secondary btn-lg') Secondary Button
                              button.btn.btn-pill.btn-success.btn-air-success.btn-lg(type='button' title='btn btn-pill btn-success btn-air-success btn-lg') Success Button
                              button.btn.btn-pill.btn-info.btn-air-info.btn-lg(type='button' title='btn btn-pill btn-info btn-air-info btn-lg') Info Button
                              button.btn.btn-pill.btn-warning.btn-air-warning.btn-lg(type='button' title='btn btn-pill btn-warning btn-air-warning btn-lg') Warning Button
                              button.btn.btn-pill.btn-danger.btn-air-danger.btn-lg(type='button' title='btn btn-pill btn-danger btn-air-danger btn-lg') Danger Button
                              button.btn.btn-pill.btn-light.btn-air-light.btn-lg(type='button' title='btn btn-pill btn-light btn-air-light btn-lg') 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
                                  code.language-html#example-head1
                                    | &lt;!-- Cod Box Copy begin --&gt;
                                    | &lt;button type=&quot;button&quot; class=&quot;btn btn-pill btn-primary btn-air-primary btn-lg&quot;&gt;Primary button&lt;/button&gt;
                                    | &lt;button type=&quot;button&quot; class=&quot;btn btn-pill btn-secondary btn-air-secondary btn-lg&quot;&gt;Secondary button&lt;/button&gt;
                                    | &lt;button type=&quot;button&quot; class=&quot;btn btn-pill btn-success btn-air-success btn-lg&quot;&gt;Success button&lt;/button&gt;
                                    | &lt;button type=&quot;button&quot; class=&quot;btn btn-pill btn-info btn-air-info btn-lg&quot;&gt;Info button&lt;/button&gt;
                                    | &lt;button type=&quot;button&quot; class=&quot;btn btn-pill btn-warning btn-air-warning btn-lg&quot;&gt;Warning button&lt;/button&gt;
                                    | &lt;button type=&quot;button&quot; class=&quot;btn btn-pill btn-danger btn-air-danger btn-lg&quot;&gt;Danger button&lt;/button&gt;
                                    | &lt;button type=&quot;button&quot; class=&quot;btn btn-pill btn-light btn-air-light btn-lg&quot;&gt;Light button&lt;/button&gt;
                                    | &lt;!-- Cod Box Copy end --&gt;
                          .card
                            .card-header.pb-0
                              h5 Small buttons
                              .setting-list
                                ul.list-unstyled.setting-option
                                  li
                                    .setting-primary
                                     i.icon-settings
                                  li
                                    i.view-html.fa.fa-code.font-primary
                                  li
                                    i.icofont.icofont-maximize.full-card.font-primary
                                  li
                                    i.icofont.icofont-minus.minimize-card.font-primary
                                  li
                                    i.icofont.icofont-refresh.reload-card.font-primary
                                  li
                                    i.icofont.icofont-error.close-card.font-primary 
                              span
                                | Add 
                                code .btn-pill
                                | ,
                                code .btn-air-*
                                |  and 
                                code .btn-sm
                                |  class for small button
                            .card-body.btn-showcase
                              button.btn.btn-pill.btn-primary.btn-air-primary.btn-sm(type='button' title='btn btn-pill btn-primary btn-air-primary btn-sm') Primary Button
                              button.btn.btn-pill.btn-secondary.btn-air-secondary.btn-sm(type='button' title='btn btn-pill btn-secondary btn-air-secondary btn-sm') Secondary Button
                              button.btn.btn-pill.btn-success.btn-air-success.btn-sm(type='button' title='btn btn-pill btn-success btn-air-success btn-sm') Success Button
                              button.btn.btn-pill.btn-info.btn-air-info.btn-sm(type='button' title='btn btn-pill btn-info btn-air-info btn-sm') Info Button
                              button.btn.btn-pill.btn-warning.btn-air-warning.btn-sm(type='button' title='btn btn-pill btn-warning btn-air-warning btn-sm') Warning Button
                              button.btn.btn-pill.btn-danger.btn-air-danger.btn-sm(type='button' title='btn btn-pill btn-danger btn-air-danger btn-sm') Danger Button
                              button.btn.btn-pill.btn-light.btn-air-light.btn-sm(type='button' title='btn btn-pill btn-light btn-air-light btn-sm') 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
                                  code.language-html#example-head2
                                    | &lt;!-- Cod Box Copy begin --&gt;
                                    | &lt;button type=&quot;button&quot; class=&quot;btn btn-pill btn-primary btn-air-primary btn-sm&quot;&gt;Primary button&lt;/button&gt;
                                    | &lt;button type=&quot;button&quot; class=&quot;btn btn-pill btn-secondary btn-air-secondary btn-sm&quot;&gt;Secondary button&lt;/button&gt;
                                    | &lt;button type=&quot;button&quot; class=&quot;btn btn-pill btn-success btn-air-success btn-sm&quot;&gt;Success button&lt;/button&gt;
                                    | &lt;button type=&quot;button&quot; class=&quot;btn btn-pill btn-info btn-air-info btn-sm&quot;&gt;Info button&lt;/button&gt;
                                    | &lt;button type=&quot;button&quot; class=&quot;btn btn-pill btn-warning btn-air-warning btn-sm&quot;&gt;Warning button&lt;/button&gt;
                                    | &lt;button type=&quot;button&quot; class=&quot;btn btn-pill btn-danger btn-air-danger btn-sm&quot;&gt;Danger button&lt;/button&gt;
                                    | &lt;button type=&quot;button&quot; class=&quot;btn btn-pill btn-light btn-air-light btn-sm&quot;&gt;Light button&lt;/button&gt;
                                    | &lt;!-- Cod Box Copy end --&gt;
                          .card
                            .card-header.pb-0
                              h5 Extra Small buttons
                              .setting-list
                                ul.list-unstyled.setting-option
                                  li
                                    .setting-primary
                                     i.icon-settings
                                  li
                                    i.view-html.fa.fa-code.font-primary
                                  li
                                    i.icofont.icofont-maximize.full-card.font-primary
                                  li
                                    i.icofont.icofont-minus.minimize-card.font-primary
                                  li
                                    i.icofont.icofont-refresh.reload-card.font-primary
                                  li
                                    i.icofont.icofont-error.close-card.font-primary 
                              span
                                | Add 
                                code .btn-pill
                                | ,
                                code .btn-air-*
                                |  and 
                                code .btn-xs
                                |  class for extra small button
                            .card-body.btn-showcase
                              button.btn.btn-pill.btn-primary.btn-air-primary.btn-xs(type='button' title='btn btn-pill btn-primary btn-air-primary btn-xs') Primary Button
                              button.btn.btn-pill.btn-secondary.btn-air-secondary.btn-xs(type='button' title='btn btn-pill btn-secondary btn-air-secondary btn-xs') Secondary Button
                              button.btn.btn-pill.btn-success.btn-air-success.btn-xs(type='button' title='btn btn-pill btn-success btn-air-success btn-xs') Success Button
                              button.btn.btn-pill.btn-info.btn-air-info.btn-xs(type='button' title='btn btn-pill btn-info btn-air-info btn-xs') Info Button
                              button.btn.btn-pill.btn-warning.btn-air-warning.btn-xs(type='button' title='btn btn-pill btn-warning btn-air-warning btn-xs') Warning Button
                              button.btn.btn-pill.btn-danger.btn-air-danger.btn-xs(type='button' title='btn btn-pill btn-danger btn-air-danger btn-xs') Danger Button
                              button.btn.btn-pill.btn-light.btn-air-light.btn-xs(type='button' title='btn btn-pill btn-light btn-air-light btn-xs') Light Button
                              .code-box-copy
                                button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head3', title='Copy')
                                  i.icofont.icofont-copy-alt
                                pre
                                  code.language-html#example-head3
                                    | &lt;!-- Cod Box Copy begin --&gt;
                                    | &lt;button type=&quot;button&quot; class=&quot;btn btn-pill btn-primary btn-air-primary btn-xs&quot;&gt;Primary button&lt;/button&gt;
                                    | &lt;button type=&quot;button&quot; class=&quot;btn btn-pill btn-secondary btn-air-secondary btn-xs&quot;&gt;Secondary button&lt;/button&gt;
                                    | &lt;button type=&quot;button&quot; class=&quot;btn btn-pill btn-success btn-air-success btn-xs&quot;&gt;Success button&lt;/button&gt;
                                    | &lt;button type=&quot;button&quot; class=&quot;btn btn-pill btn-info btn-air-info btn-xs&quot;&gt;Info button&lt;/button&gt;
                                    | &lt;button type=&quot;button&quot; class=&quot;btn btn-pill btn-warning btn-air-warning btn-xs&quot;&gt;Warning button&lt;/button&gt;
                                    | &lt;button type=&quot;button&quot; class=&quot;btn btn-pill btn-danger btn-air-danger btn-xs&quot;&gt;Danger button&lt;/button&gt;
                                    | &lt;button type=&quot;button&quot; class=&quot;btn btn-pill btn-light btn-air-light btn-xs&quot;&gt;Light button&lt;/button&gt;
                                    | &lt;!-- Cod Box Copy end --&gt;
                          .card
                            .card-header.pb-0
                              h5 Active Buttons
                              .setting-list
                                ul.list-unstyled.setting-option
                                  li
                                    .setting-primary
                                     i.icon-settings
                                  li
                                    i.view-html.fa.fa-code.font-primary
                                  li
                                    i.icofont.icofont-maximize.full-card.font-primary
                                  li
                                    i.icofont.icofont-minus.minimize-card.font-primary
                                  li
                                    i.icofont.icofont-refresh.reload-card.font-primary
                                  li
                                    i.icofont.icofont-error.close-card.font-primary 
                              span
                                | Add 
                                code .active
                                |  for active state
                            .card-body.btn-showcase
                              button.btn.btn-pill.btn-primary.btn-air-primary.active(type='button' title='btn btn-pill btn-primary btn-air-primary active') Active
                              button.btn.btn-pill.btn-secondary.btn-air-secondary.active(type='button' title='btn btn-pill btn-secondary btn-air-secondary active') Active
                              button.btn.btn-pill.btn-success.btn-air-success.active(type='button' title='btn btn-pill btn-success btn-air-success active') Active
                              button.btn.btn-pill.btn-info.btn-air-info.active(type='button' title='btn btn-pill btn-info btn-air-info active') Active
                              button.btn.btn-pill.btn-warning.btn-air-warning.active(type='button' title='btn btn-pill btn-warning btn-air-warning active') Active
                              button.btn.btn-pill.btn-danger.btn-air-danger.active(type='button' title='btn btn-pill btn-danger btn-air-danger active') Active
                              button.btn.btn-pill.btn-light.btn-air-light.active.txt-dark(type='button' title='btn btn-pill btn-light btn-air-light active') Active
                              .code-box-copy
                                button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head4', title='Copy')
                                  i.icofont.icofont-copy-alt
                                pre
                                  code.language-html#example-head4
                                    | &lt;!-- Cod Box Copy begin --&gt;
                                    | &lt;button type=&quot;button&quot; class=&quot;btn btn-pill btn-primary btn-air-primary active&quot;&gt;Active&lt;/button&gt;
                                    | &lt;button type=&quot;button&quot; class=&quot;btn btn-pill btn-secondary btn-air-secondary active&quot;&gt;Active&lt;/button&gt;
                                    | &lt;button type=&quot;button&quot; class=&quot;btn btn-pill btn-success btn-air-success active&quot;&gt;Active&lt;/button&gt;
                                    | &lt;button type=&quot;button&quot; class=&quot;btn btn-pill btn-info btn-air-info active&quot;&gt;Active&lt;/button&gt;
                                    | &lt;button type=&quot;button&quot; class=&quot;btn btn-pill btn-warning btn-air-warning active&quot;&gt;Active&lt;/button&gt;
                                    | &lt;button type=&quot;button&quot; class=&quot;btn btn-pill btn-danger btn-air-danger active&quot;&gt;Active&lt;/button&gt;
                                    | &lt;button type=&quot;button&quot; class=&quot;btn btn-pill btn-light btn-air-light active txt-dark&quot;&gt;Active&lt;/button&gt;
                                    | &lt;!-- Cod Box Copy end --&gt;
                          .card
                            .card-header.pb-0
                              h5 Disabled buttons
                              .setting-list
                                ul.list-unstyled.setting-option
                                  li
                                    .setting-primary
                                     i.icon-settings
                                  li
                                    i.view-html.fa.fa-code.font-primary
                                  li
                                    i.icofont.icofont-maximize.full-card.font-primary
                                  li
                                    i.icofont.icofont-minus.minimize-card.font-primary
                                  li
                                    i.icofont.icofont-refresh.reload-card.font-primary
                                  li
                                    i.icofont.icofont-error.close-card.font-primary 
                              span
                                | Add 
                                code .disabled
                                |  class or 
                                code disabled="disabled"
                                |  attribute for disabled button
                            .card-body.btn-showcase
                              button.btn.btn-pill.btn-primary.btn-air-primary.disabled(type='button') Disabled
                              button.btn.btn-pill.btn-secondary.btn-air-secondary.disabled(type='button') Disabled
                              button.btn.btn-pill.btn-success.btn-air-success.disabled(type='button') Disabled
                              button.btn.btn-pill.btn-info.btn-air-info.disabled(type='button') Disabled
                              button.btn.btn-pill.btn-warning.btn-air-warning.disabled(type='button') Disabled
                              button.btn.btn-pill.btn-danger.btn-air-danger.disabled(type='button') Disabled
                              button.btn.btn-pill.btn-light.btn-air-light.disabled(type='button') Disabled
                              .code-box-copy
                                button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head5', title='Copy')
                                  i.icofont.icofont-copy-alt
                                pre
                                  code.language-html#example-head5
                                    | &lt;!-- Cod Box Copy begin --&gt;
                                    | &lt;button type=&quot;button&quot; class=&quot;btn btn-pill btn-primary btn-air-primary disabled&quot;&gt;Disabled&lt;/button&gt;
                                    | &lt;button type=&quot;button&quot; class=&quot;btn btn-pill btn-secondary btn-air-secondary disabled&quot;&gt;Disabled&lt;/button&gt;
                                    | &lt;button type=&quot;button&quot; class=&quot;btn btn-pill btn-success btn-air-success disabled&quot;&gt;Disabled&lt;/button&gt;
                                    | &lt;button type=&quot;button&quot; class=&quot;btn btn-pill btn-info btn-air-info disabled&quot;&gt;Disabled&lt;/button&gt;
                                    | &lt;button type=&quot;button&quot; class=&quot;btn btn-pill btn-warning btn-air-warning disabled&quot;&gt;Disabled&lt;/button&gt;
                                    | &lt;button type=&quot;button&quot; class=&quot;btn btn-pill btn-danger btn-air-danger disabled&quot;&gt;Disabled&lt;/button&gt;
                                    | &lt;button type=&quot;button&quot; class=&quot;btn btn-pill btn-light btn-air-light disabled txt-dark&quot;&gt;Disabled&lt;/button&gt;
                                    | &lt;!-- Cod Box Copy end --&gt;
                          .card
                            .card-header.pb-0
                              h5 Custom state buttons
                              .setting-list
                                ul.list-unstyled.setting-option
                                  li
                                    .setting-primary
                                     i.icon-settings
                                  li
                                    i.view-html.fa.fa-code.font-primary
                                  li
                                    i.icofont.icofont-maximize.full-card.font-primary
                                  li
                                    i.icofont.icofont-minus.minimize-card.font-primary
                                  li
                                    i.icofont.icofont-refresh.reload-card.font-primary
                                  li
                                    i.icofont.icofont-error.close-card.font-primary 
                              span
                                | The 
                                code .btn
                                |  class used with 
                                code &lt;button&gt;
                                | , 
                                code &lt;a&gt;
                                |  and 
                                code &lt;input&gt;
                                |  elements.
                            .card-body.btn-showcase
                              a.btn.btn-pill.btn-primary.btn-air-primary(href='#', data-toggle='tooltip', title='btn btn-primary', role='button') Link
                              input.btn.btn-pill.btn-secondary.btn-air-secondary.btn-air-secondary(type='button', value='Input', data-toggle='tooltip', title='btn btn-secondary')
                              input.btn.btn-pill.btn-success.btn-air-success.btn-air-success(type='submit', value='Submit', data-toggle='tooltip', title='btn btn-success')
                              button.btn.btn-pill.btn-info.btn-air-info.btn-air-info(type='submit', title='btn btn-info') Button
                              .code-box-copy
                                button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head6', title='Copy')
                                  i.icofont.icofont-copy-alt
                                pre
                                  code.language-html#example-head6
                                    | &lt;!-- Cod Box Copy begin --&gt;
                                    | &lt;a class=&quot;btn btn-pill btn-primary btn-air-primary&quot; href=&quot;#&quot; data-bs-toggle=&quot;tooltip;&quot; title=&quot;btn btn-primary&quot; role=&quot;button&quot;&gt;link&lt;/button&gt;
                                    | &lt;input class=&quot;btn btn-pill btn-primary btn-air-primary&quot; type=&quot;button&quot; value=&quot;Input&quot;  data-bs-toggle=&quot;tooltip;&quot; title=&quot;btn btn-secondary&quot;&gt;
                                    | &lt;input class=&quot;btn btn-pill btn-success btn-air-success&quot; type=&quot;submit&quot; value=&quot;Submit&quot; data-bs-toggle=&quot;tooltip&quot; title=&quot;btn btn-success&quot;&gt;
                                    | &lt;button class=&quot;btn btn-pill btn-info btn-air-info&quot; type=&quot;submit&quot;&gt;Button&lt;/button&gt;
                                    | &lt;!-- Cod Box Copy end --&gt;
                          .card
                            .card-header.pb-0
                              h5 outline buttons
                              .setting-list
                                ul.list-unstyled.setting-option
                                  li
                                    .setting-primary
                                     i.icon-settings
                                  li
                                    i.view-html.fa.fa-code.font-primary
                                  li
                                    i.icofont.icofont-maximize.full-card.font-primary
                                  li
                                    i.icofont.icofont-minus.minimize-card.font-primary
                                  li
                                    i.icofont.icofont-refresh.reload-card.font-primary
                                  li
                                    i.icofont.icofont-error.close-card.font-primary 
                              span
                                | Add 
                                code .btn-pill
                                | ,
                                code .btn-air-*
                                |  and 
                                code .btn-outline-*
                                |  class for button with outline
                            .card-body.btn-showcase
                              button.btn.btn-pill.btn-outline-primary.btn-air-primary(type='button' title='btn btn-pill btn-outline-primary btn-air-primary') Primary Button
                              button.btn.btn-pill.btn-outline-secondary.btn-air-secondary(type='button' title='btn btn-pill btn-outline-secondary btn-air-secondary') Secondary Button
                              button.btn.btn-pill.btn-outline-success.btn-air-success(type='button' title='btn btn-pill btn-outline-success btn-air-success') Success Button
                              button.btn.btn-pill.btn-outline-info.btn-air-info(type='button' title='btn btn-pill btn-outline-info btn-air-info') Info Button
                              button.btn.btn-pill.btn-outline-warning.btn-air-warning(type='button' title='btn btn-pill btn-outline-warning btn-air-warning') Warning Button
                              button.btn.btn-pill.btn-outline-danger.btn-air-danger(type='button' title='btn btn-pill btn-outline-danger btn-air-danger') Danger Button
                              button.btn.btn-pill.btn-outline-light.btn-air-light.txt-dark(type='button' title='btn btn-pill btn-outline-light btn-air-light') Light Button
                              .code-box-copy
                                button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head7', title='Copy')
                                  i.icofont.icofont-copy-alt
                                pre
                                  code.language-html#example-head7
                                    | &lt;!-- Cod Box Copy begin --&gt;
                                    | &lt;button type=&quot;button&quot; class=&quot;btn btn-pill btn-outline-primary btn-air-primary&quot;&gt;Primary button&lt;/button&gt;
                                    | &lt;button type=&quot;button&quot; class=&quot;btn btn-pill btn-outline-secondary btn-air-secondary&quot;&gt;Secondary button&lt;/button&gt;
                                    | &lt;button type=&quot;button&quot; class=&quot;btn btn-pill btn-outline-success btn-air-success&quot;&gt;Success button&lt;/button&gt;
                                    | &lt;button type=&quot;button&quot; class=&quot;btn btn-pill btn-outline-info btn-air-info&quot;&gt;Info button&lt;/button&gt;
                                    | &lt;button type=&quot;button&quot; class=&quot;btn btn-pill btn-outline-warning btn-air-warning&quot;&gt;Warning button&lt;/button&gt;
                                    | &lt;button type=&quot;button&quot; class=&quot;btn btn-pill btn-outline-danger btn-air-danger&quot;&gt;Danger button&lt;/button&gt;
                                    | &lt;button type=&quot;button&quot; class=&quot;btn btn-pill btn-outline-light btn-air-light txt-dark&quot;&gt;Light button&lt;/button&gt;
                                    | &lt;!-- Cod Box Copy end --&gt;
                          .card
                            .card-header.pb-0
                              h5 bold Border outline buttons
                              .setting-list
                                ul.list-unstyled.setting-option
                                  li
                                    .setting-primary
                                     i.icon-settings
                                  li
                                    i.view-html.fa.fa-code.font-primary
                                  li
                                    i.icofont.icofont-maximize.full-card.font-primary
                                  li
                                    i.icofont.icofont-minus.minimize-card.font-primary
                                  li
                                    i.icofont.icofont-refresh.reload-card.font-primary
                                  li
                                    i.icofont.icofont-error.close-card.font-primary 
                              span
                                | Add 
                                code .btn-pill
                                | ,
                                code .btn-air-*
                                |  and 
                                code .btn-outline-*-2x
                                |  class for button with bold outline
                            .card-body.btn-showcase
                              button.btn.btn-pill.btn-outline-primary-2x.btn-air-primary(type='button' title='btn btn-pill btn-outline-primary-2x btn-air-primary') Primary Button
                              button.btn.btn-pill.btn-outline-secondary-2x.btn-air-secondary(type='button' title='btn btn-pill btn-outline-secondary-2x btn-air-secondary') Secondary Button
                              button.btn.btn-pill.btn-outline-success-2x.btn-air-success(type='button' title='btn btn-pill btn-outline-success-2x btn-air-success') Success Button
                              button.btn.btn-pill.btn-outline-info-2x.btn-air-info(type='button' title='btn btn-pill btn-outline-info-2x btn-air-info') Info Button
                              button.btn.btn-pill.btn-outline-warning-2x.btn-air-warning(type='button' title='btn btn-pill btn-outline-warning-2x btn-air-warning') Warning Button
                              button.btn.btn-pill.btn-outline-danger-2x.btn-air-danger(type='button' title='btn btn-pill btn-outline-danger-2x btn-air-danger') Danger Button
                              button.btn.btn-pill.btn-outline-light-2x.btn-air-light.txt-dark(type='button' title='btn btn-pill btn-outline-light-2x btn-air-light') Light Button
                              .code-box-copy
                                button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head8', title='Copy')
                                  i.icofont.icofont-copy-alt
                                pre
                                  code.language-html#example-head8
                                    | &lt;!-- Cod Box Copy begin --&gt;
                                    | &lt;button type=&quot;button&quot; class=&quot;btn btn-pill btn-outline-primary-2x btn-air-primary&quot;&gt;Primary button&lt;/button&gt;
                                    | &lt;button type=&quot;button&quot; class=&quot;btn btn-pill btn-outline-secondary-2x btn-air-secondary&quot;&gt;Secondary button&lt;/button&gt;
                                    | &lt;button type=&quot;button&quot; class=&quot;btn btn-pill btn-outline-success-2x btn-air-success&quot;&gt;Success button&lt;/button&gt;
                                    | &lt;button type=&quot;button&quot; class=&quot;btn btn-pill btn-outline-info-2x btn-air-info&quot;&gt;Info button&lt;/button&gt;
                                    | &lt;button type=&quot;button&quot; class=&quot;btn btn-pill btn-outline-warning-2x btn-air-warning&quot;&gt;Warning button&lt;/button&gt;
                                    | &lt;button type=&quot;button&quot; class=&quot;btn btn-pill btn-outline-danger-2x btn-air-danger&quot;&gt;Danger button&lt;/button&gt;
                                    | &lt;button type=&quot;button&quot; class=&quot;btn btn-pill btn-outline-light-2x btn-air-light txt-dark&quot;&gt;Light button&lt;/button&gt;
                                    | &lt;!-- Cod Box Copy end --&gt;
                          .card
                            .card-header.pb-0
                              h5 outline Large buttons
                              .setting-list
                                ul.list-unstyled.setting-option
                                  li
                                    .setting-primary
                                     i.icon-settings
                                  li
                                    i.view-html.fa.fa-code.font-primary
                                  li
                                    i.icofont.icofont-maximize.full-card.font-primary
                                  li
                                    i.icofont.icofont-minus.minimize-card.font-primary
                                  li
                                    i.icofont.icofont-refresh.reload-card.font-primary
                                  li
                                    i.icofont.icofont-error.close-card.font-primary 
                              span
                                code .btn-pill
                                | ,
                                code .btn-air-*
                                | ,
                                code .btn-outline-*
                                |  and 
                                code .btn-lg
                                |  class for large button with outline
                            .card-body.btn-showcase
                              button.btn.btn-pill.btn-outline-primary.btn-air-primary.btn-lg(type='button' title='btn btn-pill btn-outline-primary btn-air-primary btn-lg') Primary Button
                              button.btn.btn-pill.btn-outline-secondary.btn-air-secondary.btn-lg(type='button' title='btn btn-pill btn-outline-secondary btn-air-secondary btn-lg') Secondary Button
                              button.btn.btn-pill.btn-outline-success.btn-air-success.btn-lg(type='button' title='btn btn-pill btn-outline-success btn-air-success btn-lg') Success Button
                              button.btn.btn-pill.btn-outline-info.btn-air-info.btn-lg(type='button' title='btn btn-pill btn-outline-info btn-air-info btn-lg') Info Button
                              button.btn.btn-pill.btn-outline-warning.btn-air-warning.btn-lg(type='button' title='btn btn-pill btn-outline-warning btn-air-warning btn-lg') Warning Button
                              button.btn.btn-pill.btn-outline-danger.btn-air-danger.btn-lg(type='button' title='btn btn-pill btn-outline-danger btn-air-danger btn-lg') Danger Button
                              button.btn.btn-pill.btn-outline-light.btn-air-light.btn-lg.txt-dark(type='button' title='btn btn-pill btn-outline-light btn-air-light btn-lg') Light Button
                              .code-box-copy
                                button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head9', title='Copy')
                                  i.icofont.icofont-copy-alt
                                pre
                                  code.language-html#example-head9
                                    | &lt;!-- Cod Box Copy begin --&gt;
                                    | &lt;button type=&quot;button&quot; class=&quot;btn btn-pill btn-outline-primary btn-air-primary btn-lg&quot;&gt;Primary button&lt;/button&gt;
                                    | &lt;button type=&quot;button&quot; class=&quot;btn btn-pill btn-outline-secondary btn-air-secondary btn-lg&quot;&gt;Secondary button&lt;/button&gt;
                                    | &lt;button type=&quot;button&quot; class=&quot;btn btn-pill btn-outline-success btn-air-success btn-lg&quot;&gt;Success button&lt;/button&gt;
                                    | &lt;button type=&quot;button&quot; class=&quot;btn btn-pill btn-outline-info btn-air-info btn-lg&quot;&gt;Info button&lt;/button&gt;
                                    | &lt;button type=&quot;button&quot; class=&quot;btn btn-pill btn-outline-warning btn-air-warning btn-lg&quot;&gt;Warning button&lt;/button&gt;
                                    | &lt;button type=&quot;button&quot; class=&quot;btn btn-pill btn-outline-danger btn-air-danger btn-lg&quot;&gt;Danger button&lt;/button&gt;
                                    | &lt;button type=&quot;button&quot; class=&quot;btn btn-pill btn-outline-light btn-air-light btn-lg txt-dark&quot;&gt;Light button&lt;/button&gt;
                                    | &lt;!-- Cod Box Copy end --&gt;
                          .card
                            .card-header.pb-0
                              h5 outline small buttons
                              .setting-list
                                ul.list-unstyled.setting-option
                                  li
                                    .setting-primary
                                     i.icon-settings
                                  li
                                    i.view-html.fa.fa-code.font-primary
                                  li
                                    i.icofont.icofont-maximize.full-card.font-primary
                                  li
                                    i.icofont.icofont-minus.minimize-card.font-primary
                                  li
                                    i.icofont.icofont-refresh.reload-card.font-primary
                                  li
                                    i.icofont.icofont-error.close-card.font-primary 
                              span
                                code .btn-pill
                                | ,
                                code .btn-air-*
                                | ,
                                code .btn-outline-*
                                |  and 
                                code .btn-sm
                                |  class for small button with outline
                            .card-body.btn-showcase
                              button.btn.btn-pill.btn-outline-primary.btn-air-primary.btn-sm(type='button' title='btn btn-pill btn-outline-primary btn-air-primary btn-sm') Primary Button
                              button.btn.btn-pill.btn-outline-secondary.btn-air-secondary.btn-sm(type='button' title='btn btn-pill btn-outline-secondary btn-air-secondary btn-sm') Secondary Button
                              button.btn.btn-pill.btn-outline-success.btn-air-success.btn-sm(type='button' title='btn btn-pill btn-outline-success btn-air-success btn-sm') Success Button
                              button.btn.btn-pill.btn-outline-info.btn-air-info.btn-sm(type='button' title='btn btn-pill btn-outline-info btn-air-info btn-sm') Info Button
                              button.btn.btn-pill.btn-outline-warning.btn-air-warning.btn-sm(type='button' title='btn btn-pill btn-outline-warning btn-air-warning btn-sm') Warning Button
                              button.btn.btn-pill.btn-outline-danger.btn-air-danger.btn-sm(type='button' title='btn btn-pill btn-outline-danger btn-air-danger btn-sm') Danger Button
                              button.btn.btn-pill.btn-outline-light.btn-air-light.btn-sm.txt-dark(type='button' title='btn btn-pill btn-outline-light btn-air-light btn-sm') Light Button
                              .code-box-copy
                                button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head10', title='Copy')
                                  i.icofont.icofont-copy-alt
                                pre
                                  code.language-html#example-head10
                                    | &lt;!-- Cod Box Copy begin --&gt;
                                    | &lt;button type=&quot;button&quot; class=&quot;btn btn-pill btn-outline-primary btn-air-primary btn-sm&quot;&gt;Primary button&lt;/button&gt;
                                    | &lt;button type=&quot;button&quot; class=&quot;btn btn-pill btn-outline-secondary btn-air-secondary btn-sm&quot;&gt;Secondary button&lt;/button&gt;
                                    | &lt;button type=&quot;button&quot; class=&quot;btn btn-pill btn-outline-success btn-air-success btn-sm&quot;&gt;Success button&lt;/button&gt;
                                    | &lt;button type=&quot;button&quot; class=&quot;btn btn-pill btn-outline-info btn-air-info btn-sm&quot;&gt;Info button&lt;/button&gt;
                                    | &lt;button type=&quot;button&quot; class=&quot;btn btn-pill btn-outline-warning btn-air-warning btn-sm&quot;&gt;Warning button&lt;/button&gt;
                                    | &lt;button type=&quot;button&quot; class=&quot;btn btn-pill btn-outline-danger btn-air-danger btn-sm&quot;&gt;Danger button&lt;/button&gt;
                                    | &lt;button type=&quot;button&quot; class=&quot;btn btn-pill btn-outline-light btn-air-light btn-sm txt-dark&quot;&gt;Light button&lt;/button&gt;
                                    | &lt;!-- Cod Box Copy end --&gt;
                          .card
                            .card-header.pb-0
                              h5 outline extra small buttons
                              .setting-list
                                ul.list-unstyled.setting-option
                                  li
                                    .setting-primary
                                     i.icon-settings
                                  li
                                    i.view-html.fa.fa-code.font-primary
                                  li
                                    i.icofont.icofont-maximize.full-card.font-primary
                                  li
                                    i.icofont.icofont-minus.minimize-card.font-primary
                                  li
                                    i.icofont.icofont-refresh.reload-card.font-primary
                                  li
                                    i.icofont.icofont-error.close-card.font-primary 
                              span
                                code .btn-pill
                                | ,
                                code .btn-air-*
                                | ,
                                code .btn-outline-*
                                |  and 
                                code .btn-xs
                                |  class for extra small button with outline
                            .card-body.btn-showcase
                              button.btn.btn-pill.btn-outline-primary.btn-air-primary.btn-xs(type='button' title='btn btn-pill btn-outline-primary btn-air-primary btn-xs') Primary Button
                              button.btn.btn-pill.btn-outline-secondary.btn-air-secondary.btn-xs(type='button' title='btn btn-pill btn-outline-secondary btn-air-secondary btn-xs') Secondary Button
                              button.btn.btn-pill.btn-outline-success.btn-air-success.btn-xs(type='button' title='btn btn-pill btn-outline-success btn-air-success btn-xs') Success Button
                              button.btn.btn-pill.btn-outline-info.btn-air-info.btn-xs(type='button' title='btn btn-pill btn-outline-info btn-air-info btn-xs') Info Button
                              button.btn.btn-pill.btn-outline-warning.btn-air-warning.btn-xs(type='button' title='btn btn-pill btn-outline-warning btn-air-warning btn-xs') Warning Button
                              button.btn.btn-pill.btn-outline-danger.btn-air-danger.btn-xs(type='button' title='btn btn-pill btn-outline-danger btn-air-danger btn-xs') Danger Button
                              button.btn.btn-pill.btn-outline-light.btn-air-light.btn-xs.txt-dark(type='button' title='btn btn-pill btn-outline-light btn-air-light btn-xs') Light Button
                              .code-box-copy
                                button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head11', title='Copy')
                                  i.icofont.icofont-copy-alt
                                pre
                                  code.language-html#example-head11
                                    | &lt;!-- Cod Box Copy begin --&gt;
                                    | &lt;button type=&quot;button&quot; class=&quot;btn btn-pill btn-outline-primary btn-air-primary btn-xs&quot;&gt;Primary button&lt;/button&gt;
                                    | &lt;button type=&quot;button&quot; class=&quot;btn btn-pill btn-outline-secondary btn-air-secondary btn-xs&quot;&gt;Secondary button&lt;/button&gt;
                                    | &lt;button type=&quot;button&quot; class=&quot;btn btn-pill btn-outline-success btn-air-success btn-xs&quot;&gt;Success button&lt;/button&gt;
                                    | &lt;button type=&quot;button&quot; class=&quot;btn btn-pill btn-outline-info btn-air-info btn-xs&quot;&gt;Info button&lt;/button&gt;
                                    | &lt;button type=&quot;button&quot; class=&quot;btn btn-pill btn-outline-warning btn-air-warning btn-xs&quot;&gt;warning button&lt;/button&gt;
                                    | &lt;button type=&quot;button&quot; class=&quot;btn btn-pill btn-outline-danger btn-air-danger btn-xs&quot;&gt;Danger button&lt;/button&gt;
                                    | &lt;button type=&quot;button&quot; class=&quot;btn btn-pill btn-outline-light btn-air-light btn-xs txt-dark&quot;&gt;Light button&lt;/button&gt;
                                    | &lt;!-- Cod Box Copy end --&gt;
                          .card
                            .card-header.pb-0
                              h5 Disabled outline buttons
                              .setting-list
                                ul.list-unstyled.setting-option
                                  li
                                    .setting-primary
                                     i.icon-settings
                                  li
                                    i.view-html.fa.fa-code.font-primary
                                  li
                                    i.icofont.icofont-maximize.full-card.font-primary
                                  li
                                    i.icofont.icofont-minus.minimize-card.font-primary
                                  li
                                    i.icofont.icofont-refresh.reload-card.font-primary
                                  li
                                    i.icofont.icofont-error.close-card.font-primary 
                              span
                                | Add 
                                code .disabled
                                |  class or 
                                code disabled="disabled"
                                |  attribute for disabled button
                            .card-body.btn-showcase
                              button.btn.btn-pill.btn-outline-primary.btn-air-primary.disabled(type='button') Disabled
                              button.btn.btn-pill.btn-outline-secondary.btn-air-secondary.disabled(type='button') Disabled
                              button.btn.btn-pill.btn-outline-success.btn-air-success.disabled(type='button') Disabled
                              button.btn.btn-pill.btn-outline-info.btn-air-info.disabled(type='button') Disabled
                              button.btn.btn-pill.btn-outline-warning.btn-air-warning.disabled(type='button') Disabled
                              button.btn.btn-pill.btn-outline-danger.btn-air-danger.disabled(type='button') Disabled
                              button.btn.btn-pill.btn-outline-light.btn-air-light.disabled.txt-dark(type='button') Disabled
                              .code-box-copy
                                button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head12', title='Copy')
                                  i.icofont.icofont-copy-alt
                                pre
                                  code.language-html#example-head12
                                    | &lt;!-- Cod Box Copy begin --&gt;
                                    | &lt;button type=&quot;button&quot; class=&quot;btn btn-pill btn-outline-primary btn-air-primary disabled&quot;&gt;Disabled&lt;/button&gt;
                                    | &lt;button type=&quot;button&quot; class=&quot;btn btn-pill btn-outline-secondary btn-air-secondary disabled&quot;&gt;Disabled&lt;/button&gt;
                                    | &lt;button type=&quot;button&quot; class=&quot;btn btn-pill btn-outline-success btn-air-success disabled&quot;&gt;Disabled&lt;/button&gt;
                                    | &lt;button type=&quot;button&quot; class=&quot;btn btn-pill btn-outline-info btn-air-info disabled&quot;&gt;Disabled&lt;/button&gt;
                                    | &lt;button type=&quot;button&quot; class=&quot;btn btn-pill btn-outline-warning btn-air-warning disabled&quot;&gt;Disabled&lt;/button&gt;
                                    | &lt;button type=&quot;button&quot; class=&quot;btn btn-pill btn-outline-danger btn-air-danger disabled&quot;&gt;Disabled&lt;/button&gt;
                                    | &lt;button type=&quot;button&quot; class=&quot;btn btn-pill btn-outline-light btn-air-light disabled txt-dark&quot;&gt;Disabled&lt;/button&gt;
                                    | &lt;!-- Cod Box Copy end --&gt;
                          .card
                            .card-header.pb-0
                              h5 Gradien buttons
                              .setting-list
                                ul.list-unstyled.setting-option
                                  li
                                    .setting-primary
                                     i.icon-settings
                                  li
                                    i.view-html.fa.fa-code.font-primary
                                  li
                                    i.icofont.icofont-maximize.full-card.font-primary
                                  li
                                    i.icofont.icofont-minus.minimize-card.font-primary
                                  li
                                    i.icofont.icofont-refresh.reload-card.font-primary
                                  li
                                    i.icofont.icofont-error.close-card.font-primary 
                              span
                                code .btn-pill
                                | ,
                                code .btn-air-*
                                | ,
                                code .btn-*
                                |  and 
                                code .btn-*-gradien
                                |  class for gradien button
                            .card-body.btn-showcase
                              button.btn.btn-pill.btn-air-primary.btn-primary-gradien(type='button' title='btn btn-pill btn-air-primary btn-primary-gradien') Primary Button
                              button.btn.btn-pill.btn-air-secondary.btn-secondary-gradien(type='button' title='btn btn-pill btn-air-secondary btn-secondary-gradien') Secondary Button
                              button.btn.btn-pill.btn-air-success.btn-success-gradien(type='button' title='btn btn-pill btn-air-success btn-success-gradien') Success Button
                              button.btn.btn-pill.btn-air-info.btn-info-gradien(type='button' title='btn btn-pill btn-air-info btn-info-gradien') Info Button
                              button.btn.btn-pill.btn-air-warning.btn-warning-gradien(type='button' title='btn btn-pill btn-air-warning btn-warning-gradien') Warning Button
                              button.btn.btn-pill.btn-air-danger.btn-danger-gradien(type='button' title='btn btn-pill btn-air-danger btn-danger-gradien') Danger Button
                              button.btn.btn-pill.btn-air-light.btn-light-gradien.txt-dark(type='button' title='btn btn-pill btn-air-light btn-light-gradien') Light Button
                              .code-box-copy
                                button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head13', title='Copy')
                                  i.icofont.icofont-copy-alt
                                pre
                                  code.language-html#example-head13
                                    | &lt;!-- Cod Box Copy begin --&gt;
                                    | &lt;button type=&quot;button&quot; class=&quot;btn btn-pill btn-primary btn-air-primary btn-primary-gradien&quot;&gt;Primary button&lt;/button&gt;
                                    | &lt;button type=&quot;button&quot; class=&quot;btn btn-pill btn-secondary btn-air-secondary btn-secondary-gradien&quot;&gt;Secondary button&lt;/button&gt;
                                    | &lt;button type=&quot;button&quot; class=&quot;btn btn-pill btn-success btn-air-success btn-success-gradien&quot;&gt;Success button&lt;/button&gt;
                                    | &lt;button type=&quot;button&quot; class=&quot;btn btn-pill btn-info btn-air-info btn-info-gradien&quot;&gt;Info button&lt;/button&gt;
                                    | &lt;button type=&quot;button&quot; class=&quot;btn btn-pill btn-warning btn-air-warning btn-warning-gradien&quot;&gt;warning button&lt;/button&gt;
                                    | &lt;button type=&quot;button&quot; class=&quot;btn btn-pill btn-danger btn-air-danger btn-danger-gradien&quot;&gt;Danger button&lt;/button&gt;
                                    | &lt;button type=&quot;button&quot; class=&quot;btn btn-pill btn-light btn-air-light btn-light-gradien txt-dark&quot;&gt;Light button&lt;/button&gt;
                                    | &lt;!-- Cod Box Copy end --&gt;
                    // Container-fluid Ends
                include ../../components/footer
        include ../../components/footer-files