Typography

Paragraphs

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat

El illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

Blockquote

lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio Someone Important

Blockquote Small

lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio Someone Important

Inline Styles

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Address

1234 South Creek Lane
Calgary, Alberta, Canada
T4B–1S6 

	<!-- Headings 1–6 -->
	<h1>Heading 1</h1>
	<h2>Heading 2</h2>
	<h3>Heading 3</h3>
	<h4>Heading 4</h4>
	<h5>Heading 5</h5>
	<h6>Heading 6</h6>
	<!-- Paragraph -->
	<p>Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt...</p>
	<p>El illum dolore eu feugiat nulla facilisis at vero eros et accumsan...</p>
	<!-- Blockquote -->
	<blockquote>
	<p>
	lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit 
	in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan 
	et iusto odio
	<span>Someone Important</span>
	</p>
	</blockquote>
	<!-- Blockquote Small -->
	<blockquote class="small">
	<p>
	lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit 
	in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan 
	et iusto odio
	<span>Someone Important</span>
	</p>
	</blockquote>
	<!-- Strong -->
	<strong>Strong</strong>
	
	<!-- Emphasis -->
	<em>Emphasis</em>
	
	<!-- Inline Link -->
	<a href="">Inline Link</a>
	
	<!-- Strike -->
	<strike>Strike</strike>
	<!-- Address -->
	<address><p>
	1234 South Creek Lane<br />
	Calgary, Alberta, Canada<br />
	T4B–1S6
	</p>
	</address>

Lists

Unordered List

  • tation ullamcorper suscipit lobortis
  • Nam liber tempor cum soluta nobis
  • imperdiet doming id quod mazim
  • suscipit lobortis nisl ut aliquip ex

Ordered List

  1. tation ullamcorper suscipit lobortis
  2. Nam liber tempor cum soluta nobis
  3. imperdiet doming id quod mazim
  4. suscipit lobortis nisl ut aliquip ex

UL.checks

  • tation ullamcorper suscipit lobortis
  • Nam liber tempor cum soluta nobis
  • imperdiet doming id quod mazim
  • suscipit lobortis nisl ut aliquip ex

UL.alt

  • tation ullamcorper suscipit lobortis
  • Nam liber tempor cum soluta nobis
  • imperdiet doming id quod mazim
  • suscipit lobortis nisl ut aliquip ex
	<!-- Unordered List -->
	<ul>
	<li>tation ullamcorper suscipit lobortis</li>
	<li>Nam liber tempor cum soluta nobis</li>
	<li>imperdiet doming id quod mazim</li>
	<li>suscipit lobortis nisl ut aliquip ex</li>
	</ul>
	<!-- Ordered List -->
	<ol>
	<li>tation ullamcorper suscipit lobortis</li>
	<li>Nam liber tempor cum soluta nobis</li>
	<li>imperdiet doming id quod mazim</li>
	<li>suscipit lobortis nisl ut aliquip ex</li>
	</ol>
	<!-- List Checks -->
	<ul class="checks">
	<li>tation ullamcorper suscipit lobortis</li>
	<li>Nam liber tempor cum soluta nobis</li>
	<li>imperdiet doming id quod mazim</li>
	<li>suscipit lobortis nisl ut aliquip ex</li>
	</ul>
	<!-- List Alternative Style -->
	<ul class="alt">
	<li>tation ullamcorper suscipit lobortis</li>
	<li>Nam liber tempor cum soluta nobis</li>
	<li>imperdiet doming id quod mazim</li>
	<li>suscipit lobortis nisl ut aliquip ex</li>
	</ul>

Vertical Left

Horizontal

