Control Page

Headings

Header one

Header two

Header three

Header four

Header five
Header six
<h2 id="headings-headings">Headings<h2 id="headings-headings"> <h1>Header one</h1> <h2>Header two</h2> <h3>Header three</h3> <h4>Header four</h4> <h5>Header five</h5> <h6>Header six</h6>

Blockquotes

Single line blockquote:
Stay hungry. Stay foolish.
Multi line blockquote with a cite reference:
People think focus means saying yes to the thing you've got to focus on. But that's not what it means at all. It means saying no to the hundred other good ideas that there are. You have to pick carefully. I'm actually as proud of the things we haven't done as the things I have done. Innovation is saying no to 1,000 things. Steve Jobs - Apple Worldwide Developers' Conference, 1997
<h2 id="quotes-quotes">Blockquotes</h2> Single line blockquote: <blockquote>Stay hungry. Stay foolish.</blockquote> Multi line blockquote with a cite reference: <blockquote>People think focus means saying yes to the thing you've got to focus on. But that's not what it means at all. It means saying no to the hundred other good ideas that there are. You have to pick carefully. I'm actually as proud of the things we haven't done as the things I have done. Innovation is saying no to 1,000 things. <cite>Steve Jobs - Apple Worldwide Developers' Conference, 1997</cite></blockquote>

Tables

Employee Salary
Jane $1 Because that's all Steve Job' needed for a salary.
John $100K For all the blogging he does.
Jane $100M Pictures are worth a thousand words, right? So Tom x 1,000.
Jane $100B With hair like that?! Enough said...
<h2 id="tables-tables">Tables</h2> <table> <tbody> <tr> <th>Employee</th> <th class="views">Salary</th> <th></th> </tr> <tr class="odd"> <td><a href="http://example.com/">Jane</a></td> <td>$1</td> <td>Because that's all Steve Job' needed for a salary.</td> </tr> <tr class="even"> <td><a href="http://example.com">John</a></td> <td>$100K</td> <td>For all the blogging he does.</td> </tr> <tr class="odd"> <td><a href="http://example.com/">Jane</a></td> <td>$100M</td> <td>Pictures are worth a thousand words, right? So Tom x 1,000.</td> </tr> <tr class="even"> <td><a href="http://example.com/">Jane</a></td> <td>$100B</td> <td>With hair like that?! Enough said...</td> </tr> </tbody> </table>

Dividers




<h2 id="dividers-dividers">Dividers</h2> <hr class="o-divider o-divider--primary"> <hr class="o-divider o-divider--secondary"> <hr class="o-divider o-divider--tertiary">

Large Dividers




<h2 id="dividers-large">Large Dividers</h2> <hr class="o-divider o-divider--large o-divider--tertiary"> <hr class="o-divider o-divider--large o-divider--tertiary"> <hr class="o-divider o-divider--large o-divider--tertiary">

Huge Dividers




<h2 id="dividers-huge">Huge Dividers</h2> <hr class="o-divider o-divider--huge o-divider--tertiary"> <hr class="o-divider o-divider--huge o-divider--tertiary"> <hr class="o-divider o-divider--huge o-divider--tertiary">

HTML Tags

These supported tags come from the WordPress.com code FAQ.

Address Tag:

1 Infinite Loop Cupertino, CA 95014 United States

Anchor Tag (aka. Link):

This is an example of a link.

Abbreviation Tag:

The abbreviation srsly stands for "seriously".

Acronym Tag:

The acronym ftw stands for "for the win".

Big Tag:

These tests are a big deal, but this tag is no longer supported in HTML5.

Cite Tag:

"Code is poetry." --Automattic

Code Tag:

You will learn later on in these tests that word-wrap: break-word; will be your best friend.

Delete Tag:

This tag will let you strikeout text, but this tag is no longer supported in HTML5 (use the <strike> instead).

Emphasize Tag:

The emphasize tag should italicize text.

Insert Tag:

This tag should denote inserted text.

Keyboard Tag:

This scarcely known tag emulates keyboard text, which is usually styled like the <code> tag.

Preformatted Tag:

This tag styles large blocks of code.

.post-title {
    margin: 0 0 5px;
    font-weight: bold;
    font-size: 38px;
    line-height: 1.2;
}

Quote Tag:

Developers, developers, developers... --Steve Ballmer

Strong Tag:

This tag shows bold text.

Subscript Tag:

Getting our science styling on with H2O, which should push the "2" down.

Superscript Tag:

Still sticking with science and Isaac Newton's E = MC2, which should lift the 2 up.

Teletype Tag:

This rarely used tag emulates teletype text, which is usually styled like the <code> tag.

Variable Tag:

This allows you to denote variables.

