This is a header one.

<h1>This is a header one.</h1>

This is a header two.

<h2>This is a header two.</h2>

This is a header three.

<h3>This is a header three.</h3>

This is a header four.

<h4>This is a header four.</h4>
This is a header five.
<h5>This is a header five.</h5>
This is a header six.
<h6>This is a header six.</h6>

This is a sentence wrapped in paragraph tags.

<p>This is a sentence wrapped in paragraph tags.</p>

This is a link.

<a href="#">This is a link</a>

This is bold text.

<strong>This is bold text</strong>

This is italic text.

<em>This is italic text</em>

This is code that we want to display: .blue{color:blue}

<pre><code>.blue{color:blue}</code></pre>

This is the horizontal rule:


<hr />
This is a sentence wrapped in blockquote tags.
<blockquote>This is a sentence wrapped in blockquote tags.</blockquote>
  • This
  • is
  • an
  • unordered
  • list.
<ul>
<li>This</li>
<li>is</li>
<li>an</li>
<li>unordered</li>
<li>list.</li>
</ul>
  1. This
  2. is
  3. an
  4. ordered
  5. list.
<ol>
<li>This</li>
<li>is</li>
<li>an</li>
<li>ordered</li>
<li>list.</li>
</ol>

<input type="text" value="This is a text input." size="25" />

<textarea rows="5" cols="50">This is a textarea.</textarea>

<input type="submit" value="This is a submit input." />

This is an image.

<img src="img.jpg" alt="This is an image." />

This is the default button.

<a href="#" class="button">This is the default button.</a>

This is a button set to white.

<a href="#" class="button white">This is a button set to white.</a>

This is a button set to blue.

<a href="#" class="button blue">This is a button set to blue.</a>

This is a button set to dark blue.

<a href="#" class="button blue-dark">This is a button set to dark blue.</a>

This is a button set to green.

<a href="#" class="button green">This is a button set to green.</a>

This is a button set to dark green.

<a href="#" class="button green-dark">This is a button set to dark green.</a>

This is a button set to orange.

<a href="#" class="button orange">This is a button set to orange.</a>

This is a button set to purple.

<a href="#" class="button purple">This is a button set to purple.</a>

This is a button set to red.

<a href="#" class="button red">This is a button set to red.</a>

This is a button set to yellow.

<a href="#" class="button yellow">This is a button set to yellow.</a>

This is a button set to black.

<a href="#" class="button black">This is a button set to black.</a>
This is a caution note.
<span class="note yellow">This is a caution note.</span>
This is a warning note.
<span class="note red">This is a warning note.</span>

This is a single-column box.
<div class="boxes">
<div class="box">This is a single-column box.</div>
</div>

This is a two-column box.
This is a two-column box.
<div class="boxes">
<div class="box-2">This is a two-column box.</div>
<div class="box-2">This is a two-column box.</div>
</div>

This is a three-column box.
This is a three-column box.
This is a three-column box.
<div class="boxes">
<div class="box-3">This is a three-column box.</div>
<div class="box-3">This is a three-column box.</div>
<div class="box-3">This is a three-column box.</div>
</div>

This is a four-column box.
This is a four-column box.
This is a four-column box.
This is a four-column box.
<div class="boxes">
<div class="box-4">This is a four-column box.</div>
<div class="box-4">This is a four-column box.</div>
<div class="box-4">This is a four-column box.</div>
<div class="box-4">This is a four-column box.</div>
</div>

This is a five-column box.
This is a five-column box.
This is a five-column box.
This is a five-column box.
This is a five-column box.
<div class="boxes">
<div class="box-5">This is a five-column box.</div>
<div class="box-5">This is a five-column box.</div>
<div class="box-5">This is a five-column box.</div>
<div class="box-5">This is a five-column box.</div>
<div class="box-5">This is a five-column box.</div>
</div>

This is a six-column box.
This is a six-column box.
This is a six-column box.
This is a six-column box.
This is a six-column box.
This is a six-column box.
<div class="boxes">
<div class="box-6">This is a six-column box.</div>
<div class="box-6">This is a six-column box.</div>
<div class="box-6">This is a six-column box.</div>
<div class="box-6">This is a six-column box.</div>
<div class="box-6">This is a six-column box.</div>
<div class="box-6">This is a six-column box.</div>
</div>

This is a one-thirds box.
This is a two-thirds box.
<div class="boxes">
<div class="box-1-3">This is a one-third box.</div>
<div class="box-2-3">This is a two-thirds box.</div>
</div>

Additional Helper Classes

.left{text-align:left}
.center{text-align:center}
.right{text-align:right}
.float-left{float:left}
.float-right{float:right}
.clear{clear:both}
.clear-left{clear:left}
.clear-right{clear:right}
.clear-float:after{display:table;content:"";clear:both}