Text Sizes

Example:

display-3
display-2
display-1
headline
title
subhead
small text 12px

Text with a larger font and a little more spacing between the lines, wich make larger parts of text (like blogs) easier to read.

Text colors

For all the color options see the colors page.

Example:

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, vero, perferendis alias placeat neque deleniti assumenda delectus et nostrum debitis cum vel maiores veritatis esse temporibus reprehenderit odio dolores earum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, vero, perferendis alias placeat neque deleniti assumenda delectus et nostrum debitis cum vel maiores veritatis esse temporibus reprehenderit odio dolores earum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, vero, perferendis alias placeat neque deleniti assumenda delectus et nostrum debitis cum vel maiores veritatis esse temporibus reprehenderit odio dolores earum.

Headings

All HTML headings, <h1> through <h6>, are available. .h1 through .h6 classes are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline.

h1. header

h2. header

h3. header

h4. header

h5. header
h6. header
Secondary text

Create lighter, secondary text in any heading with a generic, <small> tag or the small class. Add class block if you want the seconadry text on a new line.

h1. header seconadry text

h2. header secondary text

h3. header secondary text

h4. header secondary text

h5. header secondary text
h6. header secondary text
Text transform

Use these classes to transform text.

class example
.text-lowercase lorem ipsum
.text-uppercase lorem ipsum
.text-capitalize lorem ipsum
Alignment

Easily realign text to components with text alignment classes text-left, text-center and text-right.

Left aligned text.

Center aligned text.

Right aligned text.

Center

Center text vertically and horizontally by adding class position-center. The parent element needs to have the property "position: relative" Cards already have this property. Otherwise add class position-relative to the parent element.

Centered Headline

Blockquote

Wrap <blockquote> tags around any HTML as the quote. For straight quotes, we recommend a <p>.

“Design is the fundamental soul of a human-made creation that ends up expressing itself in successive outer layers of the product or service.”
Steve Jobs
Blockquote reverse

Make a blockquote right alignt by adding the class blockquote-reverse to the <blockquote> tag.

“Design is the fundamental soul of a human-made creation that ends up expressing itself in successive outer layers of the product or service.”
Steve Jobs

© 2016 YourApp