Typography

General

Text Size

The .text-small, .text-large, and .text-xl classes can be applied to elements to alter the base font size:

Lorem ipsum dolor sit amet, justo congue mauris fermentum lacus.

Lorem ipsum dolor sit amet, justo congue mauris fermentum lacus.

Lorem ipsum dolor sit amet, justo congue mauris fermentum lacus.

Usage:

<p class="text-small">Lorem ipsum dolor sit amet, justo congue mauris fermentum lacus.</p>
<p class="text-large">Lorem ipsum dolor sit amet, justo congue mauris fermentum lacus.</p>
<p class="text-xl">Lorem ipsum dolor sit amet, justo congue mauris fermentum lacus.</p>

Text Alignment

The .text-left, .text-right, .text-center, and .text-justify classes can be applied to elements to alter the text alignment of its contents:

Left

Lorem ipsum dolor sit amet, justo congue mauris fermentum lacus. Dignissim hymenaeos placerat in, non mus enim diam nam, vivamus velit nunc imperdiet auctor sed, nibh elit, pellentesque convallis est. Nulla nisl lectus id a. Egestas odio wisi ut scelerisque, massa vitae adipiscing odio id quam, suscipit nunc pede nec nisl ridiculus, eu tellus sed.

Right

Lorem ipsum dolor sit amet, justo congue mauris fermentum lacus. Dignissim hymenaeos placerat in, non mus enim diam nam, vivamus velit nunc imperdiet auctor sed, nibh elit, pellentesque convallis est. Nulla nisl lectus id a. Egestas odio wisi ut scelerisque, massa vitae adipiscing odio id quam, suscipit nunc pede nec nisl ridiculus, eu tellus sed.

Center

Lorem ipsum dolor sit amet, justo congue mauris fermentum lacus. Dignissim hymenaeos placerat in, non mus enim diam nam, vivamus velit nunc imperdiet auctor sed, nibh elit, pellentesque convallis est. Nulla nisl lectus id a. Egestas odio wisi ut scelerisque, massa vitae adipiscing odio id quam, suscipit nunc pede nec nisl ridiculus, eu tellus sed.

Justified

Lorem ipsum dolor sit amet, justo congue mauris fermentum lacus. Dignissim hymenaeos placerat in, non mus enim diam nam, vivamus velit nunc imperdiet auctor sed, nibh elit, pellentesque convallis est. Nulla nisl lectus id a. Egestas odio wisi ut scelerisque, massa vitae adipiscing odio id quam, suscipit nunc pede nec nisl ridiculus, eu tellus sed.

Usage:

<p class="text-left">Lorem ipsum dolor sit amet, justo congue mauris fermentum lacus.</p>
<p class="text-right">Lorem ipsum dolor sit amet, justo congue mauris fermentum lacus.</p>
<p class="text-center">Lorem ipsum dolor sit amet, justo congue mauris fermentum lacus.</p>
<p class="text-justify">Lorem ipsum dolor sit amet, justo congue mauris fermentum lacus.</p>

Text Transformation

The .text-lowercase, .text-uppercase, and .text-capitalize classes can be applied to elements to alter the text transformation of its contents:

Lorem ipsum dolor sit amet, justo congue mauris fermentum lacus.

Lorem ipsum dolor sit amet, justo congue mauris fermentum lacus.

Lorem ipsum dolor sit amet, justo congue mauris fermentum lacus.

Usage:

<p class="text-lowercase">Lorem ipsum dolor sit amet, justo congue mauris fermentum lacus.</p>
<p class="text-uppercase">Lorem ipsum dolor sit amet, justo congue mauris fermentum lacus.</p>
<p class="text-capitalize">Lorem ipsum dolor sit amet, justo congue mauris fermentum lacus.</p>

Text Emphasis

The .text-bold, .text-extra-bold, and .text-italic classes can be applied to elements to alter the text weight/style of its contents:

Lorem ipsum dolor sit amet, justo congue mauris fermentum lacus.

Lorem ipsum dolor sit amet, justo congue mauris fermentum lacus.

Lorem ipsum dolor sit amet, justo congue mauris fermentum lacus.

Usage:

