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
  • Superscript
  • Subscript
  • 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

  1. List item
    1. Sub list item
    2. Sub list item
      1. Sub sub list item
  2. List item
  3. 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

 

paragraph text

paragraph text

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.

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.

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.

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.

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.

<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

Default Form

 

Block Controls

Check Boxes


Radio Buttons

Inline Controls

Check Boxes


Radio Buttons

Buttons

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

<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

small normal large xl xxl xxxl

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-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-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-share
  • icon-share-alt
  • icon-shopping-cart
  • icon-signal
  • 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-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

Caption top.

Figure image with caption bottom

Caption bottom.

Figure image with caption over top

Caption top.

Figure image with caption over bottom

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