HTML test content to check for unstyled HTML elements. Doubles as style guide content. Contains markup from Gravity Forms and Tablepress Wordpress plugins.

HTML Test Content

<div class="single-column">
<h2>Colours</h2>
<div class="colours wrapper">
<div class="third nested">
<div class="brand-color-primary-dark">Primary Dark</div>
<div class="brand-color-primary">Primary Colour</div>
<div class="brand-color-primary-light">Primary Light</div>
<div class="brand-color-primary-lighter">Primary Lighter</div>
</div>
<div class="third nested">
<div class="brand-color-secondary">Secondary Colour</div>
<div class="brand-color-secondary-light">Secondary Light</div>
<div class="brand-color-off-white">Off White</div>
<div class="brand-color-accent">Accent Colour</div>
</div>
<div class="third nested">
<div class="brand-color-text-primary">Text Primary</div>
<div class="brand-color-text-secondary">Text Secondary</div>
<div class="brand-color-text-headings">Text Headings</div>
<div class="brand-color-white">White (icons &amp; text)</div>
</div>
</div>

<h2>Elements in context</h2>
This standard paragraph features HTML elements in context. This is <a href="#">an example of a link</a> and these are some of the most common inline styles such as <strong>strong</strong> and <em>emphasis</em>. This is <strong><em>strong and emphasis</em></strong> and <em><strong>emphasis and strong</strong></em> to check fonts. It also shows examples of <sub>sub</sub> text and <sup>sup</sup> text. Here we can see <code>some inline code</code>. This is the <abbr title="Abbreviation">ABBR</abbr> element. This is the <b>b</b> element. This is the <cite>cite</cite> element. This is the <code>code</code> element. This is the <del>del</del> element. This is the <dfn>dfn</dfn> element. This is the <em>em</em> element. This is the <i>i</i> element. This is the <ins>ins</ins> element. This is the <kbd>kbd</kbd> element. This is the <mark>mark</mark> element. This is the <samp>samp</samp> element. This is the <small>small</small> element. This is the <var>var</var> element.
<h1>This is a H1 heading that is quite long to check the wrapping and line-height</h1>
<p class="lead">This first paragraph has an 'lead' class applied and should demonstrate visual hierarchy. The following paragraphs are simply to show the heading tags in context so use Lorem Ipsum filler text. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus.</p>

<h2>This is a H2 heading that is quite long to check the wrapping and line-height</h2>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

<h3>This is a H3 heading that is quite long to check the wrapping and line-height</h3>
<img class="right" src="http://placehold.it/300x300">This image has a class of 'right' applied and should be floated right. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.

<small>This piece of text has been wrapped in a <code>&lt;small&gt;</code> tag.</small>

<h4>This is a H4 heading</h4>
I like to keep typography simple and limit headings to four sizes, so <code>&lt;H5&gt;</code> &amp; <code>&lt;H6&gt;</code> often get styled the same as <code>&lt;H4&gt;</code>.

<h5>This is a H5 heading</h5>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

<h6>This is a H6 heading</h6>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

<h1>H1 with <small>small text</small> and a <a href="#">link</a></h1>
<h2>H2 with <small>small text</small> and a <a href="#">link</a></h2>
<h3>H3 with <small>small text</small> and a <a href="#">link</a></h3>
<h4>H4 with <small>small text</small> and a <a href="#">link</a></h4>
<h5>H5 with <small>small text</small> and a <a href="#">link</a></h5>
<h6>H6 with <small>small text</small> and a <a href="#">link</a></h6>

<hr>

<div class="box-warning">This is a <strong>warning</strong> box</div>
<div class="box-info">This is an <strong>information </strong>box</div>
<div class="box-success">This is a <strong>success</strong> box</div>
<div class="box-error">This is an <strong>error</strong> box</div>

<hr>

<h2>Lists</h2>

<h3>Definition List</h3>
<dl><dt>Definition List Title 1</dt><dd>This is a definition list division.</dd><dt>Definition List Title 1</dt><dd>This is a definition list division.</dd><dt>Definition List Title 1</dt><dd>This is a definition list division.</dd></dl>
<div class="wrapper">
<div class="half nested">
<h3>Ordered List</h3>
<ol>
	<li>List Item 1</li>
	<li>List Item 2</li>
	<li>List Item 3
<ol>
	<li>Sub List Item 1</li>
	<li>Sub List Item 2</li>
	<li>Sub List Item 3</li>
</ol>
</li>
	<li>List Item 4</li>
	<li>List Item 5</li>
	<li>List Item 6</li>
</ol>
</div>
<div class="half nested">
<h3>Unordered List</h3>
<ul>
	<li>List Item 1</li>
	<li>List Item 2</li>
	<li>List Item 3
<ul>
	<li>Sub List Item 1</li>
	<li>Sub List Item 2</li>
	<li>Sub List Item 3</li>
</ul>
</li>
	<li>List Item 4</li>
	<li>List Item 5</li>
	<li>List Item 6</li>
</ul>
</div>
</div>

<hr>

<h2>An example of a blockquote</h2>
<blockquote>"This is a real handy page of HTML elements"
<cite>~ No One (Ever)</cite></blockquote>

<hr>

<h2>Buttons</h2>
<div class="wrapper buttons">
<div class="half nested">
<button class="btn" type="button">Default button</button>
<button class="btn cta" type="button">Default CTA button</button>
</div>
<div class="half nested">
<a class="btn" href="#" type="button">Link with .btn</a>
<a class="btn cta" href="#" type="button">Link with .btn.cta</a>
</div>
</div>
<div class="wrapper buttons reversed">
<div class="half nested">
<button class="btn alt" type="button">Default alt button</button>
<button class="btn cta alt" type="button">Default alt CTA button</button>
</div>
<div class="half nested">
<a class="btn alt" href="#" type="button">Link with .btn.alt</a>
<a class="btn cta alt" href="#" type="button">Link with .btn.cta.alt</a>
</div>
</div>