<p class="text-bold">Lorem ipsum dolor sit amet, justo congue mauris fermentum lacus.</p>
<p class="text-extra-bold">Lorem ipsum dolor sit amet, justo congue mauris fermentum lacus.</p>
<p class="text-italic">Lorem ipsum dolor sit amet, justo congue mauris fermentum lacus.</p>

Text Color

Various classes can be applied to elements to alter the text color of its contents:

Lorem ipsum dolor sit amet, justo congue mauris fermentum lacus.

Lorem ipsum dolor sit amet, justo congue mauris fermentum lacus.

Lorem ipsum dolor sit amet, justo congue mauris fermentum lacus.

Lorem ipsum dolor sit amet, justo congue mauris fermentum lacus.

Lorem ipsum dolor sit amet, justo congue mauris fermentum lacus.

Lorem ipsum dolor sit amet, justo congue mauris fermentum lacus.

Lorem ipsum dolor sit amet, justo congue mauris fermentum lacus.

Lorem ipsum dolor sit amet, justo congue mauris fermentum lacus.

Lorem ipsum dolor sit amet, justo congue mauris fermentum lacus.

Lorem ipsum dolor sit amet, justo congue mauris fermentum lacus.

Lorem ipsum dolor sit amet, justo congue mauris fermentum lacus.

Lorem ipsum dolor sit amet, justo congue mauris fermentum lacus.

Lorem ipsum dolor sit amet, justo congue mauris fermentum lacus.

Usage:

<p class="text-darkgray">Lorem ipsum dolor sit amet, justo congue mauris fermentum lacus.</p>
<p class="text-mediumgray">Lorem ipsum dolor sit amet, justo congue mauris fermentum lacus.</p>
<p class="text-lightgray">Lorem ipsum dolor sit amet, justo congue mauris fermentum lacus.</p>
<p class="text-extra-lightgray">Lorem ipsum dolor sit amet, justo congue mauris fermentum lacus.</p>
<p class="text-black">Lorem ipsum dolor sit amet, justo congue mauris fermentum lacus.</p>
<p class="text-white">Lorem ipsum dolor sit amet, justo congue mauris fermentum lacus.</p>
<p class="text-green">Lorem ipsum dolor sit amet, justo congue mauris fermentum lacus.</p>
<p class="text-blue">Lorem ipsum dolor sit amet, justo congue mauris fermentum lacus.</p>
<p class="text-skyblue">Lorem ipsum dolor sit amet, justo congue mauris fermentum lacus.</p>
<p class="text-orange">Lorem ipsum dolor sit amet, justo congue mauris fermentum lacus.</p>
<p class="text-purple">Lorem ipsum dolor sit amet, justo congue mauris fermentum lacus.</p>
<p class="text-pink">Lorem ipsum dolor sit amet, justo congue mauris fermentum lacus.</p>
<p class="text-yellow">Lorem ipsum dolor sit amet, justo congue mauris fermentum lacus.</p>

Paragraphs

Intro Text

Using the class .intro-text, a slightly larger font size will be applied to a paragraph with an upper margin:

Lorem ipsum dolor sit amet, justo congue mauris fermentum lacus.

Usage:

<p class="intro-text">Lorem ipsum dolor sit amet, justo congue mauris fermentum lacus.</p>

Lists

Fancy List

Using the class .fancy-list, a fancier style of bullets will be applied to a list:

  • Line Item
  • Line Item
  • Line Item

Usage:

<ul class="fancy-list">
    <li>Line Item</li>
    <li>Line Item</li>
    <li>Line Item</li>
</ul>

Icons

Insert FontAwesome icons into text. List of icons can be found here: http://fontawesome.io/icons/

Usage:

<i class="fa fa-chevron-circle-up" aria-hidden="true"></i>

More examples can be found here (sizing, animation, etc.): http://fontawesome.io/examples/

Images

Usage:

<img src="https://learnzillion.com/p/wp-content/uploads/sites/3/2016/07/IMG_1683.jpg" />

Image Alignment:

The classes .alignleft, .alignright, and .aligncenter can be applied to images to float left/right, or center.

Usage:

<img src="https://learnzillion.com/p/wp-content/uploads/sites/3/2016/07/IMG_1683.jpg" class="alignright"

.alignleft

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

.aligncenter

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

.alignright

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.