<h2 id="html-tags-html-tags">HTML Tags</h2> <p>These supported tags come from the WordPress.com code <a title="Code" href="http://en.support.wordpress.com/code/">FAQ</a>.</p> <p><strong>Address Tag:</strong></p> <address>1 Infinite Loop Cupertino, CA 95014 United States</address> <p><strong>Anchor Tag (aka. Link):</strong></p> <p>This is an example of a <a title="Apple" href="http://apple.com">link</a>.</p> <p><strong>Abbreviation Tag:</strong></p> <p>The abbreviation <abbr title="Seriously">srsly</abbr> stands for "seriously".</p> <p><strong>Acronym Tag:</strong></p> <p>The acronym <acronym title="For The Win">ftw</acronym> stands for "for the win".</p> <p><strong>Big Tag:</strong></p> <p>These tests are a <big>big</big> deal, but this tag is no longer supported in HTML5.</p> <p><strong>Cite Tag:</strong></p> <p>"Code is poetry." --<cite>Automattic</cite></p> <p><strong>Code Tag:</strong></p> <p>You will learn later on in these tests that <code>word-wrap: break-word;</code> will be your best friend.</p> <p><strong>Delete Tag:</strong></p> <p>This tag will let you <del>strikeout text</del>, but this tag is no longer supported in HTML5 (use the <code>&lt;strike&gt;</code> instead).</p> <p><strong>Emphasize Tag:</strong></p> <p>The emphasize tag should <em>italicize</em> text.</p> <p><strong>Insert Tag:</strong></p> <p>This tag should denote <ins>inserted</ins> text.</p> <p><strong>Keyboard Tag:</strong></p> <p>This scarcely known tag emulates <kbd>keyboard text</kbd>, which is usually styled like the <code>&lt;code&gt;</code> tag.</p> <p><strong>Preformatted Tag:</strong></p> <p>This tag styles large blocks of code.</p> <pre>.post-title { margin: 0 0 5px; font-weight: bold; font-size: 38px; line-height: 1.2; }</pre> <p><strong>Quote Tag:</strong></p> <q>Developers, developers, developers...</q> --Steve Ballmer</p> <p><strong>Strong Tag:</strong></p> <p>This tag shows <strong>bold</strong> text.</p> <p><strong>Subscript Tag:</strong></p> <p>Getting our science styling on with H<sub>2</sub>O, which should push the "2" down.</p> <p><strong>Superscript Tag:</strong></p> <p>Still sticking with science and Isaac Newton's E = MC<sup>2</sup>, which should lift the 2 up.</p> <p><strong>Teletype Tag:</strong></p> <p>This rarely used tag emulates <tt>teletype text</tt>, which is usually styled like the <code>&lt;code&gt;</code> tag.</p> <p><strong>Variable Tag:</strong></p> <p>This allows you to denote <var>variables</var>.</p>

Unordered Lists (Nested)

  • List item one
    • List item one
      • List item one
      • List item two
      • List item three
      • List item four
    • List item two
    • List item three
    • List item four
  • List item two
  • List item three
  • List item four
<h2 id="lists-unordered">Unordered Lists (Nested)</h2> <ul> <li>List item one <ul> <li>List item one <ul> <li>List item one</li> <li>List item two</li> <li>List item three</li> <li>List item four</li> </ul> </li> <li>List item two</li> <li>List item three</li> <li>List item four</li> </ul> </li> <li>List item two</li> <li>List item three</li> <li>List item four</li> </ul>

Styled Unordered Lists

Styled (unordered)

  • As with a low sucking sound it slowly disappeared again, Starbuck still gazing at the agitated waters where it had sunk, with a wild voice exclaimed—"Almost rather had I seen Moby Dick and fought him, than to have seen thee, thou white ghost!" "What was it, Sir?" said Flask
  • "The great live squid, which, they say, few whale-ships ever beheld, and returned to their ports to tell of it
  • "But Ahab said nothing; turning his boat, he sailed back to the vessel; the rest as silently following
<h2 id="lists-unordered-styled">Styled Unordered Lists</h2> <p><strong>Styled (unordered)</strong></p> <ul class="styled"> <li>As with a low sucking sound it slowly disappeared again, <strong>Starbuck</strong> still gazing at the agitated waters where it had sunk, with a wild voice exclaimed&mdash;"Almost rather had I seen <a href="http://en.wikipedia.org/wiki/Moby_Dick" target="_blank">Moby Dick</a> and fought him, than to have seen thee, thou white ghost!" "What was it, Sir?" said Flask</li> <li>"The great live squid, which, they say, few whale-ships ever beheld, and returned to their ports to tell of it</li> <li>"But Ahab said nothing; turning his boat, he sailed back to the vessel; the rest as silently following</li> </ul>

Ordered List (Nested)

  1. List item one
    1. List item one
      1. List item one
      2. List item two
      3. List item three
      4. List item four
    2. List item two
    3. List item three
    4. List item four
  2. List item two
  3. List item three
  4. List item four
<h2 id="lists-ordered">Ordered List (Nested)</h2> <ol> <li>List item one <ol> <li>List item one <ol> <li>List item one</li> <li>List item two</li> <li>List item three</li> <li>List item four</li> </ol> </li> <li>List item two</li> <li>List item three</li> <li>List item four</li> </ol> </li> <li>List item two</li> <li>List item three</li> <li>List item four</li> </ol>

Styled Ordered Lists

  1. Ipsum
  2. Ipsum
  3. Ipsum
<h2 id="lists-ordered-styled">Styled Ordered Lists</h2> <ol class="styled"> <li>Ipsum</li> <li>Ipsum</li> <li>Ipsum</li> </ol>

Bare Lists

  • Ipsum
  • Ipsum
  • Ipsum
<h2 id="lists-bare">Bare Lists</h2> <ul class="list-bare"> <li>Ipsum</li> <li>Ipsum</li> <li>Ipsum</li> </ul>

Inline Lists

  • Ipsum
  • Ipsum
  • Ipsum
<h2 id="lists-inline">Inline Lists</h2> <ul class="list-inline"> <li>Ipsum</li> <li>Ipsum</li> <li>Ipsum</li> </ul>

Inline Delimited Lists

  • Ipsum
  • Ipsum
  • Ipsum
<h2 id="lists-inline-delimited">Inline Delimited Lists</h2> <ul class="list-inline list-inline--delimited"> <li>Ipsum</li> <li>Ipsum</li> <li>Ipsum</li> </ul>

Definition Lists

Definition List Title
Definition list division.
Startup
A startup company or startup is a company or temporary organization designed to search for a repeatable and scalable business model.
#dowork
Coined by Rob Dyrdek and his personal body guard Christopher "Big Black" Boykins, "Do Work" works as a self motivator, to motivating your friends.
Do It Live
I'll let Bill O'Reilly will explain this one.
<h2 id="lists-definition">Definition Lists</h2> <dl><dt>Definition List Title</dt><dd>Definition list division.</dd><dt>Startup</dt><dd>A startup company or startup is a company or temporary organization designed to search for a repeatable and scalable business model.</dd><dt>#dowork</dt><dd>Coined by Rob Dyrdek and his personal body guard Christopher "Big Black" Boykins, "Do Work" works as a self motivator, to motivating your friends.</dd><dt>Do It Live</dt><dd>I'll let Bill O'Reilly will <a title="We'll Do It Live" href="https://www.youtube.com/watch?v=O_HyZ5aW76c">explain</a> this one.</dd></dl>

