- 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
                                      | Typography
                                    ol.breadcrumb
                                      li.breadcrumb-item
                                        a(href='index.html')
                                         | Home
                                      li.breadcrumb-item Base
                                      li.breadcrumb-item.active Typography
                                .col-sm-6
                                  include ../../components/bookmark
                    // Container-fluid starts
                    .container-fluid
                      .row
                        .col-sm-12
                          .card
                            .card-header.pb-0
                              h5 Headings
                              span
                                | All HTML headings, 
                                code &lt;h1&gt;
                                |  through 
                                code &lt;h6&gt;
                                | , are available.
                            .card-body.typography
                              .row
                                .col-sm-12.col-xl-6
                                  h1 This is a Heading 1
                                  h2 This is a Heading 2
                                  h3 This is a Heading 3
                                  h4 This is a Heading 4
                                  h5 This is a Heading 5
                                  h6 This is a Heading 6
                                .col-sm-12.col-xl-6
                                  p.h1.txt-primary
                                    | Heading 1
                                    small Sub Heading
                                  p.h2.txt-secondary
                                    | Heading 2
                                    small Sub Heading
                                  p.h3.txt-success
                                    | Heading 3
                                    small Sub Heading
                                  p.h4.txt-info
                                    | Heading 4
                                    small Sub Heading
                                  p.h5.txt-warning
                                    | Heading 5
                                    small Sub Heading
                                  p.h6.txt-danger
                                    | Heading 6
                                    small Sub Heading
                        .col-sm-12.col-xl-4
                          .card
                            .card-header.pb-0
                              h5 Very Thin (100)
                            .card-body.typography
                              h1.f-w-100 Heading 1
                              h2.f-w-100 Heading 2
                              h3.f-w-100 Heading 3
                              h4.f-w-100 Heading 4
                              h5.f-w-100 Heading 5
                              h6.f-w-100 Heading 6
                        .col-sm-12.col-xl-4
                          .card
                            .card-header.pb-0
                              h5 Thin (300)
                            .card-body.typography
                              h1.f-w-300 Heading 1
                              h2.f-w-300 Heading 2
                              h3.f-w-300 Heading 3
                              h4.f-w-300 Heading 4
                              h5.f-w-300 Heading 5
                              h6.f-w-300 Heading 6
                        .col-sm-12.col-xl-4
                          .card
                            .card-header.pb-0
                              h5 Normal (400)
                            .card-body.typography
                              h1.f-w-400 Heading 1
                              h2.f-w-400 Heading 2
                              h3.f-w-400 Heading 3
                              h4.f-w-400 Heading 4
                              h5.f-w-400 Heading 5
                              h6.f-w-400 Heading 6
                        .col-sm-12.col-xl-4
                          .card
                            .card-header.pb-0
                              h5 light Normal (600)
                            .card-body.typography
                              h1.f-w-600 Heading 1
                              h2.f-w-600 Heading 2
                              h3.f-w-600 Heading 3
                              h4.f-w-600 Heading 4
                              h5.f-w-600 Heading 5
                              h6.f-w-600 Heading 6
                        .col-sm-12.col-xl-4
                          .card
                            .card-header.pb-0
                              h5 Bold (700)
                            .card-body.typography
                              h1.f-w-700 Heading 1
                              h2.f-w-700 Heading 2
                              h3.f-w-700 Heading 3
                              h4.f-w-700 Heading 4
                              h5.f-w-700 Heading 5
                              h6.f-w-700 Heading 6
                        .col-sm-12.col-xl-4
                          .card
                            .card-header.pb-0
                              h5 Extra Bold (900)
                            .card-body.typography
                              h1.f-w-900 Heading 1
                              h2.f-w-900 Heading 2
                              h3.f-w-900 Heading 3
                              h4.f-w-900 Heading 4
                              h5.f-w-900 Heading 5
                              h6.f-w-900 Heading 6
                        .col-sm-12
                          .card
                            .card-header.pb-0
                              h5 Headings
                              span Use the included utility classes to recreate the small secondary heading text.  
                            .card-body.typography
                              h3
                                | Fancy display heading
                                small.text-muted With faded secondary text
                        .col-sm-12
                          .card
                            .card-header.pb-0
                              h5 Display headings
                              span
                                | Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a 
                                strong display heading
                                | —a larger, slightly more opinionated heading style.
                            .card-body.typography
                              h1.display-1 Display 1
                              h1.display-2 Display 2
                              h1.display-3 Display 3
                              h1.display-4 Display 4
                        .col-sm-12
                          .card
                            .card-header.pb-0
                              h5 Lead
                              span
                                | Make a paragraph stand out by adding 
                                code .lead
                                | .
                            .card-body
                              p.lead
                                | Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
                        .col-sm-12.col-xl-6
                          .card
                            .card-header.pb-0
                              h5 Inline text elements
                              span Styling for common inline HTML5 elements.
                            .card-body
                              p
                                | You can use the mark tag to 
                                mark highlight
                                |  text.
                              p
                                del This line of text is meant to be treated as deleted text.
                              p
                                s This line of text is meant to be treated as no longer accurate.
                              p
                                ins This line of text is meant to be treated as an addition to the document.
                              p
                                u This line of text will render as underlined
                              p
                                small This line of text is meant to be treated as fine print.
                              p
                                strong This line rendered as bold text.
                              p
                                em This line rendered as italicized text.
                        .col-sm-12.col-xl-6
                          .card
                            .card-header.pb-0
                              h5 Text Color
                              span You can Give text color by using txt-* class
                            .card-body
                              p.txt-primary
                                | This is Primary text You can archive this adding 
                                code .txt-primary
                                |  class
                              p.txt-secondary
                                | This is Secondary text You can archive this adding 
                                code .txt-secondary
                                |  class
                              p.txt-success
                                | This is Success text You can archive this adding 
                                code .txt-success
                                |  class
                              p.txt-info
                                | This is Info text You can archive this adding 
                                code .txt-info
                                |  class
                              p.txt-warning
                                | This is Warning text You can archive this adding 
                                code .txt-warning
                                |  class
                              p.txt-danger
                                | This is Danger text You can archive this adding 
                                code .txt-danger
                                |  class
                              p.txt-dark
                                | This is Dark text You can archive this adding 
                                code .txt-dark
                                |  class
                              p.txt-primary
                                | This is Primary text You can archive this adding 
                                code .txt-primary
                                |  class
                        .col-sm-12.listing
                          .card
                            .card-header.pb-0
                              h5 Listing Typography
                            .card-body
                              .row
                                .col-sm-12.col-xl-4
                                  h6.sub-title Unorder list
                                  ul
                                    li Lorem ipsum dolor sit amet
                                    li Lorem ipsum dolor sit amet
                                    li Lorem ipsum dolor sit amet
                                    li Lorem ipsum dolor sit amet
                                    li Lorem ipsum dolor sit amet
                                    li Lorem ipsum dolor sit amet
                                    li Lorem ipsum dolor sit amet
                                    li Lorem ipsum dolor sit amet
                                    li Lorem ipsum dolor sit amet
                                    li Lorem ipsum dolor sit amet
                                .col-sm-12.col-xl-4
                                  h6.sub-title Order list
                                  ol
                                    li Lorem ipsum dolor sit amet
                                    li Lorem ipsum dolor sit amet
                                    li Lorem ipsum dolor sit amet
                                    li
                                      ol
                                        li Lorem ipsum dolor sit amet
                                        li Lorem ipsum dolor sit amet
                                        li Lorem ipsum dolor sit amet
                                        li Lorem ipsum dolor sit amet
                                        li Lorem ipsum dolor sit amet
                                    li Lorem ipsum dolor sit amet
                                    li Lorem ipsum dolor sit amet
                                .col-sm-12.col-xl-4
                                  h6.sub-title Order list
                                  dl
                                    dt Lorem ipsum dolor sit amet
                                    dd - ipsum dolor sit amet
                                    dt Lorem ipsum dolor sit amet
                                    dd - ipsum dolor sit amet
                                    dt Lorem ipsum dolor sit amet
                                    dd - ipsum dolor sit amet
                                    dt Lorem ipsum dolor sit amet
                                    dd - ipsum dolor sit amet
                                    dt Lorem ipsum dolor sit amet
                                    dd - ipsum dolor sit amet
                                .col-sm-12.col-xl-4
                                  h6.sub-title Fontawesome list
                                  ul
                                    li
                                      i.fa.fa-angle-double-right.txt-primary.m-r-10
                                      | Lorem ipsum dolor sit amet
                                    li
                                      i.fa.fa-angle-double-right.txt-primary.m-r-10
                                      | Lorem ipsum dolor sit amet
                                    li
                                      i.fa.fa-angle-double-right.txt-primary.m-r-10
                                      | Lorem ipsum dolor sit amet
                                    li
                                      i.fa.fa-angle-double-right.txt-primary.m-r-10
                                      | Lorem ipsum dolor sit amet
                                    li
                                      i.fa.fa-angle-double-right.txt-primary.m-r-10
                                      | Lorem ipsum dolor sit amet
                                    li
                                      i.fa.fa-angle-double-right.txt-primary.m-r-10
                                      | Lorem ipsum dolor sit amet
                                    li
                                      i.fa.fa-angle-double-right.txt-primary.m-r-10
                                      | Lorem ipsum dolor sit amet
                                    li
                                      i.fa.fa-angle-double-right.txt-primary.m-r-10
                                      | Lorem ipsum dolor sit amet
                                .col-sm-12.col-xl-4
                                  h6.sub-title ICO Icon list
                                  ul
                                    li
                                      i.fa.fa-caret-right.txt-secondary.m-r-10
                                      | Lorem ipsum dolor sit amet
                                    li
                                      i.fa.fa-caret-right.txt-secondary.m-r-10
                                      | Lorem ipsum dolor sit amet
                                    li
                                      i.fa.fa-caret-right.txt-secondary.m-r-10
                                      | Lorem ipsum dolor sit amet
                                    li
                                      i.fa.fa-caret-right.txt-secondary.m-r-10
                                      | Lorem ipsum dolor sit amet
                                    li
                                      i.fa.fa-caret-right.txt-secondary.m-r-10
                                      | Lorem ipsum dolor sit amet
                                    li
                                      i.fa.fa-caret-right.txt-secondary.m-r-10
                                      | Lorem ipsum dolor sit amet
                                    li
                                      i.fa.fa-caret-right.txt-secondary.m-r-10
                                      | Lorem ipsum dolor sit amet
                                    li
                                      i.fa.fa-caret-right.txt-secondary.m-r-10
                                      | Lorem ipsum dolor sit amet
                                .col-sm-12.col-xl-4
                                  h6.sub-title Themfy list
                                  ul
                                    li
                                      i.icofont.icofont-ui-rate-add.txt-success.m-r-10
                                      | Lorem ipsum dolor sit amet
                                    li
                                      i.icofont.icofont-ui-rate-add.txt-success.m-r-10
                                      | Lorem ipsum dolor sit amet
                                    li
                                      i.icofont.icofont-ui-rate-add.txt-success.m-r-10
                                      | Lorem ipsum dolor sit amet
                                    li
                                      i.icofont.icofont-ui-rate-add.txt-success.m-r-10
                                      | Lorem ipsum dolor sit amet
                                    li
                                      i.icofont.icofont-ui-rate-add.txt-success.m-r-10
                                      | Lorem ipsum dolor sit amet
                                    li
                                      i.icofont.icofont-ui-rate-add.txt-success.m-r-10
                                      | Lorem ipsum dolor sit amet
                                    li
                                      i.icofont.icofont-ui-rate-add.txt-success.m-r-10
                                      | Lorem ipsum dolor sit amet
                                    li
                                      i.icofont.icofont-ui-rate-add.txt-success.m-r-10
                                      | Lorem ipsum dolor sit amet
                        .col-sm-12
                          .card
                            .card-header.pb-0
                              h5 Blockquotes
                              span
                                | Add a 
                                code &lt;footer class="blockquote-footer"&gt;
                                |  for identifying the source. Wrap the name of the source work in 
                                code &lt;cite&gt;
                                | .
                            .card-body
                              p.sub-title Naming a source
                              .figure.d-block
                                blockquote.blockquote
                                  p.mb-0
                                    | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
                                .blockquote-footer
                                  | Someone famous in 
                                  cite(title='Source Title') Source Title
                              p.sub-title Alignment Center
                              .figure.text-center.d-block
                                blockquote.blockquote
                                  p.mb-0
                                    | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
                                .blockquote-footer
                                  | Someone famous in 
                                  cite(title='Source Title') Source Title
                              p.sub-title Alignment Right
                              .figure.text-end.d-block
                                blockquote.blockquote
                                  p.mb-0
                                    | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
                                .blockquote-footer
                                  | Someone famous in 
                                  cite(title='Source Title') Source Title
                    // Container-fluid Ends
                include ../../components/footer
        include ../../components/footer-files
