File Name Title Description

View here all the styles available for your website.

Image Introduction Content

Content

Style Guide

Paragraph

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Left aligned text. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Center aligned text. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Right aligned text. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Justify aligned text. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p class="left"><strong>Left aligned text.</strong> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<p class="center"><strong>Center aligned text.</strong> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<p class="right"><strong>Right aligned text.</strong> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<p class="justify"><strong>Justify aligned text.</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 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>

Initial Caps

Raised cap text. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Dropped cap text. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Adjacent cap text. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

<p class="raised-cap">Raised cap text. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p class="dropped-cap">Dropped cap text. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p class="adjacent-cap">Adjacent cap text. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

Inline Styles

Link text
Strong
Emphasis
Underline
~~Strike~~
Small text / Big text
Small Caps Text
Super^script
Sub_script
Abbr
Quote and sub-quote
Cite
Text shadow
Inline icon
Inserted text and ~~Deleted text~~
Definition text
Variable
Marked text
Keyboard text
Sample output from computer
<p>Code</p>
Zoom x2 inline block text

<ul>
    <li><a href="#">Link text</a></li>
    <li><strong>Strong</strong></li>
    <li><em>Emphasis</em></li>
    <li><u>Underline</u></li>
    <li><s>Strike</s></li>
    <li><small>Small text</small> / <big>Big text</big></li>
    <li class="small-caps">Small Caps Text</li>
    <li>Super<sup>script</sup></li>
    <li>Sub<sub>script</sub></li>
    <li><abbr title="Abbreviation">Abbr</abbr></li>
    <li><span class="text-shadow">Text shadow</span></li>
    <li>Inline <i class="icon-coffee"></i> icon</li>
    <li><ins>Inserted text</ins> and <del>Deleted text</del></li>
    <li><dfn>Definition text</dfn></li>
    <li><var>Variable</var></li>
    <li><mark>Marked text</mark></li>
    <li><kbd>Keyboard text</kbd></li>
    <li><samp>Sample output from computer</samp></li>
    <li><code><p>Code<p></code></li>
    <li><mark class="inline-block zoom x2">Zoom x2</mark> inline block text</li>
</ul>

Lists

Unordered List

List item
List item
- Sub list item
  - Sub sub list item
List item

Ordered List

List item
1. Sub list item
2. Sub list item
  1. Sub sub list item
List item
List item

Unstyled List

List item
- Sub list item
- Sub list item
  - Sub sub list item
List item
List item

Description List

Term 1: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Term 2: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<h3>Unordered List</h3>
<ul>
    <li>List item</li>
    <li>List item
    <ul>
        <li>Sub list item
        <ul>
            <li>Sub sub list item</li>
        </ul>
        </li>
    </ul>
    </li>
    <li>List item</li>
</ul>
<h3>Ordered List</h3>
<ol>
    <li>List item
    <ol>
        <li>Sub list item</li>
        <li>Sub list item
        <ol>
            <li>Sub sub list item</li>
        </ol>
        </li>
    </ol>
    </li>
    <li>List item</li>
    <li>List item</li>
</ol>
<h3>Unstyled List</h3>
<ul class="unstyled">
    <li>List item
    <ul class="unstyled">
        <li>Sub list item</li>
        <li>Sub list item
        <ul class="unstyled">
            <li>Sub sub list item</li>
        </ul>
        </li>
    </ul>
    </li>
    <li>List item</li>
    <li>List item</li>
</ul>
<h3>Description List</h3>
<dl>
    <dt>Term 1</dt>
    <dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</dd>
    <dt>Term 2</dt>
    <dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</dd>
</dl>

Blockquote / Quote / Cite

This is a quote. This is a sub quote. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Joe Smith (cite)

<blockquote>
    <p><q>This is a quote. <q>This is a sub quote.</q> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</q></p>
    <p><cite>Joe Smith (cite)</cite></p>
</blockquote>

Address

Level 1, 37 Connor St,
Burleigh Heads QLD 4220

<address>
    Level 1, 37 Connor St,<br />
    Burleigh Heads QLD 4220
</address>

Details & Summary

Click here to see the details.

Details is currently only supported in Chrome and Safari 6 browsers.

<details>
    <summary>Click here to see the details.</summary>
    <p>Details is currently only supported in Chrome and Safari 6 browsers.</p>