Layouts and Widths

Full Width

Half Width

Half Width

Third Width

Third Width

Third Width

Fourth Width

Fourth Width

Fourth Width

Fourth Width

Fifth Width

Fifth Width

Fifth Width

Fifth Width

Fifth Width

<h2 id="layouts-widths-normal">Layouts and Widths</h2> <div class="layout"> <div class="layout__item"> <p class="demo-block">Full Width</p> </div> <div class="layout__item u-1-of-2"> <p class="demo-block">Half Width</p> </div> <div class="layout__item u-1-of-2"> <p class="demo-block">Half Width</p> </div> <div class="layout__item u-1-of-3"> <p class="demo-block">Third Width</p> </div> <div class="layout__item u-1-of-3"> <p class="demo-block">Third Width</p> </div> <div class="layout__item u-1-of-3"> <p class="demo-block">Third Width</p> </div> <div class="layout__item u-1-of-4"> <p class="demo-block">Fourth Width</p> </div> <div class="layout__item u-1-of-4"> <p class="demo-block">Fourth Width</p> </div> <div class="layout__item u-1-of-4"> <p class="demo-block">Fourth Width</p> </div> <div class="layout__item u-1-of-4"> <p class="demo-block">Fourth Width</p> </div> <div class="layout__item u-1-of-5"> <p class="demo-block">Fifth Width</p> </div> <div class="layout__item u-1-of-5"> <p class="demo-block">Fifth Width</p> </div> <div class="layout__item u-1-of-5"> <p class="demo-block">Fifth Width</p> </div> <div class="layout__item u-1-of-5"> <p class="demo-block">Fifth Width</p> </div> <div class="layout__item u-1-of-5"> <p class="demo-block">Fifth Width</p> </div> </div>

Nested Layouts and Widths

One Third of One half

One Third of One half

One Third of One half

One Half

<h2 id="layouts-widths-nested">Nested Layouts and Widths</h2> <div class="layout"> <div class="layout__item u-1-of-2"> <div class="layout"> <div class="layout__item u-1-of-3"> <p class="demo-block">One Third of One half</p> </div> <div class="layout__item u-1-of-3"> <p class="demo-block">One Third of One half</p> </div> <div class="layout__item u-1-of-3"> <p class="demo-block">One Third of One half</p> </div> </div> </div> <div class="layout__item u-1-of-2"> <p class="demo-block">One Half</p> </div> </div>

Flush Layouts and Widths

Full Width

Half Width

Half Width

Third Width

Third Width

Third Width

Fourth Width

Fourth Width

Fourth Width

Fourth Width

Fifth Width

Fifth Width

Fifth Width

Fifth Width

Fifth Width

<h2 id="layouts-widths-flush">Flush Layouts and Widths</h2> <div class="layout layout--flush"> <div class="layout__item"> <p class="demo-block">Full Width</p> </div> <div class="layout__item u-1-of-2"> <p class="demo-block">Half Width</p> </div> <div class="layout__item u-1-of-2"> <p class="demo-block">Half Width</p> </div> <div class="layout__item u-1-of-3"> <p class="demo-block">Third Width</p> </div> <div class="layout__item u-1-of-3"> <p class="demo-block">Third Width</p> </div> <div class="layout__item u-1-of-3"> <p class="demo-block">Third Width</p> </div> <div class="layout__item u-1-of-4"> <p class="demo-block">Fourth Width</p> </div> <div class="layout__item u-1-of-4"> <p class="demo-block">Fourth Width</p> </div> <div class="layout__item u-1-of-4"> <p class="demo-block">Fourth Width</p> </div> <div class="layout__item u-1-of-4"> <p class="demo-block">Fourth Width</p> </div> <div class="layout__item u-1-of-5"> <p class="demo-block">Fifth Width</p> </div> <div class="layout__item u-1-of-5"> <p class="demo-block">Fifth Width</p> </div> <div class="layout__item u-1-of-5"> <p class="demo-block">Fifth Width</p> </div> <div class="layout__item u-1-of-5"> <p class="demo-block">Fifth Width</p> </div> <div class="layout__item u-1-of-5"> <p class="demo-block">Fifth Width</p> </div> </div>

Huge Layouts and Widths

Full Width

Half Width

Half Width

Third Width

Third Width

Third Width

Fourth Width

Fourth Width

Fourth Width

Fourth Width

Fifth Width

Fifth Width

Fifth Width

Fifth Width

Fifth Width

<h2 id="layouts-widths-huge">Huge Layouts and Widths</h2> <div class="layout layout--huge"> <div class="layout__item"> <p class="demo-block">Full Width</p> </div> <div class="layout__item u-1-of-2"> <p class="demo-block">Half Width</p> </div> <div class="layout__item u-1-of-2"> <p class="demo-block">Half Width</p> </div> <div class="layout__item u-1-of-3"> <p class="demo-block">Third Width</p> </div> <div class="layout__item u-1-of-3"> <p class="demo-block">Third Width</p> </div> <div class="layout__item u-1-of-3"> <p class="demo-block">Third Width</p> </div> <div class="layout__item u-1-of-4"> <p class="demo-block">Fourth Width</p> </div> <div class="layout__item u-1-of-4"> <p class="demo-block">Fourth Width</p> </div> <div class="layout__item u-1-of-4"> <p class="demo-block">Fourth Width</p> </div> <div class="layout__item u-1-of-4"> <p class="demo-block">Fourth Width</p> </div> <div class="layout__item u-1-of-5"> <p class="demo-block">Fifth Width</p> </div> <div class="layout__item u-1-of-5"> <p class="demo-block">Fifth Width</p> </div> <div class="layout__item u-1-of-5"> <p class="demo-block">Fifth Width</p> </div> <div class="layout__item u-1-of-5"> <p class="demo-block">Fifth Width</p> </div> <div class="layout__item u-1-of-5"> <p class="demo-block">Fifth Width</p> </div> </div>