Vertical Right

	<!-- Menu Vertical Left -->
	<ul class="sf-menu vertical">
	<li class="current"><a href="">Item 1</a></li>
	<li><a href="">Item 2</a></li>
	<li><a href="">Item 3</a>
		<ul>
		<li><a href="">Sub Item</a></li>
		<li><a href="">Sub Item</a>
			<ul>
			<li><a href="">Sub Item</a></li>
			<li><a href="">Sub Item</a></li>
			<li><a href="">Sub Item</a></li>
			<li><a href="">Sub Item</a></li>
			</ul>
		</li>
		<li><a href="">Sub Item</a></li>
		</ul>
	</li>
	<li><a href="">Item 4</a></li>
	</ul>
	<!-- Menu Horizontal -->
	<ul class="sf-menu">
	<li class="current"><a href="">Item 1</a></li>
	<li><a href="">Item 2</a></li>
	<li><a href="">Item 3</a>
		<ul>
		<li><a href="">Sub Item</a></li>
		<li><a href="">Sub Item</a>
			<ul>
			<li><a href="">Sub Item</a></li>
			<li><a href="">Sub Item</a></li>
			<li><a href="">Sub Item</a></li>
			<li><a href="">Sub Item</a></li>
			</ul>
		</li>
		<li><a href="">Sub Item</a></li>
		</ul>
	</li>
	<li><a href="">Item 4</a></li>
	</ul>
	<!-- Menu Vertical Right -->
	<ul class="sf-menu vertical right">
	<li><a href="">Item 1</a></li>
	<li><a href="">Item 2</a></li>
	<li><a href="">Item 3</a>
		<ul>
		<li><a href="">Sub Item</a></li>
		<li class="current"><a href="">Sub Item</a>
			<ul>
			<li><a href="">Sub Item</a></li>
			<li><a href="">Sub Item</a></li>
			<li><a href="">Sub Item</a></li>
			<li><a href="">Sub Item</a></li>
			</ul>
		</li>
		<li><a href="">Sub Item</a></li>
		</ul>
	</li>
	<li><a href="">Item 4</a></li>
	</ul>

Tables

Table

Item1 Item2 Item3
Item1 Item2 Item3
Item1 Item2 Item3
Item1 Item2 Item3
Item1 Item2 Item3

Table w/side TH

  Item2 Item3
Item1 Item2 Item3
Item1 Item2 Item3
Item1 Item2 Item3
Item1 Item2 Item3 
	<!-- Table -->
	<table cellspacing="0" cellpadding="0">
	<thead><tr>
		<th>Item1</th>
		<th>Item2</th>
		<th>Item3</th>
	</tr></thead>
	<tbody><tr>
		<td>Item1</td>
		<td>Item2</td>
		<td>Item3</td>
	</tr><tr>
		<td>Item1</td>
		<td>Item2</td>
		<td>Item3</td>
	</tr><tr>
		<td>Item1</td>
		<td>Item2</td>
		<td>Item3</td>
	</tr><tr>
		<td>Item1</td>
		<td>Item2</td>
		<td>Item3</td>
	</tr></tbody>
	</table>
	<!-- Table w/Side -->
	<table cellspacing="0" cellpadding="0">
	<thead><tr>
		<th> </th>
		<th>Item2</th>
		<th>Item3</th>
	</tr></thead>
	<tbody><tr>
		<th>Item1</th>
		<td>Item2</td>
		<td>Item3</td>
	</tr><tr>
		<th>Item1</th>
		<td>Item2</td>
		<td>Item3</td>
	</tr><tr>
		<th>Item1</th>
		<td>Item2</td>
		<td>Item3</td>
	</tr><tr>
		<th>Item1</th>
		<td>Item2</td>
		<td>Item3</td>
	</tr></tbody>
	</table>

Horizontal Rules

HR

HR.alt1

HR.alt2

	<!-- HR -->
	<hr />
	
	<!-- HR.alt1 -->
	<hr class="alt1" />
	
	<!-- HR.alt2 -->
	<hr class="alt2" />

Code/Pre

PRE.html

	<html>
	<head><title>This is a title</title></head>
	<body class="subpage">
		<!-- Content Here -->
	</body>
	</html>

PRE.css

	body{
	font-weight:bold;
	color:#000;
	line-height:150%;
	}