</details>

Horizontal Rule

Below is the default horizontal rule.

Below is a dotted horizontal rule.

Below is a dashed horizontal rule.

<p>Below is the default horizontal rule.</p>
<hr />
<p>Below is a dotted horizontal rule.</p>
<hr class="dotted" />
<p>Below is a dashed horizontal rule.</p>
<hr class="dashed" />

Text Overflow

Default word wrap

This text wraps to the width of the container.

Scroll

This text scrolls in it's container. This text scrolls in it's container.

Ellipsis

This adds the ellipsis to the end of text.

<p>Default word wrap</p>
<p class="box info" style="width: 150px;">This text wraps to the width of the container.</p>
<p>Scroll</p>
<p class="box success scrollable" style="width: 150px; height: 80px;">This text scrolls in it's container. This text scrolls in it's container.</p>
<p>Ellipsis</p>
<p class="box error ellipsis" style="width: 150px;">This adds the ellipsis to the end of text.</p>

Pre

<html>
<body>
<p>This is a pre (for examples of code)</p>
</body>
</html>

<pre>
<code>&lt;html&gt;
&lt;body&gt;
&lt;p&gt;This is a pre (for examples of code)&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>

Border

Default border

Circled border

Dotted border

Dashed border

<p>Default border</p>
<p><i class="icon-leaf xl border"></i></p>
<p>Circled border</p>
<p><i class="icon-leaf xl border circle"></i></p>
<p>Dotted border</p>
<p><i class="icon-leaf xl border dotted"></i></p>
<p>Dashed border</p>
<p><i class="icon-leaf xl border dashed"></i></p>

Tables

Default Table
Head 1	Head 2	Head 3	Head 4
Item 1	Item 2	Item 3	Item 4
Item 1	Item 2	Item 3	Item 4
Item 1	Item 2	Item 3	Item 4
Foot 1	Foot 2	Foot 3	Foot 4

Padded Table with Row Dividers and Striped
Head 1	Head 2	Head 3	Head 4
Item 1	Item 2	Item 3	Item 4
Item 1	Item 2	Item 3	Item 4
Item 1	Item 2	Item 3	Item 4
Foot 1	Foot 2	Foot 3	Foot 4

Bordered, Padded Table with Dividers, Hover and Caption Bottom
Head 1	Head 2	Head 3	Head 4
Item 1	Item 2	Item 3	Item 4
Item 1	Item 2	Item 3	Item 4
Item 1	Item 2	Item 3	Item 4
Foot 1	Foot 2	Foot 3	Foot 4

Condensed Table with Column Dividers and Caption Bottom
Head 1	Head 2	Head 3	Head 4
Item 1	Item 2	Item 3	Item 4
Item 1	Item 2	Item 3	Item 4
Item 1	Item 2	Item 3	Item 4
Foot 1	Foot 2	Foot 3	Foot 4

<div class="scrollable">
<table>
    <caption>Default Table</caption>
    <thead>
        <tr>
            <th>Head 1</th>
            <td>Head 2</td>
            <td>Head 3</td>
            <td>Head 4</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>Item 1</th>
            <td>Item 2</td>
            <td>Item 3</td>
            <td>Item 4</td>
        </tr>
        <tr>
            <th>Item 1</th>
            <td>Item 2</td>
            <td>Item 3</td>
            <td>Item 4</td>
        </tr>
        <tr>
            <th>Item 1</th>
            <td>Item 2</td>
            <td>Item 3</td>
            <td>Item 4</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>Foot 1</th>
            <td>Foot 2</td>
            <td>Foot 3</td>
            <td>Foot 4</td>
        </tr>
    </tfoot>
</table>
</div>
<table class="padded row-dividers striped">
    <caption>Padded Table with Row Dividers and Striped</caption>
    <thead>
        <tr>
            <th>Head 1</th>
            <td>Head 2</td>
            <td>Head 3</td>
            <td>Head 4</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>Item 1</th>
            <td>Item 2</td>
            <td>Item 3</td>
            <td>Item 4</td>
        </tr>
        <tr>
            <th>Item 1</th>
            <td>Item 2</td>
            <td>Item 3</td>
            <td>Item 4</td>
        </tr>
        <tr>
            <th>Item 1</th>
            <td>Item 2</td>
            <td>Item 3</td>
            <td>Item 4</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>Foot 1</th>
            <td>Foot 2</td>
            <td>Foot 3</td>
            <td>Foot 4</td>
        </tr>
    </tfoot>