Centered Layouts and Widths

NOTICE: How different sized elements flow to be inline with the others and are centered overall. This happens because certain pieces are missing. For example, we only have two u-1-of-3 width files.

Full Width

Half Width

Third Width

Third Width

Fourth Width

Fourth Width

Fourth Width

Fifth Width

Fifth Width

Fifth Width

Fifth Width

<h2 id="layouts-widths-centered">Centered Layouts and Widths</h2> <p><strong>NOTICE: How different sized elements flow to be inline with the others and are centered overall. This happens because certain pieces are missing. For example, we only have two u-1-of-3 width files.</strong></p> <div class="layout layout--center layout--middle"> <div class="layout__item"> <p class="demo-block">Full Width</p> </div> <div class="layout__item u-1-of-2"> <p class="demo-block">Half Width</p> </div> <div class="layout__item u-1-of-3"> <p class="demo-block">Third Width</p> </div> <div class="layout__item u-1-of-3"> <p class="demo-block">Third Width</p> </div> <div class="layout__item u-1-of-4"> <p class="demo-block">Fourth Width</p> </div> <div class="layout__item u-1-of-4"> <p class="demo-block">Fourth Width</p> </div> <div class="layout__item u-1-of-4"> <p class="demo-block">Fourth Width</p> </div> <div class="layout__item u-1-of-5"> <p class="demo-block">Fifth Width</p> </div> <div class="layout__item u-1-of-5"> <p class="demo-block">Fifth Width</p> </div> <div class="layout__item u-1-of-5"> <p class="demo-block">Fifth Width</p> </div> <div class="layout__item u-1-of-5"> <p class="demo-block">Fifth Width</p> </div> </div>

Packed Layouts and Widths

NOTICE: child elements within a parent element having a class of pack automatically resize to fill the parent element's width, regardless of the number of child elements. Below you'll see three examples of how child elements span the width of the parentpack element.

Item 1

Item 1

Item 2

Item 3

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

<h2 id="layouts-widths-pack">Packed Layouts and Widths</h2> <p><strong>NOTICE:</strong> child elements within a parent element having a class of <code>pack</code> automatically resize to fill the parent element's width, regardless of the number of child elements. Below you'll see three examples of how child elements span the width of the parent<code>pack</code> element.</p> <div class="pack"> <div class="pack__item"> <p class="demo-block">Item 1</p> </div> </div> <div class="pack"> <div class="pack__item"> <p class="demo-block">Item 1</p> </div> <div class="pack__item"> <p class="demo-block">Item 2</p> </div> <div class="pack__item"> <p class="demo-block">Item 3</p> </div> </div> <div class="pack"> <div class="pack__item"> <p class="demo-block">Item 1</p> </div> <div class="pack__item"> <p class="demo-block">Item 2</p> </div> <div class="pack__item"> <p class="demo-block">Item 3</p> </div> <div class="pack__item"> <p class="demo-block">Item 4</p> </div> <div class="pack__item"> <p class="demo-block">Item 5</p> </div> <div class="pack__item"> <p class="demo-block">Item 6</p> </div> <div class="pack__item"> <p class="demo-block">Item 7</p> </div> </div>

Text (Left)

This is left aligned

<h2 id="text-left">Text (Left)</h2> <p class="text--left">This is left aligned</p>

Text (Right)

This is right aligned

<h2 id="text-right">Text (Right)</h2> <p class="text--right">This is right aligned</p>

Text (Centered)

This is centered

<h2 id="text-center">Text (Centered)</h2> <p class="text--center">This is centered</p>

Text (Small)

I'm small text.

<h2 id="text-small">Text (Small)</h2> <p class="text--small">I'm small text.</p>

Text (Medium)

I'm medium text.

<h2 id="text-medium">Text (Medium)</h2> <p class="text--medium">I'm medium text.</p>

Text (Large)

I'm large text.

<h2 id="text-large">Text (Large)</h2> <p class="text--large">I'm large text.</p>

Text (Huge)

I'm huge text.

<h2 id="text-huge">Text (Huge)</h2> <p class="text--huge">I'm huge text.</p>

Left Image

Pitchfork meditation Truffaut, Tumblr freegan hella four dollar toast literally slow-carb quinoa. Wes Anderson occupy beard, direct trade kogi Pitchfork 8-bit. 8-bit stumptown health goth church-key, synth try-hard pug actually messenger bag DIY Vice. Portland polaroid 90's, crucifix authentic seitan typewriter trust fund. 3 wolf moon freegan Wes Anderson, Thundercats meh seitan before they sold out Blue Bottle hoodie banh mi pickled fingerstache Kickstarter. Drinking vinegar post-ironic cronut, Truffaut keytar deep v craft beer cardigan lomo meh roof party plaid farm-to-table. Before they sold out disrupt fingerstache, hella PBR salvia butcher four dollar toast aesthetic bitters gluten-free asymmetrical cliche yr.

<h2 id="images-left">Left Image</h2> <figure class="float--left"> <img src="//placehold.it/150x150/1ED897/000" alt=""> </figure> <p>Pitchfork meditation Truffaut, Tumblr freegan hella four dollar toast literally slow-carb quinoa. Wes Anderson occupy beard, direct trade kogi Pitchfork 8-bit. 8-bit stumptown health goth church-key, synth try-hard pug actually messenger bag DIY Vice. Portland polaroid 90's, crucifix authentic seitan typewriter trust fund. 3 wolf moon freegan Wes Anderson, Thundercats meh seitan before they sold out Blue Bottle hoodie banh mi pickled fingerstache Kickstarter. Drinking vinegar post-ironic cronut, Truffaut keytar deep v craft beer cardigan lomo meh roof party plaid farm-to-table. Before they sold out disrupt fingerstache, hella PBR salvia butcher four dollar toast aesthetic bitters gluten-free asymmetrical cliche yr.</p> <p class="clearfix"></p>

Left Image w/ Caption

I have a caption, too, too!

