- 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 <h1>
| through
code <h6>
| , 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 <footer class="blockquote-footer">
| for identifying the source. Wrap the name of the source work in
code <cite>
| .
.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