PRE.js

	$(document).ready(function(){
		alert('jQuery');
	});
	
	<!-- Code HTML -->
	<pre class="html">
	…code goes here… 
	</pre>
	<!-- Code CSS -->
	<pre class="css">
	…code goes here… 
	</pre>
	<!-- Code Javascript -->
	<pre class="js">
	…code goes here… 
	</pre>
	<!-- Code PHP -->
	<pre class="php">
	…code goes here… 
	</pre>

Buttons

Buttons

A.button


Buttons w/Icons




Button Colors

.orange


	<!-- Button Sizes -->
	<button>Button</button>
	<a class="button" href="">A.button</a>
	<button class="small">Small</button>
	<button class="small" disabled="disabled">Small (disabled)</button>
	<button class="medium">Medium</button>
	<button class="large">Large</button>
	<!-- Buttons w/Icons -->
	<button class="small"><img src="css/img/iconic/gray_dark/arrow_down_16x16.png" alt="arrow_down_16x16" width="16" height="16" />Small</button>
	<button class="medium"><img src="css/img/iconic/gray_dark/clock_24x24.png" alt="clock_24x24" width="24" height="24" />Medium</button>
	<button class="large"><img src="css/img/iconic/gray_dark/tag_fill_32x32.png" alt="tag_fill_32x32" width="32" height="32" />Large</button>
	<button class="medium icon-only"><img src="css/img/iconic/gray_dark/magnifying_glass_16x16.png" alt="magnifying_glass_16x16" width="16" height="16" /></button>
	<!-- Buttons w/Colors -->
	<button class="blue">.blue</button>
	<a class="button orange" href="">.orange</a>
	<button class="small pink">.pink</button>
	<button class="small" disabled="disabled">Small (disabled)</button>
	<button class="medium green">.green</button>
	<button class="large red">.red</button>

Tabs

Tabs.left

Tab1
Tab2
Tab3

Tabs.center

Tab1
Tab2
Tab3

Tabs.right

Tab1
Tab2
Tab3
	<!-- Tabs Left -->
	<ul class="tabs left">
	<li><a href="#tabr1">Tab1</a></li>
	<li><a href="#tabr2">Tab2</a></li>
	<li><a href="#tabr3">Tab3</a></li>
	</ul>
	
	<div id="tabr1" class="tab-content">Tab1</div>
	<div id="tabr2" class="tab-content">Tab2</div>
	<div id="tabr3" class="tab-content">Tab3</div>
	<!-- Tabs Center -->
	<ul class="tabs center">
	<li><a href="#tabr1">Tab1</a></li>
	<li><a href="#tabr2">Tab2</a></li>
	<li><a href="#tabr3">Tab3</a></li>
	</ul>
	
	<div id="tabr1" class="tab-content">Tab1</div>
	<div id="tabr2" class="tab-content">Tab2</div>
	<div id="tabr3" class="tab-content">Tab3</div>
	<!-- Tabs Right -->
	<ul class="tabs right">
	<li><a href="#tabr1">Tab1</a></li>
	<li><a href="#tabr2">Tab2</a></li>
	<li><a href="#tabr3">Tab3</a></li>
	</ul>
	
	<div id="tabr1" class="tab-content">Tab1</div>
	<div id="tabr2" class="tab-content">Tab2</div>
	<div id="tabr3" class="tab-content">Tab3</div>

Breadcrumbs

Breadcrumbs.alt1

	<!-- Breadcrumbs -->
	<ul class="breadcrumbs">
	<li><a href="">Home</a></li>
	<li><a href="">Category</a></li>
	<li><a href="">Sub Category</a></li>
	<li><a href="">Page Title</a></li>
	</ul>
	<!-- Alternative Style -->
	<ul class="breadcrumbs alt1">
	<li><a href="">Home</a></li>
	<li><a href="">Category</a></li>
	<li><a href="">Sub Category</a></li>
	<li><a href="">Page Title</a></li>
	</ul>

Grids/Columns