Lumbersexual beard readymade flexitarian bicycle rights, try-hard Neutra cray McSweeney's gastropub Vice. Etsy master cleanse church-key Godard. PBR Helvetica 90's mumblecore. Try-hard distillery VHS migas, asymmetrical normcore Bushwick Blue Bottle semiotics bespoke beard +1 mlkshk. Raw denim whatever sriracha Austin, farm-to-table jean shorts Brooklyn. Hoodie organic PBR cliche, literally raw denim food truck tofu lo-fi whatever. Letterpress lumbersexual yr pork belly salvia actually PBR sriracha, chillwave Shoreditch tattooed swag cronut occupy.

<h2 id="images-left-captioned">Left Image w/ Caption</h2> <figure class="float--left"> <img src="//placehold.it/150x150/1ED897/000" alt=""> <figcaption>I have a caption, too, too!</figcaption> </figure> <p>Lumbersexual beard readymade flexitarian bicycle rights, try-hard Neutra cray McSweeney's gastropub Vice. Etsy master cleanse church-key Godard. PBR Helvetica 90's mumblecore. Try-hard distillery VHS migas, asymmetrical normcore Bushwick Blue Bottle semiotics bespoke beard +1 mlkshk. Raw denim whatever sriracha Austin, farm-to-table jean shorts Brooklyn. Hoodie organic PBR cliche, literally raw denim food truck tofu lo-fi whatever. Letterpress lumbersexual yr pork belly salvia actually PBR sriracha, chillwave Shoreditch tattooed swag cronut occupy.</p> <p class="clearfix"></p>

Centered Image

<h2 id="images-center">Centered Image</h2> <figure class="float--center"> <img src="//placehold.it/1000x500/1ED897/000" alt=""> </figure> <p class="clearfix"></p>

Centered Image w/ Caption

I have a caption!

<h2 id="images-center-captioned">Centered Image w/ Caption</h2> <figure class="float--center"> <img src="//placehold.it/1000x500/1ED897/000" alt=""> <figcaption>I have a caption!</figcaption> </figure> <p class="clearfix"></p>

Right Image

Lumbersexual beard readymade flexitarian bicycle rights, try-hard Neutra cray McSweeney's gastropub Vice. Etsy master cleanse church-key Godard. PBR Helvetica 90's mumblecore. Try-hard distillery VHS migas, asymmetrical normcore Bushwick Blue Bottle semiotics bespoke beard +1 mlkshk. Raw denim whatever sriracha Austin, farm-to-table jean shorts Brooklyn. Hoodie organic PBR cliche, literally raw denim food truck tofu lo-fi whatever. Letterpress lumbersexual yr pork belly salvia actually PBR sriracha, chillwave Shoreditch tattooed swag cronut occupy.

<h2 id="images-right">Right Image</h2> <figure class="float--right"> <img src="//placehold.it/150x150/1ED897/000" alt=""> </figure> <p>Lumbersexual beard readymade flexitarian bicycle rights, try-hard Neutra cray McSweeney's gastropub Vice. Etsy master cleanse church-key Godard. PBR Helvetica 90's mumblecore. Try-hard distillery VHS migas, asymmetrical normcore Bushwick Blue Bottle semiotics bespoke beard +1 mlkshk. Raw denim whatever sriracha Austin, farm-to-table jean shorts Brooklyn. Hoodie organic PBR cliche, literally raw denim food truck tofu lo-fi whatever. Letterpress lumbersexual yr pork belly salvia actually PBR sriracha, chillwave Shoreditch tattooed swag cronut occupy.</p> <p class="clearfix"></p>

Right Image w/ Caption

I have a caption, too!

Lumbersexual beard readymade flexitarian bicycle rights, try-hard Neutra cray McSweeney's gastropub Vice. Etsy master cleanse church-key Godard. PBR Helvetica 90's mumblecore. Try-hard distillery VHS migas, asymmetrical normcore Bushwick Blue Bottle semiotics bespoke beard +1 mlkshk. Raw denim whatever sriracha Austin, farm-to-table jean shorts Brooklyn. Hoodie organic PBR cliche, literally raw denim food truck tofu lo-fi whatever. Letterpress lumbersexual yr pork belly salvia actually PBR sriracha, chillwave Shoreditch tattooed swag cronut occupy.

<h2 id="images-right-captioned">Right Image w/ Caption</h2> <figure class="float--right"> <img src="//placehold.it/150x150/1ED897/000" alt=""> <figcaption>I have a caption, too!</figcaption> </figure> <p>Lumbersexual beard readymade flexitarian bicycle rights, try-hard Neutra cray McSweeney's gastropub Vice. Etsy master cleanse church-key Godard. PBR Helvetica 90's mumblecore. Try-hard distillery VHS migas, asymmetrical normcore Bushwick Blue Bottle semiotics bespoke beard +1 mlkshk. Raw denim whatever sriracha Austin, farm-to-table jean shorts Brooklyn. Hoodie organic PBR cliche, literally raw denim food truck tofu lo-fi whatever. Letterpress lumbersexual yr pork belly salvia actually PBR sriracha, chillwave Shoreditch tattooed swag cronut occupy.</p> <p class="clearfix"></p>

Clearfix

Clearfixes are used when you need the content below an aligned image or button to start fresh on it's own line. Following are some examples of how this works.

<h2 id="images-clearfix">Clearfix</h2> <p>Clearfixes are used when you need the content below an aligned image or button to start fresh on it's own line. Following are some examples of how this works.</p> <p class="clearfix"></p>

Embeds: Video

<h2 id="embeds-video">Embeds: Video</h2> <div class="layout"> <div class="layout__item u-4-of-5-desk"> <div class="o-embed-container--video"> <iframe src="https://www.youtube.com/embed/VJIuuNuk4Bc" frameborder="0" allowfullscreen></iframe> </div> </div> </div>

Embeds: Map