</table>
<table class="border padded dividers hover">
    <caption class="bottom">Bordered, Padded Table with Dividers, Hover and Caption Bottom</caption>
    <thead>
        <tr>
            <th>Head 1</th>
            <td>Head 2</td>
            <td>Head 3</td>
            <td>Head 4</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>Item 1</th>
            <td>Item 2</td>
            <td>Item 3</td>
            <td>Item 4</td>
        </tr>
        <tr>
            <th>Item 1</th>
            <td>Item 2</td>
            <td>Item 3</td>
            <td>Item 4</td>
        </tr>
        <tr>
            <th>Item 1</th>
            <td>Item 2</td>
            <td>Item 3</td>
            <td>Item 4</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>Foot 1</th>
            <td>Foot 2</td>
            <td>Foot 3</td>
            <td>Foot 4</td>
        </tr>
    </tfoot>
</table>
<table class="condensed column-dividers">
    <caption class="bottom">Condensed Table with Column Dividers and Caption Bottom</caption>
    <thead>
        <tr>
            <th>Head 1</th>
            <td>Head 2</td>
            <td>Head 3</td>
            <td>Head 4</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>Item 1</th>
            <td>Item 2</td>
            <td>Item 3</td>
            <td>Item 4</td>
        </tr>
        <tr>
            <th>Item 1</th>
            <td>Item 2</td>
            <td>Item 3</td>
            <td>Item 4</td>
        </tr>
        <tr>
            <th>Item 1</th>
            <td>Item 2</td>
            <td>Item 3</td>
            <td>Item 4</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>Foot 1</th>
            <td>Foot 2</td>
            <td>Foot 3</td>
            <td>Foot 4</td>
        </tr>
    </tfoot>
</table>

Boxes

Default box

paragraph text

Rounded box with shadow

paragraph text

<div class="box">
<h3>Default box</h3>
<p>paragraph text</p>
</div>
<div class="box shadow">
<h3>Rounded box with shadow</h3>
<p>paragraph text</p>
</div>
<div class="box rounded shadow">
<h3 class="banner ellipsis">Rounded box with shadow and banners</h3>
<p>paragraph text</p>
<h3 class="banner success">success banner</h3>
<p>paragraph text</p>
<h3 class="banner info">info banner</h3>
<h3 class="banner warning">warning banner</h3>
<p>paragraph text</p>
<h3 class="banner error">error banner</h3>
</div>

Responsive Design Grid

Panel 1

Panel 2

Panel 1

Panel 2

Panel 3

Panel 1

Panel 2

Panel 3

Panel 4

Panel 1

Panel 2

Panel 3

Panel 4

Panel 5

Panel 1

Panel 2

Panel 3

Panel 4

Panel 5

Panel 6

Panel 7

Panel 8

Panel 9

Panel 10

Panel 11

Panel 12

Panel 13

Panel 14

Panel 15

Panel 16

Panel 1

Panel 2

Panel 3

Panel 4

Panel 5

Panel 6

Left 1

Left 2

Content

Right 1

Right 2

Right 3

