• Notifications
      You have 2 unread messages

    • Delivery processing 10 min.

    • Order Complete1 hr

    • Tickets Generated3 hr

    • Delivery Complete6 hr

    • All notification
    • Erica Hughes

      There are many variations of passages...

      1 hr ago

    • Kori Thomas

      There are many variations of passages...

      58 mins ago

    • Ain Chavez

      There are many variations of passages...

      32 mins ago

    • Mark all as read
  • Elana SaintAdmin
    • Profile
    • Home
    • Inbox
    • Taskboard
    • Settings
    • Log in
  2. Ui Kits
  3. Typography

Typography

Headings
All HTML headings, <h1> through <h6>, are available.

This is a Heading 1

This is a Heading 2

This is a Heading 3

This is a Heading 4

This is a Heading 5
This is a Heading 6

Heading 1Sub Heading

Heading 2Sub Heading

Heading 3Sub Heading

Heading 4Sub Heading

Heading 5Sub Heading

Heading 6Sub Heading

Very Thin (100)

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
Thin (300)

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
Normal (400)

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
light Normal (600)

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
Bold (700)

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
Extra Bold (900)

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
Headings
Use the included utility classes to recreate the small secondary heading text.

Fancy display headingWith faded secondary text

Display headings
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 display heading—a larger, slightly more opinionated heading style.

Display 1

Display 2

Display 3

Display 4

Lead
Make a paragraph stand out by adding .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

Inline text elements
Styling for common inline HTML5 elements.

You can use the mark tag to highlight text.

This line of text is meant to be treated as deleted text.

This line of text is meant to be treated as no longer accurate.

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

Text Color
You can Give text color by using txt-* class

This is Primary text You can archive this adding .txt-primary class

This is Secondary text You can archive this adding .txt-secondary class

This is Success text You can archive this adding .txt-success class

This is Info text You can archive this adding .txt-info class

This is Warning text You can archive this adding .txt-warning class

This is Danger text You can archive this adding .txt-danger class

This is Dark text You can archive this adding .txt-dark class

This is Primary text You can archive this adding .txt-primary class

Listing Typography
Unorder list
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
Order list
  1. Lorem ipsum dolor sit amet
  2. Lorem ipsum dolor sit amet
  3. Lorem ipsum dolor sit amet
    1. Lorem ipsum dolor sit amet
    2. Lorem ipsum dolor sit amet
    3. Lorem ipsum dolor sit amet
    4. Lorem ipsum dolor sit amet
    5. Lorem ipsum dolor sit amet
  5. Lorem ipsum dolor sit amet
  6. Lorem ipsum dolor sit amet
Order list
Lorem ipsum dolor sit amet
- ipsum dolor sit amet
Lorem ipsum dolor sit amet
- ipsum dolor sit amet
Lorem ipsum dolor sit amet
- ipsum dolor sit amet
Lorem ipsum dolor sit amet
- ipsum dolor sit amet
Lorem ipsum dolor sit amet
- ipsum dolor sit amet
Fontawesome list
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
ICO Icon list
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
Themfy list
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
Blockquotes
Add a <footer class="blockquote-footer"> for identifying the source. Wrap the name of the source work in <cite>.

Naming a source

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Alignment Center

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Alignment Right

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title