<h2 id="embeds-map">Embeds: Map</h2> <div class="layout"> <div class="layout__item u-4-of-5-desk"> <div class="o-embed-container--map"> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d220449.3638420638!2d-97.8934825941348!3d30.30768634501006!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8644b599a0cc032f%3A0x5d9b464bd469d57a!2sAustin%2C+TX!5e0!3m2!1sen!2sus!4v1478903996623" frameborder="0" style="border:0" allowfullscreen></iframe> </div> </div> </div>

Alignment (Left)

Left Button

Lumbersexual beard readymade flexitarian bicycle rights, try-hard Neutra cray McSweeney's gastropub Vice. Etsy master cleanse church-key Godard. PBR Helvetica 90's mumblecore. Try-hard distillery VHS migas, asymmetrical normcore Bushwick Blue Bottle semiotics bespoke beard +1 mlkshk.

<h2 id="alignment-left">Alignment (Left)</h2> <a href="#" class="btn btn--primary alignleft">Left Button</a> <p>Lumbersexual beard readymade flexitarian bicycle rights, try-hard Neutra cray McSweeney's gastropub Vice. Etsy master cleanse church-key Godard. PBR Helvetica 90's mumblecore. Try-hard distillery VHS migas, asymmetrical normcore Bushwick Blue Bottle semiotics bespoke beard +1 mlkshk.</p>

Alignment (Left-Clearfix)

NOTICE: the clearfix keeps the block of text immediately after the button from wrapping around the edge of the button.

Lumbersexual beard readymade flexitarian bicycle rights, try-hard Neutra cray McSweeney's gastropub Vice. Etsy master cleanse church-key Godard. PBR Helvetica 90's mumblecore. Try-hard distillery VHS migas, asymmetrical normcore Bushwick Blue Bottle semiotics bespoke beard +1 mlkshk.

<h2 id="alignment-left-clearfix">Alignment (Left-Clearfix)</h2> <p><strong>NOTICE:</strong> the clearfix keeps the block of text immediately after the button from wrapping around the edge of the button.</p> <div class="clearfix"> <a href="#" class="btn btn--secondary alignleft">Left Button</a> </div> <p>Lumbersexual beard readymade flexitarian bicycle rights, try-hard Neutra cray McSweeney's gastropub Vice. Etsy master cleanse church-key Godard. PBR Helvetica 90's mumblecore. Try-hard distillery VHS migas, asymmetrical normcore Bushwick Blue Bottle semiotics bespoke beard +1 mlkshk.</p>

Alignment (Right)

Right Button

Lumbersexual beard readymade flexitarian bicycle rights, try-hard Neutra cray McSweeney's gastropub Vice. Etsy master cleanse church-key Godard. PBR Helvetica 90's mumblecore. Try-hard distillery VHS migas, asymmetrical normcore Bushwick Blue Bottle semiotics bespoke beard +1 mlkshk.

<h2 id="alignment-right">Alignment (Right)</h2> <a href="#" class="btn btn--secondary alignright">Right Button</a> <p>Lumbersexual beard readymade flexitarian bicycle rights, try-hard Neutra cray McSweeney's gastropub Vice. Etsy master cleanse church-key Godard. PBR Helvetica 90's mumblecore. Try-hard distillery VHS migas, asymmetrical normcore Bushwick Blue Bottle semiotics bespoke beard +1 mlkshk.</p>

Alignment (Right-Clearfix)

NOTICE: the clearfix keeps the block of text immediately after the button from wrapping around the edge of the button.

Lumbersexual beard readymade flexitarian bicycle rights, try-hard Neutra cray McSweeney's gastropub Vice. Etsy master cleanse church-key Godard. PBR Helvetica 90's mumblecore. Try-hard distillery VHS migas, asymmetrical normcore Bushwick Blue Bottle semiotics bespoke beard +1 mlkshk.

<h2 id="alignment-right-clearfix">Alignment (Right-Clearfix)</h2> <p><strong>NOTICE:</strong> the clearfix keeps the block of text immediately after the button from wrapping around the edge of the button.</p> <div class="clearfix"> <a href="#" class="btn btn--primary alignright">Right Button</a> </div> <p>Lumbersexual beard readymade flexitarian bicycle rights, try-hard Neutra cray McSweeney's gastropub Vice. Etsy master cleanse church-key Godard. PBR Helvetica 90's mumblecore. Try-hard distillery VHS migas, asymmetrical normcore Bushwick Blue Bottle semiotics bespoke beard +1 mlkshk.</p>

Alignment (Center)

<h2 id="alignment-center">Alignment (Center)</h2> <div class="text--center"> <a href="#" class="btn btn--primary">Center Button</a> </div>

Media Block (Normal)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. An est aliquid per se ipsum flagitiosum, etiamsi nulla comitetur infamia? Cuius ad naturam apta ratio vera illa et summa lex a philosophis dicitur. Occultum facinus esse potuerit, gaudebit; At eum nihili facit; Duo Reges: constructio interrete. Ut optime, secundum naturam affectum esse possit. Tantum dico, magis fuisse vestrum agere Epicuri diem natalem, quam illius testamento cavere ut ageretur. Multoque hoc melius nos veriusque quam Stoici. Quid enim necesse est, tamquam meretricem in matronarum coetum, sic voluptatem in virtutum concilium adducere? Immo alio genere;

<h2 id="media-normal">Media Block (Normal)</h2> <div class="media"> <img class="media__img" src="//placehold.it/400x200/1ED897/000" alt=""> <div class="media__body"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. An est aliquid per se ipsum flagitiosum, etiamsi nulla comitetur infamia? Cuius ad naturam apta ratio vera illa et summa lex a philosophis dicitur. <b>Occultum facinus esse potuerit, gaudebit;</b> At eum nihili facit; Duo Reges: constructio interrete. Ut optime, secundum naturam affectum esse possit. Tantum dico, magis fuisse vestrum agere Epicuri diem natalem, quam illius testamento cavere ut ageretur. Multoque hoc melius nos veriusque quam Stoici. Quid enim necesse est, tamquam meretricem in matronarum coetum, sic voluptatem in virtutum concilium adducere? <a href='http://loripsum.net/' target='_blank'>Immo alio genere;</a> </p> </div> </div>