<div class="grid c2 u240c1">
<div class="box">Panel 1</div>
<div class="box">Panel 2</div>
</div>
<div class="grid c3 u360c1">
<div class="box warning">Panel 1</div>
<div class="box success">Panel 2</div>
<div class="box error">Panel 3</div>
</div>
<div class="grid c4 u480c2">
<div class="box error">Panel 1</div>
<div class="box success">Panel 2</div>
<div class="box warning">Panel 3</div>
<div class="box info">Panel 4</div>
</div>
<div class="grid c5">
<div class="box">Panel 1</div>
<div class="box">Panel 2</div>
<div class="box">Panel 3</div>
<div class="box">Panel 4</div>
<div class="box">Panel 5</div>
</div>
<div class="grid c16 u960c8 u480c4 u240c2">
<div class="box">Panel 1</div>
<div class="box">Panel 2</div>
<div class="box">Panel 3</div>
<div class="box">Panel 4</div>
<div class="box">Panel 5</div>
<div class="box">Panel 6</div>
<div class="box">Panel 7</div>
<div class="box">Panel 8</div>
<div class="box">Panel 9</div>
<div class="box">Panel 10</div>
<div class="box">Panel 11</div>
<div class="box">Panel 12</div>
<div class="box">Panel 13</div>
<div class="box">Panel 14</div>
<div class="box">Panel 15</div>
<div class="box">Panel 16</div>
</div>
<div class="grid m1 c6 u600c3 u480c2">
<div class="box">Panel 1</div>
<div class="box">Panel 2</div>
<div class="box">Panel 3</div>
<div class="box">Panel 4</div>
<div class="box">Panel 5</div>
<div class="box">Panel 6</div>
</div>
<div class="grid m1 c4 u960c3 u600c1">
<div>
<div class="grid c1">
<div class="box info">Left 1</div>
<div class="box info">Left 2</div>
</div>
</div>
<div class="box warning s2">Content</div>
<div>
<div class="grid m1 c1 u960c3 u600c1">
<div class="box error">Right 1</div>
<div class="box error">Right 2</div>
<div class="box error">Right 3</div>
</div>
</div>
</div>

Columns

4 span column ruled, resized to 2 span at 720px, then 1 span at 480px.

<div class="columns rules x4 u720x2 u480x1">
<p class="span-all"><strong>4 span column ruled, resized to 2 span at 720px, then 1 span at 480px.</strong></p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

Menus

<nav class="minimize600 box rounded info">
<h3 class="banner">Default Menu</h3>
<ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Products</a>
        <ul>
            <li><a href="#" title="Learn how to make amazing meals!">Cook Books</a></li>
            <li class="break-before"><a href="#" title="Chef hats, jackets, pants, skirts and much more...">Uniforms</a></li>
            <li><a href="#" title="Everything you need to cook your favourite meals!">Utensils</a></li>
        </ul>
        </li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Gallery</a></li>
        <li><a href="#">Testimonials</a></li>
        <li><a href="#">Contact Us</a></li>
</ul>
</nav>
<nav class="drop minimize600 box rounded warning">
<h3 class="banner">Verticle Drop</h3>
<ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Products</a>
        <ul>
            <li><a href="#" title="Learn how to make amazing meals!">Cook Books</a></li>
            <li class="break-before"><a href="#" title="Chef hats, jackets, pants, skirts and much more...">Uniforms</a></li>
            <li><a href="#" title="Everything you need to cook your favourite meals!">Utensils</a></li>
        </ul>
        </li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Gallery</a></li>
        <li><a href="#">Testimonials</a></li>
        <li><a href="#">Contact Us</a></li>
</ul>
</nav>
<nav class="horizontal drop minimize600 s4 box rounded success">
<h3 class="banner">Horizontal Drop</h3>
<ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Products</a>
        <ul>
            <li><a href="#" title="Learn how to make amazing meals!">Cook Books</a></li>
            <li class="break-before"><a href="#" title="Chef hats, jackets, pants, skirts and much more...">Uniforms</a></li>
            <li><a href="#" title="Everything you need to cook your favourite meals!">Utensils</a></li>
        </ul>
        </li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Gallery</a></li>
        <li><a href="#">Testimonials</a></li>
        <li><a href="#">Contact Us</a></li>
</ul>
</nav>
<nav class="horizontal drop sub-horizontal minimize600 s4 box rounded error">
<h3 class="banner">Horizontal Drop to Sub-horizontal</h3>
<ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Products</a>
        <ul>
            <li><a href="#" title="Learn how to make amazing meals!">Cook Books</a></li>
            <li class="break-before"><a href="#" title="Chef hats, jackets, pants, skirts and much more...">Uniforms</a></li>
            <li><a href="#" title="Everything you need to cook your favourite meals!">Utensils</a></li>
        </ul>
        </li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Gallery</a></li>
        <li><a href="#">Testimonials</a></li>
        <li><a href="#">Contact Us</a></li>