col_12
col_1
col_11
col_2
col_10
col_3
col_9
col_4
col_8
col_5
col_7
col_6
col_6
col_7
col_5
col_8
col_4
col_9
col_3
col_10
col_2
col_11
col_1
col_12
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.
	<!-- Columns/Grid -->
	<div class="col_12">col_12</div>
	<div class="col_1">col_1</div><div class="col_11">col_11</div>
	<div class="col_2">col_2</div><div class="col_10">col_10</div>
	<div class="col_3">col_3</div><div class="col_9">col_9</div>
	<div class="col_4">col_4</div><div class="col_8">col_8</div>
	<div class="col_5">col_5</div><div class="col_7">col_7</div>
	<div class="col_6">col_6</div><div class="col_6">col_6</div>
	<div class="col_7">col_7</div><div class="col_5">col_5</div>
	<div class="col_8">col_8</div><div class="col_4">col_4</div>
	<div class="col_9">col_9</div><div class="col_3">col_3</div>
	<div class="col_10">col_10</div><div class="col_2">col_2</div>
	<div class="col_11">col_11</div><div class="col_1">col_1</div>
	<div class="col_12">col_12</div>
	
	<!-- FOURTHS -->
	<div class="col_3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
	nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</div>
	<div class="col_3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
	nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</div>
	<div class="col_3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
	nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</div>
	<div class="col_3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
	nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</div>
	
	<!-- THIRDS -->
	<div class="col_4">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
	nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</div>
	<div class="col_4">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
	nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</div>
	<div class="col_4">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
	nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</div>
	
	<!-- HALF & HALF -->
	<div class="col_6">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
	nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</div>
	<div class="col_6">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
	nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</div>

Images

Placeholder

IMG.style1

IMG.style2

IMG.style3

 

IMG.caption

This is the image caption

DIV.gallery

 

IMG.align-left

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.

IMG.align-right

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.

IMG.full-width

	<!-- Placeholder -->
	<img src="http://placehold.it/180x150/4D99E0/ffffff.png&text=180x150" width="180" height="150" />
	<!-- Style1 -->
	<img class="style1" src="http://placehold.it/180x150/4D99E0/ffffff.png&text=180x150" width="180" height="150" />
	<!-- Style2 -->
	<img class="style2" src="http://placehold.it/180x150/4D99E0/ffffff.png&text=180x150" width="180" height="150" />
	<!-- Style3 -->
	<img class="style3" src="http://placehold.it/180x150/4D99E0/ffffff.png&text=180x150" width="180" height="150" />
	<!-- Caption -->
	<img class="caption" alt="This is the image caption" src="http://placehold.it/400x350/4D99E0/ffffff.png&text=400x350" width="400" height="350" />
	<!-- Align Left -->
	<img class="align-left" src="http://placehold.it/100x100/4D99E0/ffffff.png&text=100x100" width="100" height="100" />
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt 
	ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation 
	ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor 
	in hendrerit in vulputate velit esse molestie consequat.</p>
	<!-- Align Right -->
	<img class="align-right" src="http://placehold.it/100x100/4D99E0/ffffff.png&text=100x100" width="100" height="100" />
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt 
	ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation 
	ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor 
	in hendrerit in vulputate velit esse molestie consequat.</p>
	<!-- Full Width -->
	<img class="full-width" src="http://placehold.it/260x200/4D99E0/ffffff.png&text=full+width" />
	<!-- Gallery -->
	<div class="gallery">
	<a href="http://placehold.it/600x450/4D99E0/ffffff.png&text=600x450"><img src="http://placehold.it/100x100/4D99E0/ffffff.png&text=100x100" width="100" height="100" /></a>
	<a href="http://placehold.it/600x450/75CC00/ffffff.png&text=600x450"><img src="http://placehold.it/100x100/75CC00/ffffff.png&text=100x100" width="100" height="100" /></a>
	<a href="http://placehold.it/600x450/E49800/ffffff.png&text=600x450"><img src="http://placehold.it/100x100/E49800/ffffff.png&text=100x100" width="100" height="100" /></a>
	<a href="http://placehold.it/600x450/E4247E/ffffff.png&text=600x450"><img src="http://placehold.it/100x100/E4247E/ffffff.png&text=100x100" width="100" height="100" /></a>
	<a href="http://placehold.it/600x450/00C6E4/ffffff.png&text=600x450"><img src="http://placehold.it/100x100/00C6E4/ffffff.png&text=100x100" width="100" height="100" /></a>
	<a href="http://placehold.it/600x450/E4DB0F/ffffff.png&text=600x450"><img src="http://placehold.it/100x100/E4DB0F/ffffff.png&text=100x100" width="100" height="100" /></a>
	<a href="http://placehold.it/600x450/7400E4/ffffff.png&text=600x450"><img src="http://placehold.it/100x100/7400E4/ffffff.png&text=100x100" width="100" height="100" /></a>
	<a href="http://placehold.it/600x450/C50000/ffffff.png&text=600x450"><img src="http://placehold.it/100x100/C50000/ffffff.png&text=100x100" width="100" height="100" /></a>
	</div>