Media Block (Caption)

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. An est aliquid per se ipsum flagitiosum, etiamsi nulla comitetur infamia? Cuius ad naturam apta ratio vera illa et summa lex a philosophis dicitur. Occultum facinus esse potuerit, gaudebit; At eum nihili facit; Duo Reges: constructio interrete. Ut optime, secundum naturam affectum esse possit. Tantum dico, magis fuisse vestrum agere Epicuri diem natalem, quam illius testamento cavere ut ageretur. Multoque hoc melius nos veriusque quam Stoici. Quid enim necesse est, tamquam meretricem in matronarum coetum, sic voluptatem in virtutum concilium adducere? Immo alio genere;

<h2 id="media-captioned">Media Block (Caption)</h2> <div class="media"> <div class="media__img"> <img src="//placehold.it/250x250/1ED897/000" alt=""> <p>Lorem ipsum dolor sit amet.</p> </div> <div class="media__body"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. An est aliquid per se ipsum flagitiosum, etiamsi nulla comitetur infamia? Cuius ad naturam apta ratio vera illa et summa lex a philosophis dicitur. <b>Occultum facinus esse potuerit, gaudebit;</b> At eum nihili facit; Duo Reges: constructio interrete. Ut optime, secundum naturam affectum esse possit. Tantum dico, magis fuisse vestrum agere Epicuri diem natalem, quam illius testamento cavere ut ageretur. Multoque hoc melius nos veriusque quam Stoici. Quid enim necesse est, tamquam meretricem in matronarum coetum, sic voluptatem in virtutum concilium adducere? <a href='http://loripsum.net/' target='_blank'>Immo alio genere;</a> </p> </div> </div>

Media Block (Reversed)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. An est aliquid per se ipsum flagitiosum, etiamsi nulla comitetur infamia? Cuius ad naturam apta ratio vera illa et summa lex a philosophis dicitur. Occultum facinus esse potuerit, gaudebit; At eum nihili facit; Duo Reges: constructio interrete. Ut optime, secundum naturam affectum esse possit. Tantum dico, magis fuisse vestrum agere Epicuri diem natalem, quam illius testamento cavere ut ageretur. Multoque hoc melius nos veriusque quam Stoici. Quid enim necesse est, tamquam meretricem in matronarum coetum, sic voluptatem in virtutum concilium adducere? Immo alio genere;

<h2 id="media-reversed">Media Block (Reversed)</h2> <div class="media media--rev"> <img class="media__img" src="//placehold.it/400x200/1ED897/000" alt=""> <div class="media__body"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. An est aliquid per se ipsum flagitiosum, etiamsi nulla comitetur infamia? Cuius ad naturam apta ratio vera illa et summa lex a philosophis dicitur. <b>Occultum facinus esse potuerit, gaudebit;</b> At eum nihili facit; Duo Reges: constructio interrete. Ut optime, secundum naturam affectum esse possit. Tantum dico, magis fuisse vestrum agere Epicuri diem natalem, quam illius testamento cavere ut ageretur. Multoque hoc melius nos veriusque quam Stoici. Quid enim necesse est, tamquam meretricem in matronarum coetum, sic voluptatem in virtutum concilium adducere? <a href='http://loripsum.net/' target='_blank'>Immo alio genere;</a> </p> </div> </div>

Media Block (Reversed, Captioned)

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. An est aliquid per se ipsum flagitiosum, etiamsi nulla comitetur infamia? Cuius ad naturam apta ratio vera illa et summa lex a philosophis dicitur. Occultum facinus esse potuerit, gaudebit; At eum nihili facit; Duo Reges: constructio interrete. Ut optime, secundum naturam affectum esse possit. Tantum dico, magis fuisse vestrum agere Epicuri diem natalem, quam illius testamento cavere ut ageretur. Multoque hoc melius nos veriusque quam Stoici. Quid enim necesse est, tamquam meretricem in matronarum coetum, sic voluptatem in virtutum concilium adducere? Immo alio genere;

<h2 id="media-reversed-captioned">Media Block (Reversed, Captioned)</h2> <div class="media media--rev"> <div class="media__img"> <img src="//placehold.it/400x200/1ED897/000" alt=""> <p>Lorem ipsum dolor sit amet.</p> </div> <div class="media__body"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. An est aliquid per se ipsum flagitiosum, etiamsi nulla comitetur infamia? Cuius ad naturam apta ratio vera illa et summa lex a philosophis dicitur. <b>Occultum facinus esse potuerit, gaudebit;</b> At eum nihili facit; Duo Reges: constructio interrete. Ut optime, secundum naturam affectum esse possit. Tantum dico, magis fuisse vestrum agere Epicuri diem natalem, quam illius testamento cavere ut ageretur. Multoque hoc melius nos veriusque quam Stoici. Quid enim necesse est, tamquam meretricem in matronarum coetum, sic voluptatem in virtutum concilium adducere? <a href='http://loripsum.net/' target='_blank'>Immo alio genere;</a> </p> </div> </div>

Margins

NOTE: the red borders are only for illustrative purposes. They're not part of the display of the classes.

u-m

u-mt

u-mr

u-mb

u-ml

u-mh

u-mv

push--small (note the whitespace around this object)

push--medium (note the whitespace around this object)

push--large (note the whitespace around this object)

push--huge (note the whitespace around this object)

 

u-m0

u-mt0

u-mr0

u-mb0

u-ml0

u-mh0

u-mv0