</ul>
</nav>
<nav class="horizontal minimize600 s6 box rounded info">
<h3 class="banner">Horizontal Default (useful for footer)</h3>
<ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Products</a>
        <ul>
            <li><a href="#" title="Learn how to make amazing meals!">Cook Books</a></li>
            <li class="break-before"><a href="#" title="Chef hats, jackets, pants, skirts and much more...">Uniforms</a></li>
            <li><a href="#" title="Everything you need to cook your favourite meals!">Utensils</a></li>
        </ul>
        </li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Gallery</a></li>
        <li><a href="#">Testimonials</a></li>
        <li><a href="#">Contact Us</a></li>
</ul>
</nav>

Forms

Buttons

Info Link Button Disabled Link Button Link 1 Link 2 Link 3

Control Group

<div class="grid m1 c2 u720c1">
<form action="" class="s2" enctype="multipart/form-data" method="post">
<h3>Default Form</h3>
<label>Text Field <input placeholder="placeholder text here" type="text" /></label> <label>Select <select><option value=""></option><option value="Option 1">Option 1</option><option value="Option 2">Option 2</option><option value="Option 3">Option 3</option></select></label> <input type="submit" value="Submit" />
    </form>
<form action="" class="block-controls" enctype="multipart/form-data" method="post">
<h3>Block Controls</h3>
<label>Text Field <input placeholder="placeholder text here" type="text" /></label> <label>Multi Line Text Field&nbsp;<textarea placeholder="placeholder text here"></textarea></label> <label>Select <select><option value=""></option><option value="Option 1">Option 1</option><option value="Option 2">Option 2</option><option value="Option 3">Option 3</option></select></label> <label>Multi Select <select multiple="multiple"><option value="Option 1">Option 1</option><option value="Option 2">Option 2</option><option value="Option 3">Option 3</option><option value="Option 4">Option 4</option></select></label>
<div class="label">Check Boxes
<fieldset><label><input name="Checkbox" type="checkbox" /> Check 1</label><br /><label><input name="Checkbox" type="checkbox" /> Check 2</label><br /><label><input name="Checkbox" type="checkbox" /> Check 3</label></fieldset>
</div>
<div class="label">Radio Buttons
<fieldset><label><input name="Radio" type="radio" /> Radio 1</label> <label><input name="Radio" type="radio" /> Radio 2</label> <label><input name="Radio" type="radio" /> Radio 3</label></fieldset>
</div>
<p class="center"><input type="submit" value="Submit" /> <input type="reset" value="Reset" /></p>
</form>
<form action="" class="inline-controls" enctype="multipart/form-data" method="post">
<h3>Inline Controls</h3>
<label>Text Field <input placeholder="placeholder text here" type="text" /></label> <label>Multi Line Text Field<textarea wrap="off" placeholder="placeholder text here"></textarea></label> <label>Select <select><option value=""></option><option value="Option 1">Option 1</option><option value="Option 2">Option 2</option><option value="Option 3">Option 3</option></select></label> <label>Multi Select <select multiple="multiple"><option value="Option 1">Option 1</option><option value="Option 2">Option 2</option><option value="Option 3">Option 3</option><option value="Option 4">Option 4</option></select></label>
<div class="label">Check Boxes
<fieldset><label><input name="Checkbox" type="checkbox" /> Check 1</label><br /><label><input name="Checkbox" type="checkbox" /> Check 2</label><br /><label><input name="Checkbox" type="checkbox" /> Check 3</label></fieldset>
</div>
<div class="label">Radio Buttons
<fieldset><label><input name="Radio" type="radio" /> Radio 1</label> <label><input name="Radio" type="radio" /> Radio 2</label> <label><input name="Radio" type="radio" /> Radio 3</label></fieldset>
</div>
<p class="center"><input type="submit" value="Submit" /> <input type="reset" value="Reset" /></p>
    </form>
</div>
<h3>Buttons</h3>
<p><input type="submit" value="Submit" /> <input type="reset" value="Reset" /> <button>Button</button> <button class="warning">Warning Button</button> <a class="button info">Info Link Button</a> <button disabled="disabled">Disabled Button</button> <a class="button disabled">Disabled Link Button</a> <span class="control"><a class="button">Link 1</a><a class="button">Link 2</a><a class="button">Link 3</a></span> <span class="control info"><button>Button 1</button><button>Button 2</button><button>Button 3</button></span></p>
<p><label>Control Group <span class="control"><input placeholder="placeholder text here" type="text" /><button class="icon-search"></button></span></label></p>

Notices

