Heading 1

<h1>Heading 1</h1>

Heading 2

Heading 2

Heading 3

<h3>Heading 3</h3>

Heading 4

<h4>Heading 4</h4>

Heading 5

<h5>Heading 5</h5>

Heading 6

<h6>Heading 6</h6>

Small

Use the <small> element to define smaller text or side comments. By default, type that is small will be 65% of it’s normal font size. You can also use the small CSS class to make text smaller.

Heading 1 Heading 1 Small

<h1>Heading 1 <small>Heading 1 Small</small></h1>

Paragraphs

Paragraph With Italic, Bold, And A Link

Web. Mobile. Data. Simply put, that’s what we do. We’re Mercury Works, a leading digital application and professional services firm obsessed with websites, web applications, native applications, mobile and everything “data”. Visit our website.

<p>Web. Mobile. Data. Simply put, <em>that’s what we do</em>. We’re <strong>Mercury Works</strong>, a leading digital application and professional services firm obsessed with websites, web applications, native applications, mobile and everything “data”. <a href="http://www.mercurynewmedia.com">Visit our website</a>.</p>

Paragraph With Subscript and Superscript

The basic formula for water is H₂0, which is helpful for showing subscripts. Noting the presence of a footnote ¹ is one common way for superscripts to be used.

<p>The basic formula for water is H<sub>2</sub>0, which is helpful for showing subscripts. Noting the presence of a footnote<sup>1</sup> is one common way for superscripts to be used.</p>

Text Alignment

Web. Mobile. Data. Simply put, that’s what we do.

<p class="text-align--left">Web. Mobile. Data. Simply put, that’s what we do.</p>

Web. Mobile. Data. Simply put, that’s what we do.

<p class="text-align--center">Web. Mobile. Data. Simply put, that’s what we do.</p>

Web. Mobile. Data. Simply put, that’s what we do.

<p class="text-align--right">Web. Mobile. Data. Simply put, that’s what we do.</p>

Text Decoration

Web. Mobile. Data. Simply put, that’s what we do.

<p class="text-decoration--underline">Web. Mobile. Data. Simply put, that’s what we do.</p>

Web. Mobile. Data. Simply put, that’s what we do.

<p class="text-decoration--strikethrough">Web. Mobile. Data. Simply put, that’s what we do.</p>

Web. Mobile. Data. Simply put, that’s what we do.

<p class="text-transform--uppercase">Web. Mobile. Data. Simply put, that’s what we do.</p>

Web. Mobile. Data. Simply put, that’s what we do.

<p class="text-transform--capitalize">Web. Mobile. Data. Simply put, that’s what we do.</p>

Web. Mobile. Data. Simply put, that’s what we do.

<p class="text-transform--lowercase">Web. Mobile. Data. Simply put, that’s what we do.</p>

Font Styling & Weight

Web. Mobile. Data. Simply put, that’s what we do.

<p class="bold">Web. Mobile. Data. Simply put, that’s what we do.</p>

Web. Mobile. Data. Simply put, that’s what we do.

<p class="italic">Web. Mobile. Data. Simply put, that’s what we do.</p>

Web. Mobile. Data. Simply put, that’s what we do.

<p class="bold-italic">Web. Mobile. Data. Simply put, that’s what we do.</p>

Colors

Font Colors

This paragraph’s color is primary color using the color–primary-color CSS class.

<p class="color-primary-color">This paragraph's color is primary color using the <strong>color--primary-color</strong> CSS class.</p>

This paragraph’s color is secondary color using the color–secondary-color CSS class.

<p class="color-secondary-color">This paragraph's color is secondary color using the <strong>color--secondary-color</strong> CSS class.</p>

This paragraph’s color is tertiary color using the color–tertiary-color CSS class.

<p class="color-tertiary-color">This paragraph's color is tertiary color using the <strong>color--tertiary-color</strong> CSS class.</p>

This paragraph’s color is white using the color–white CSS class.

<p class="color-white">This paragraph's color is white using the <strong>color--white</strong> CSS class.</p>

This paragraph’s color is gray lightest using the color–gray–lightest CSS class.

<p class="color-gray--lightest">This paragraph's color is gray lightest using the <strong>color--gray--lightest</strong> CSS class.</p>

This paragraph’s color is gray lighter using the color–gray–lighter CSS class.