<h2 id="utilities-margin">Margins</h2> <p>NOTE: the red borders are only for illustrative purposes. They're not part of the display of the classes.</p> <div class="layout layout--center"> <div class="layout__item u-3-of-4"> <p style="border-bottom: 1px solid red;" class=" u-m"><code>u-m</code></p> <p style="border-bottom: 1px solid red;" class=" u-mt"><code>u-mt</code></p> <p style="border-bottom: 1px solid red;" class=" u-mr"><code>u-mr</code></p> <p style="border-bottom: 1px solid red;" class=" u-mb"><code>u-mb</code></p> <p style="border-bottom: 1px solid red;" class=" u-ml"><code>u-ml</code></p> <p style="border-bottom: 1px solid red;" class=" u-mh"><code>u-mh</code></p> <p style="border-bottom: 1px solid red;" class=" u-mv"><code>u-mv</code></p> <p style="border-bottom: 1px solid red;" class=" push--small"><code>push--small (note the whitespace around this object)</code></p> <p style="border-bottom: 1px solid red;" class=" push--medium"><code>push--medium (note the whitespace around this object)</code></p> <p style="border-bottom: 1px solid red;" class=" push--large"><code>push--large (note the whitespace around this object)</code></p> <p style="border-bottom: 1px solid red;" class=" push--huge"><code>push--huge (note the whitespace around this object)</code></p> <p>&nbsp;</p> <p style="border-bottom: 1px solid red; margin: 40px;" class=" u-mb0"><code>u-m0</code></p> <p style="border-bottom: 1px solid red; margin: 40px;" class=" u-mt0"><code>u-mt0</code></p> <p style="border-bottom: 1px solid red; margin: 40px;" class=" u-mr0"><code>u-mr0</code></p> <p style="border-bottom: 1px solid red; margin: 40px;" class=" u-mb0"><code>u-mb0</code></p> <p style="border-bottom: 1px solid red; margin: 40px;" class=" u-ml0"><code>u-ml0</code></p> <p style="border-bottom: 1px solid red; margin: 40px;" class=" u-mh0"><code>u-mh0</code></p> <p style="border-bottom: 1px solid red; margin: 40px;" class=" u-mv0"><code>u-mv0</code></p> </div> </div>

Padding

NOTE: the red borders are only for illustrative purposes. They're not part of the display of the classes.

u-p

u-pt

u-pr

u-pb

u-pl

u-ph

u-pv

 

u-p0

u-pt0

u-pr0

u-pb0

u-pl0

u-ph0

u-pv0

<h2 id="utilities-padding">Padding</h2> <p>NOTE: the red borders are only for illustrative purposes. They're not part of the display of the classes.</p> <div class="layout layout--center"> <div class="layout__item u-3-of-4"> <p style="border-bottom: 1px solid red;" class=" u-p"><code>u-p</code></p> <p style="border-bottom: 1px solid red;" class=" u-pt"><code>u-pt</code></p> <p style="border-bottom: 1px solid red;" class=" u-pr"><code>u-pr</code></p> <p style="border-bottom: 1px solid red;" class=" u-pb"><code>u-pb</code></p> <p style="border-bottom: 1px solid red;" class=" u-pl"><code>u-pl</code></p> <p style="border-bottom: 1px solid red;" class=" u-ph"><code>u-ph</code></p> <p style="border-bottom: 1px solid red;" class=" u-pv"><code>u-pv</code></p> <p>&nbsp;</p> <p style="border-bottom: 1px solid red; padding: 40px;" class=" u-pb0"><code>u-p0</code></p> <p style="border-bottom: 1px solid red; padding: 40px;" class=" u-pt0"><code>u-pt0</code></p> <p style="border-bottom: 1px solid red; padding: 40px;" class=" u-pr0"><code>u-pr0</code></p> <p style="border-bottom: 1px solid red; padding: 40px;" class=" u-pb0"><code>u-pb0</code></p> <p style="border-bottom: 1px solid red; padding: 40px;" class=" u-pl0"><code>u-pl0</code></p> <p style="border-bottom: 1px solid red; padding: 40px;" class=" u-ph0"><code>u-ph0</code></p> <p style="border-bottom: 1px solid red; padding: 40px;" class=" u-pv0"><code>u-pv0</code></p> </div> </div>

Hidden Utilities

NOTICE: These classes keep content from appearing, BUT the content can still be seen if someone looks at the page source. DO NOT use these for anything sensitive. They are more for when certain images and/or text need to be hidden on one platform (mobile, desktop) and shown on the other.

You can hide items with the is-hidden class. This is grreat for hiding content from being displayed without putting HTML comments around everything. Simply wrap what you want to hide in a DIV and add the is-hidden class.

You can also modify the is-hidden class to hide items only on desktop or only on mobile. For example, to hide on mobile simply use the palm-is-hidden class.

To hide on tablets and desktops, use the desk-is-hidden class.

I'm hidden on mobile.

I'm hidden on tablets and desktop layouts.

If you want to truly HIDE content on the site, but still keep it available in the editor, please use the [hidden] shortcode.

[hidden]
    This is sensitive content that should be hidden,
    but is still visible in the editor.
[/hidden]
<h2 id="utilities-hidden">Hidden Utilities</h2> <p><strong>NOTICE:</strong> These classes keep content from appearing, BUT the content can still be seen if someone looks at the page source. DO NOT use these for anything sensitive. They are more for when certain images and/or text need to be hidden on one platform (mobile, desktop) and shown on the other.</p> <p>You can hide items with the <code>is-hidden</code> class. This is grreat for hiding content from being displayed without putting HTML comments around everything. Simply wrap what you want to hide in a DIV and add the <code>is-hidden</code> class.</p> <div class="is-hidden"> <p>I'm a hidden sentence.</p> </div> <p>You can also modify the is-hidden class to hide items only on desktop or only on mobile. For example, to hide on mobile simply use the <code>palm-is-hidden</code> class.</p> <p>To hide on tablets and desktops, use the <code>desk-is-hidden</code> class.</p> <div class="palm-is-hidden"> <p>I'm hidden on mobile.</p> </div> <div class="desk-is-hidden"> <p>I'm hidden on tablets and desktop layouts.</p> </div> <p>If you want to truly HIDE content on the site, but still keep it available in the editor, please use the <code>[hidden]</code> shortcode.</p> <code><pre> [hidden] This is sensitive content that should be hidden, but is still visible in the editor. [/hidden] </pre></code>