Skip to main content Skip to main navigation

Typography

Headings

Heading 1

<h1>Heading 1</h1>

Heading 2

<h2>Heading 2</h2>

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 H20, which is helpful for showing subscripts. Noting the presence of a footnote 1 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

Background Colors

Address

4350 W. Cypress St. Suite 702
Tampa, Florida 33607 
<address>
    4350 W. Cypress St. Suite 702<br /> Tampa, Florida 33607
</address>

Blockquotes

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”.

Mercury Works

<blockquote class="blockquote">
    <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”.
    </p>
    <p><strong><em>Mercury Works</em></strong></p>
</blockquote>

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”.

Mercury Works

<blockquote class="blockquote blockquote--primary-color">
    <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”.
    </p>
    <p><strong><em>Mercury Works</em></strong></p>
</blockquote>

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”.

Mercury Works

<blockquote class="blockquote blockquote--secondarycolor">
    <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”.
    </p>
    <p><strong><em>Mercury Works</em></strong></p>
</blockquote>

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”.

Mercury Works

<blockquote class="blockquote blockquote--tertiary-color">
    <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”.
    </p>
    <p><strong><em>Mercury Works</em></strong></p>
</blockquote>

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

  1. Ordered list - first list item
  2. Ordered list - second list item
  3. 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>

Code

Note: The first item below is the example of what a code section looks like using the code-block CSS class. The second item is to copy & paste the code section HTML template.

Code goes here.
<div class="code-block">
    <pre>
        <code>Code goes here.</code>
    </pre>
</div>