<p class="color-gray--lighter">This paragraph's color is gray lighter using the <strong>color--gray--lighter</strong> CSS class.</p>

This paragraph’s color is gray light using the color–gray–light CSS class.

<p class="color-gray--light">This paragraph's color is gray light using the <strong>color--gray--light</strong> CSS class.</p>

This paragraph’s color is gray using the color–gray CSS class.

<p class="color-gray">This paragraph's color is gray using the <strong>color--gray</strong> CSS class.</p>

This paragraph’s color is gray dark using the color–gray–dark CSS class.

<p class="color-gray--dark">This paragraph's color is gray dark using the <strong>color--gray--dark</strong> CSS class.</p>

This paragraph’s color is gray darker using the color–gray–darker CSS class.

<p class="color-gray--darker">This paragraph's color is gray darker using the <strong>color--gray--darker</strong> CSS class.</p>

This paragraph’s color is gray darkest using the color–gray–darkest CSS class.

<p class="color-gray--darkest">This paragraph's color is gray darkest using the <strong>color--gray--darkest</strong> CSS class.</p>

This paragraph’s color is black using the color–black CSS class.

<p class="color-black">This paragraph's color is black using the <strong>color--black</strong> CSS class.</p>

This paragraph’s color is error color using the color–error-color CSS class.

<p class="color-error-color">This paragraph's color is error color using the <strong>color--error-color</strong> CSS class.</p>

This paragraph’s color is warning color using the color–warning-color CSS class.

<p class="color-warning-color">This paragraph's color is warning color using the <strong>color--warning-color</strong> CSS class.</p>

This paragraph’s color is info color using the color–info-color CSS class.

<p class="color-info-color">This paragraph's color is info color using the <strong>color--info-color</strong> CSS class.</p>

This paragraph’s color is success color using the color–success-color CSS class.

<p class="color-success-color">This paragraph's color is success color using the <strong>color--success-color</strong> CSS class.</p>

Background Colors

This paragraph’s background color is primary color using the background-color–primary-color CSS class.

<p class="background-color-primary-color">This paragraph's background color is primary color using the <strong>background-color--primary-color</strong> CSS class.</p>

This paragraph’s background color is secondary color using the background-color–secondary-color CSS class.

<p class="background-color-secondary-color">This paragraph's background color is secondary color using the <strong>background-color--secondary-color</strong> CSS class.</p>

This paragraph’s background color is tertiary color using the background-color–tertiary-color CSS class.

<p class="background-color-tertiary-color">This paragraph's background color is tertiary color using the <strong>background-color--tertiary-color</strong> CSS class.</p>

This paragraph’s background color is white using the background-color–white CSS class.

<p class="background-color-white">This paragraph's background color is white using the <strong>background-color--white</strong> CSS class.</p>

This paragraph’s background color is gray using the background-color–gray CSS class.

<p class="background-color-gray">This paragraph's background color is gray using the <strong>background-color--gray</strong> CSS class.</p>

This paragraph’s background color is black using the background-color–black CSS class.

<p class="background-color-black">This paragraph's background color is black using the <strong>background-color--black</strong> CSS class.</p>

This paragraph’s background color is error color using the background-color–error-color CSS class.

<p class="background-color-error-color">This paragraph's background color is error color using the <strong>background-color--error-color</strong> CSS class.</p>

This paragraph’s background color is warning color using the background-color–warning-color CSS class.

<p class="background-color-warning-color">This paragraph's background color is warning color using the <strong>background-color--warning-color</strong> CSS class.</p>

This paragraph’s background color is info color using the background-color–info-color CSS class.

<p class="background-color-info-color">This paragraph's background color is info color using the <strong>background-color--info-color</strong> CSS class.</p>

This paragraph’s background color is success color using the background-color–success-color CSS class.

<p class="background-color-success-color">This paragraph's background color is success color using the <strong>background-color--success-color</strong> CSS class.</p>

Lists

Unordered List

Unordered list – first list item
Unordered list – second list item
Unordered list – third list item

<ul>
    <li>Unordered list - first list item</li>
    <li>Unordered list - second list item</li>
    <li>Unordered list - third list item</li>
</ul>

Ordered List

Ordered list – first list item
Ordered list – second list item
Ordered list – third list item

<ol>
    <li>Ordered list - first list item</li>
    <li>Ordered list - second list item</li>
    <li>Ordered list - third list item</li>
</ol>