<hr>

<h2>Forms<br>
<small>(markup from Gravity Forms plugin)</small></h2>

<div id="gform_wrapper_4" class="gf_browser_chrome gform_wrapper">
<form id="gform_4" action="/?gf_page=preview&amp;id=4" enctype="multipart/form-data" method="post">

<div class="gform_heading">
<h3 class="gform_title">Example Form</h3>
<span class="gform_description">We would love to hear from you! Please fill out this form and we will get in touch with you shortly.</span>
</div>

<div class="gform_body">
<ul id="gform_fields_4" class="gform_fields top_label description_above"><li id="field_4_2" class="gfield gfield_contains_required"><label class="gfield_label" for="input_4_2_3">Name<span class="gfield_required">*</span></label><div id="input_4_2" class="ginput_complex ginput_container"><span id="input_4_2_3_container" class="ginput_left"><input id="input_4_2_3" tabindex="1" name="input_2.3" type="text" value="" /> <label for="input_4_2_3">First</label></span><span id="input_4_2_6_container" class="ginput_right"><input id="input_4_2_6" tabindex="2" name="input_2.6" type="text" value="" /> <label for="input_4_2_6">Last</label></span></div></li><li id="field_4_3" class="gfield"><label class="gfield_label" for="input_4_3">Website</label><div class="ginput_container"><input id="input_4_3" class="medium" tabindex="3" name="input_3" type="url" value="" placeholder="http://" /></div></li><li id="field_4_4" class="gfield gfield_contains_required"><label class="gfield_label" for="input_4_4">Email<span class="gfield_required">*</span></label><div class="ginput_container"><input id="input_4_4" class="medium" tabindex="4" name="input_4" type="email" value="" /></div></li><li id="field_4_5" class="gfield"><label class="gfield_label" for="input_4_5">Phone</label><div class="ginput_container"><input id="input_4_5" class="medium" tabindex="5" name="input_5" type="tel" value="" /></div></li><li id="field_4_1" class="gfield"><label class="gfield_label" for="input_4_1">Regular Text Input</label><div class="ginput_container"><input id="input_4_1" class="medium" tabindex="6" name="input_1" type="text" value="" /></div><div class="gfield_description">A description for the form field, should you need it.</div></li><li id="field_4_6" class="gfield"><label class="gfield_label" for="input_4_6">A Dropdown</label><div class="ginput_container"><select id="input_4_6" class="medium gfield_select" tabindex="7" name="input_6"><option value="First Choice">First Choice</option><option value="Second Choice">Second Choice</option><option value="Third Choice">Third Choice</option></select></div></li><li id="field_4_7" class="gfield"><label class="gfield_label">Checkboxes</label><div class="ginput_container"><ul id="input_4_7" class="gfield_checkbox"><li class="gchoice_7_1"><input id="choice_7_1" tabindex="8" name="input_7.1" type="checkbox" value="First Choice" /> <label for="choice_7_1">First Choice</label></li><li class="gchoice_7_2"><input id="choice_7_2" tabindex="9" name="input_7.2" type="checkbox" value="Second Choice" /> <label for="choice_7_2">Second Choice</label></li><li class="gchoice_7_3"><input id="choice_7_3" tabindex="10" name="input_7.3" type="checkbox" value="Third Choice" /> <label for="choice_7_3">Third Choice</label></li></ul></div></li><li id="field_4_8" class="gfield"><label class="gfield_label">Radio Buttons</label><div class="ginput_container"><ul id="input_4_8" class="gfield_radio">
<li class="gchoice_8_0"><input id="choice_8_0" tabindex="11" name="input_8" type="radio" value="First Choice" /> <label for="choice_8_0">First Choice</label></li><li class="gchoice_8_1"><input id="choice_8_1" tabindex="12" name="input_8" type="radio" value="Second Choice" /> <label for="choice_8_1">Second Choice</label></li>
<li class="gchoice_8_2"><input id="choice_8_2" tabindex="13" name="input_8" type="radio" value="Third Choice" /> <label for="choice_8_2">Third Choice</label></li></ul></div></li><li id="field_4_9" class="gfield">
<label class="gfield_label" for="input_4_9">A Textarea</label><div class="ginput_container">
<textarea id="input_4_9" class="textarea medium" tabindex="14" cols="50" name="input_9" rows="10"></textarea>
</div></li></ul></div><div class="gform_footer top_label"><input id="gform_submit_button_4" class="button gform_button" tabindex="15" type="submit" value="Submit" /></div>

</form>
</div>

<hr>

<h2>Tables<br>
<small>(markup from Tablepress plugin)</small></h2>

<table id="tablepress-1" class="tablepress tablepress-id-1">
<thead>
<tr class="row-1 odd">
<th class="column-1">Column 1</th>
<th class="column-2">Column 2</th>
<th class="column-3">Column 3</th>
</tr>
</thead>
<tfoot>
<tr class="row-5 odd">
<th class="column-1">Col 1 Footer</th>
<th class="column-2">Col 2 Footer</th>
<th class="column-3">Col 3 Footer</th>
</tr>
</tfoot>
<tbody class="row-hover">
<tr class="row-2 even">
<td class="column-1">100</td>
<td class="column-2">200</td>
<td class="column-3">300</td>
</tr>
<tr class="row-3 odd">
<td class="column-1">1000</td>
<td class="column-2">2000</td>
<td class="column-3">3000</td>
</tr>
<tr class="row-4 even">
<td class="column-1">AAAA</td>
<td class="column-2">BBBB</td>
<td class="column-3">CCCC</td>
</tr>
</tbody>
</table>
</div>