Typography UI Elements

Super headlines


.display4
.display3
.display2
.display1

Headlines


<h1> .h1 Heading 48px
<h2> .h2 Heading 32px
<h3> .h3 Heading 28px
<h4> .h4 Heading 24px
<h5> .h5 Heading 20px
<h6> .h6 Heading 18px

Heading secondary text


<h1>

Header Secondary

<h2>

Header Secondary

<h3>

Header Secondary

<h4>

Header Secondary

<h5>
Header Secondary
<h6>
Header Secondary

Inline text 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.


Paragraph


Default

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Indent

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Indent letter

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Leader

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Leader2

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Secondary

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Small

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.


Blockquote

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Someone famous Source Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Someone famous Source Title

Remark

Lorem Ipsum is simply dummy text.
Lorem Ipsum is simply dummy text.
Lorem Ipsum is simply dummy text.
Lorem Ipsum is simply dummy text.
Lorem Ipsum is simply dummy text.
Lorem Ipsum is simply dummy text.
Lorem Ipsum is simply dummy text.
Lorem Ipsum is simply dummy text.
Lorem Ipsum is simply dummy text.

Ordered list


  1. Sunt tataes consumere talis, emeritis orgiaes.
  2. Nunquam transferre plasmator.
  3. Heu, germanus calcaria!
  4. Vortexs resistere in mare!
    1. Resistentias cantare!
    2. Lacteas volare in camerarius rugensis civitas!
    3. Nunquam manifestum genetrix.
    4. Pol, a bene diatria, cotta!
  5. Sunt tataes consumere talis, emeritis orgiaes.
  6. Nunquam transferre plasmator.
  7. Heu, germanus calcaria!

Unordered list


  • Sunt tataes consumere talis, emeritis orgiaes.
  • Nunquam transferre plasmator.
  • Heu, germanus calcaria!
  • Vortexs resistere in mare!
    • Resistentias cantare!
    • Lacteas volare in camerarius rugensis civitas!
    • Nunquam manifestum genetrix.
    • Pol, a bene diatria, cotta!
  • Sunt tataes consumere talis, emeritis orgiaes.
  • Nunquam transferre plasmator.
  • Heu, germanus calcaria!

Un-styled list


  • Sunt tataes consumere talis, emeritis orgiaes.
  • Heu, germanus calcaria!
  • Vortexs resistere in mare!
    • Resistentias cantare!
    • Lacteas volare in camerarius rugensis civitas!
    • Pol, a bene diatria, cotta!
  • Sunt tataes consumere talis, emeritis orgiaes.
  • Nunquam transferre plasmator.
  • Heu, germanus calcaria!

Inline list


  • Home.
  • Base
  • Widgets
  • Contacts
  • Inline item

Step list


  • First step

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

  • Second step

    Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.

  • Third step

    There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which.


Description vertical


Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.

Description horizontal


Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.

Text alignment


Left aligned text on all viewport sizes.

Center aligned text on all viewport sizes.

Right aligned text on all viewport sizes.


Text transform


lowercased text

uppercased text

—Āapitalized text


Font weight


Name Weight

.text-ultralight

100

.text-light

200

.text-normal

400

.text-medium

500

.text-bold

700