Ad Banner Ad Banner

This is a paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum viverra iaculis nunc nec volutpat. Aenean sed turpis quis lorem aliquet vestibulum et nec purus. Nulla tortor sem, egestas a dolor at, tristique fermentum odio. Donec ut tempus dolor. Ut lorem arcu, vestibulum vitae sem non, posuere commodo nisi.

Typography

Primary Font Proxima Nova

Aa Proxima Nova

Proxima Nova is your base font. Paragraphs and all basic text are in this font. If you need to assign this font, use the class .font-primary.

Source: Adobe Fonts

Headers

h1. This is a very large header.

h2. This is a large header.

h3. This is a medium header.

h4. This is a moderate header.

h5. This is a small header.
h6. This is a tiny header.
<h1>h1. This is a very large header.</h1>
<h2>h2. This is a large header.</h2>
<h3>h3. This is a medium header.</h3>
<h4>h4. This is a moderate header.</h4>
<h5>h5. This is a small header.</h5>
<h6>h6. This is a tiny header.</h6>

Paragraphs

This is a paragraph. Paragraphs are preset with a font size, line height and spacing to match the overall vertical rhythm. You have several options for highlighting text. The <strong> tag makes text bolder. The <em> tag makes text italicized. You also have available the .underline class to underline your text as well as the .uppercase class to make your text uppercase.

<p>You have several options for highlighting text. The strong tag <strong>makes text bolder</strong>. The em tag <em>makes text italicized</em>. You also have available the .underline class to <span class="underline">underline your text</span> as well as the .uppercase class to <span class="uppercase">make your text uppercase.</span></p>

Links

The standard link colors are preset to the Primary color. This is an example of a link.

<a href="">This is an example of a link</a>.

Dividers

Use dividers to define breaks between paragraphs or sections.


<hr />

Unordered and Ordered Lists

Use an unordered list to list things if the order of the items doesn't matter. Use an ordered list when creating a list where the order of the items is important, like ranking something from best to worst.

Unordered List
  • List item number 1
  • List item number 1
  • List item number 1
<ul>
   <li>List item number 1</li>
   <li>List item number 1</li>
   <li>List item number 1</li>
</ul>
Ordered List
  1. List item number 1
  2. List item number 1
  3. List item number 1
<ol>
   <li>List item number 1</li>
   <li>List item number 1</li>
   <li>List item number 1</li>
</ol>

Blockquotes

You gain strength, courage, and confidence by every experience in which you really stop to look fear in the face. You are able to say to yourself, 'I lived through this horror. I can take the next thing that comes along.'

Eleanor Roosevelt
<blockquote>
   <p>You gain strength, courage, and confidence by every experience in which you really stop to look fear in the face. You are able to say to yourself, 'I lived through this horror. I can take the next thing that comes along.'</p>
   <cite>Eleanor Roosevelt</cite>
</blockquote>

Text Alignment

Left Aligned Text

This the the standard alignment for text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<p class="text-left">This the the standard alignment for text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
Right Aligned Text

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.

<p class="text-right">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.</p>
Center Aligned Text

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.

<p class="text-center">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.</p>
Justify Text

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.

<p class="text-justify">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.</p>

Colors

Primary Color

#DA291C
R218/G41/B28

.color-primary

Secondary Color

#263645
R38/G54/B69

.color-secondary

Tertiary Color

#222222
R217/G188/B109

.color-third

Using the color classes to switch out font colors is simple. Just assign that color class to your tag.

Heading 5 with Primary Color

This paragraph has a font color change in the very middle.

<h5 class="color-primary">Heading 4 with Primary Color</h5>
<p>This paragraph has a <span class="color-primary">font color change</span> in the very middle.</p>

Buttons

A basic button can be created using the .btn class. You have your choice of two buttons colors, .btn--primary and .btn--secondary. If you'd like your button to stand out a little more, you may also add the class .btn--slanted. The buttons are full width based on their container.

Standard Button With Primary Background

Press Me

<a class="btn btn--primary">Press Me</a>
Slanted Button With Primary Background

Press Me

<a class="btn btn--slanted">Press Me</a>
Standard Button With Secondary Background

Press Me

<a class="btn btn--dark">Press Me</a>
Slanted Button With Secondary Background

Press Me

<a class="btn btn--dark btn--slanted">Press Me</a>

Responsive Videos

To make an embedded video responsive, add the class .responsive-embed widescreen to the containing tag.

<p class="responsive-embed widescreen styled"><iframe src="//www.youtube.com/embed/rd3A-y5sO5o" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe></p>