Slideshow

  • Slide Anything

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Features

  • Slide Any HTML Content
  • Iframes
  • Videos
  • Images
  • Lightweight
  • Multiple Slideshows
  • Zero Setup Required
  • Flexible Markup
  • Unordered List (default)
	<!-- Slideshow -->
	<ul class="slideshow" width="550" height="350">
	<li><img src="http://placehold.it/550x350/4D99E0/ffffff.png&text=550x350" width="550" height="350" /></li>
	<li><img src="http://placehold.it/550x350/75CC00/ffffff.png&text=550x350" width="550" height="350" /></li>
	<li><img src="http://placehold.it/550x350/E49800/ffffff.png&text=550x350" width="550" height="350" /></li>
	<li><h3>Slide Anything</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
	sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></li>
	</ul>

Forms

Checkboxes

Radios

This is an Error Notice
This is a Warning Notice
This is a Success Notice
	<!-- Text Field -->
	<label for="text1">Text Field</label>
	<input id="text1" type="text" />
	
	<!-- Placeholder Text -->
	<label for="text2">Placeholder</label>
	<input id="text2" type="text" placeholder="Placeholder Text" />
	
	<!-- Disabled Field -->
	<label for="text3" class="disabled">Disabled Field</label>
	<input id="text3" type="text" disabled="disabled" />
	
	<!-- Label with Right Hint -->
	<label for="text4">Label with Right Hint <span class="right">A-Z, 0-9</span></label>
	<input id="text4" type="text" />
	
	<!-- Label with Hint -->
	<label for="text5">Label with Hint <span>A-Z, 0-9</span></label>
	<input id="text5" type="text" />
	
	<!-- Text Field Error -->
	<label for="text6" class="error">Text Field (Error)</label>
	<input id="text6" class="error" type="text" />
	<!-- Select -->
	<label for="select1">Select Field</label>
	<select id="select1">
	<option value="0">-- Choose --</option>
	<option value="1">Option 1</option>
	<option value="2">Option 2</option>
	<option value="3">Option 3</option>
	</select>
	<!-- Checkbox -->
	<input type="checkbox" id="check1" />
	<label for="check1" class="inline">Checkbox Field</label>
	<!-- Radio -->
	<input type="radio" name="radio" id="radio1" />
	<label for="radio1" class="inline">Option1</label>
	<!-- Fieldset -->
	<fieldset>
	<legend>Checkboxes</legend>
		<!-- Form Fields Here -->
	</fieldset>
	<!-- Textarea -->
	<textarea id="textarea1" placeholder="Placeholder Text"></textarea>
	<!-- Error -->
	<div class="notice error">This is an Error Notice</div>
	
	<!-- Warning -->
	<div class="notice warning">This is a Warning Notice</div>
	
	<!-- Success -->
	<div class="notice success">This is a Success Notice</div>