This is an inline error message. This is an inline warning message. This is an inline success message. This is an inline info message.

This is a rounded boxed error message.

This is a rounded boxed warning message.

This is a rounded boxed success message.

This is a rounded boxed info message.

<p>This is an inline <span class="error">error</span> message. This is an inline <span class="warning">warning</span> message. This is an inline <span class="success">success</span> message. This is an inline <span class="info">info</span> message.</p>
<p class="box rounded error">This is a rounded boxed error message.</p>
<p class="box rounded warning">This is a rounded boxed warning message.</p>
<p class="box rounded success">This is a rounded boxed success message.</p>
<p class="box rounded info">This is a rounded boxed info message.</p>

Icons

small normal large xl xxl xxxl

<p><i class="icon-gift small"></i> small <i class="icon-gift"></i> normal <i class="icon-gift small large"></i> large <i class="icon-gift xl"></i> xl <i class="icon-gift xxl"></i> xxl <i class="icon-gift xxxl"></i> xxxl</p>
<p><a class="button icon-camera-retro small">small</a> <a class="button icon-camera-retro">normal</a> <a class="button icon-camera-retro large">large</a> <a class="button icon-camera-retro xl">xl</a> <a class="button icon-camera-retro xxl">xxl</a> <a class="button icon-camera-retro xxxl">xxxl</a></p>
<p><a class="button small info"><i class="icon-cog spin"></i> small</a> <a class="button success"><i class="icon-cog spin"></i> normal</a> <a class="button large warning"><i class="icon-cog spin"></i> large</a> <a class="button xl error"><i class="icon-cog spin"></i> xl</a> <a class="button xxl disabled"><i class="icon-cog spin"></i> xxl</a> <a class="button xxxl"><i class="icon-cog spin"></i> xxxl</a></p>

Web App

icon-adjust
icon-asterisk
icon-ban-circle
icon-bar-chart
icon-barcode
icon-beaker
icon-beer
icon-bell
icon-bell-alt
icon-bolt
icon-book
icon-bookmark
icon-bookmark-empty
icon-briefcase
icon-bullhorn
icon-calendar
icon-camera
icon-camera-retro
icon-certificate
icon-check
icon-check-empty
icon-circle
icon-circle-blank
icon-cloud
icon-cloud-download
icon-cloud-upload
icon-coffee
icon-cog
icon-cogs
icon-comment
icon-comment-alt
icon-comments
icon-comments-alt
icon-credit-card
icon-dashboard
icon-desktop
icon-download
icon-download-alt

icon-edit
icon-envelope
icon-envelope-alt
icon-exchange
icon-exclamation-sign
icon-external-link
icon-eye-close
icon-eye-open
icon-facetime-video
icon-fighter-jet
icon-film
icon-filter
icon-fire
icon-flag
icon-folder-close
icon-folder-open
icon-folder-close-alt
icon-folder-open-alt
icon-food
icon-gift
icon-glass
icon-globe
icon-group
icon-hdd
icon-headphones
icon-heart
icon-heart-empty
icon-home
icon-inbox
icon-info-sign
icon-key
icon-leaf
icon-laptop
icon-legal
icon-lemon
icon-lightbulb
icon-lock
icon-unlock

icon-magic
icon-magnet
icon-map-marker
icon-minus
icon-minus-sign
icon-mobile-phone
icon-money
icon-move
icon-music
icon-off
icon-ok
icon-ok-circle
icon-ok-sign
icon-pencil
icon-picture
icon-plane
icon-plus
icon-plus-sign
icon-print
icon-pushpin
icon-qrcode
icon-question-sign
icon-quote-left
icon-quote-right
icon-random
icon-refresh
icon-remove
icon-remove-circle
icon-remove-sign
icon-reorder
icon-reply
icon-resize-horizontal
icon-resize-vertical
icon-retweet
icon-road
icon-rss
icon-screenshot
icon-search

icon-share
icon-share-alt
icon-shopping-cart
icon-signal
icon-signin
icon-signout
icon-sitemap
icon-sort
icon-sort-down
icon-sort-up
icon-spinner
icon-star
icon-star-empty
icon-star-half
icon-tablet
icon-tag
icon-tags
icon-tasks
icon-thumbs-down
icon-thumbs-up
icon-time
icon-tint
icon-trash
icon-trophy
icon-truck
icon-umbrella
icon-upload
icon-upload-alt
icon-user
icon-user-md
icon-volume-off
icon-volume-down
icon-volume-up
icon-warning-sign
icon-wrench
icon-zoom-in
icon-zoom-out

Text Editor

icon-file
icon-file-alt
icon-cut
icon-copy
icon-paste
icon-save
icon-undo
icon-repeat

icon-text-height
icon-text-width
icon-align-left
icon-align-center
icon-align-right
icon-align-justify
icon-indent-left
icon-indent-right

icon-font
icon-bold
icon-italic
icon-strikethrough
icon-underline
icon-link
icon-paper-clip
icon-columns

icon-table
icon-th-large
icon-th
icon-th-list
icon-list
icon-list-ol
icon-list-ul
icon-list-alt

Directional

icon-angle-left
icon-angle-right
icon-angle-up
icon-angle-down
icon-arrow-down
icon-arrow-left
icon-arrow-right
icon-arrow-up

icon-caret-down
icon-caret-left
icon-caret-right
icon-caret-up
icon-chevron-down
icon-chevron-left
icon-chevron-right
icon-chevron-up

icon-circle-arrow-down
icon-circle-arrow-left
icon-circle-arrow-right
icon-circle-arrow-up
icon-double-angle-left
icon-double-angle-right
icon-double-angle-up
icon-double-angle-down

icon-hand-down
icon-hand-left
icon-hand-right
icon-hand-up
icon-circle
icon-circle-blank

Media

icon-play-circle
icon-play
icon-pause
icon-stop

icon-step-backward
icon-fast-backward
icon-backward
icon-forward

icon-fast-forward
icon-step-forward
icon-eject

icon-fullscreen
icon-resize-full
icon-resize-small

Social Media

icon-phone
icon-phone-sign
icon-facebook
icon-facebook-sign

icon-twitter
icon-twitter-sign
icon-github
icon-github-alt

icon-github-sign
icon-linkedin
icon-linkedin-sign
icon-pinterest

icon-pinterest-sign
icon-google-plus
icon-google-plus-sign
icon-sign-blank

Medical

icon-ambulance
icon-beaker

icon-h-sign
icon-hospital

icon-medkit
icon-plus-sign-alt

icon-stethoscope
icon-user-md

Images

Default image

Boxed polaroid image with shadow and zoom x3

Figure image with caption top

Figure image with caption bottom

Figure image with caption over top

Figure image with caption over bottom

<div class="grid m1 c6 u960c3 u600c2 u480c1">
<div>
<p>Default image</p>
<img src="/images/under-construction.jpg" />
</div>
<div>
<p>Boxed polaroid image with shadow and zoom x3</p>
<img class="polaroid box shadow zoom x3" src="/images/under-construction.jpg" />
</div>
<div>
<p>Figure image with caption top</p>
<figure><figcaption>Caption top.</figcaption><img src="/images/under-construction.jpg" /></figure>
</div>
<div>
<p>Figure image with caption bottom</p>
<figure><img src="/images/under-construction.jpg" /><figcaption>Caption bottom.</figcaption></figure>
</div>
<div>
<p>Figure image with caption over top</p>
<figure><figcaption class="over">Caption top.</figcaption><img src="/images/under-construction.jpg" /></figure>
</div>
<div>
<p>Figure image with caption over bottom</p>
<figure><img src="/images/under-construction.jpg" /><figcaption class="over">Caption bottom.</figcaption></figure>
</div>
</div>

Template Is Page To Be Indexed Are Links To Be Followed Allow View By Allow Edit By GroupAuthor Published On

Style Guide

Paragraph

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Initial Caps

Inline Styles

Lists

Unordered List

Ordered List

Unstyled List

Description List

Blockquote / Quote / Cite

Address

Details & Summary

Horizontal Rule

Text Overflow

Pre

Border

Tables

Boxes

Default box

Rounded box with shadow

Rounded box with shadow and banners

success banner

info banner

warning banner

error banner

Responsive Design Grid

Columns

Menus

Forms

Default Form

Block Controls

Inline Controls

Buttons

Notices

Icons

Web App

Text Editor

Directional

Media

Social Media

Medical

Images

Contact

Connect With Us

Newsletter