<h4>List Styles</h4>

[one_fourth]
<ul class="arrow-list">
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
</ul>
[/one_fourth]

[one_fourth]
<ul class="point-list">
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
</ul>
[/one_fourth]

[one_fourth]
<ul class="check-list">
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
</ul>
[/one_fourth]

[one_fourth_last]
<ul class="circle-arrow2">
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
</ul>
[/one_fourth_last]

<h4>Drop Caps</h4>
[one_third][dropcaps]N[/dropcaps]am vestibulum, arcu sodales feugiat consectetur, nisl orci bibendum elit, eu euismod magna sapien ut nibh. Donec semper quam scelerisque tortor dictum gravida. [/one_third]

[one_third][dropcaps style="circle"]N[/dropcaps]am vestibulum, arcu sodales feugiat consectetur, nisl orci bibendum elit, eu euismod magna sapien ut nibh. Donec semper quam scelerisque tortor dictum gravida. [/one_third]

[one_third_last][dropcaps style="square"]N[/dropcaps]am vestibulum, arcu sodales feugiat consectetur, nisl orci bibendum elit, eu euismod magna sapien ut nibh. Donec semper quam scelerisque tortor dictum gravida. [/one_third_last]

[one_third]
[toggle title="Get Code"]
<pre>[[dropcaps]N[/dropcaps]]</pre>
[/toggle]
[/one_third]

[one_third]
[toggle title="Get Code"]
<pre>[[dropcaps style="circle"]N[/dropcaps]]</pre>
[/toggle]
[/one_third]

[one_third_last]
[toggle title="Get Code"]
<pre>[[dropcaps style="square"]N[/dropcaps]]</pre>
[/toggle]
[/one_third_last]

[divider type="space"]

<h4>Icon Text</h4>

[one_third]
<ul>
<li>[icon style="home"]Home[/icon]</li>
<li>[icon style="email"]Email[/icon]</li>
<li>[icon style="link"]Link[/icon]</li>
<li>[icon style="phone"]Phone[/icon]</li>
</ul>
[/one_third]

[one_third]
<ul>
<li>[icon style="calendar"]Calendar[/icon]</li>
<li>[icon style="user"]User[/icon]</li>
<li>[icon style="save"]Save[/icon]</li>
<li>[icon style="id"]Id[/icon]</li>
</ul>
[/one_third]

[one_third_last]
<ul>
<li>[icon style="notice"]Notice[/icon]</li>
<li>[icon style="rss"]Rss[/icon]</li>
<li>[icon style="checked"]Checked[/icon]</li>
<li>[icon style="tag"]Tag[/icon]</li>
</ul>
[/one_third_last]

[toggle title="Get Code"]
<pre>[<span>icon style="home"</span>]Home[/<span>icon</span>]
[<span>icon style="email"</span>]Email[/<span>icon</span>]
[<span>icon style="link"</span>]Link[/<span>icon</span>]
[<span>icon style="phone"</span>]Phone[/<span>icon</span>]
[<span>icon style="calendar"</span>]Calendar[/<span>icon</span>]
[<span>icon style="user"</span>]User[/<span>icon</span>]
[<span>icon style="save"</span>]save[/<span>icon</span>]
[<span>icon style="id"</span>]Id[/<span>icon</span>]
[<span>icon style="notice"</span>]Notice[/<span>icon</span>]
[<span>icon style="rss"</span>]Rss[/<span>icon</span>]
[<span>icon style="checked"</span>]Checked[/<span>icon</span>]
[<span>icon style="tag"</span>]Tag[/<span>icon</span>]
</pre>
[/toggle]


[divider type="space"]

<h4>Framed Boxes</h4>
[framedbox]
[one_half]
<h4>Simple</h4>
Borem ipsum dolor sit amet, onsectur adipiscing elit. Aenean nisl orci, condimentum ultrices consequat eu, vehicula ac mauris. Ut adipiscing, leo nec. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
[/one_half]

[one_half_last]
<h4>Framebox</h4>
Aenean nisl orci, condimentum ultrices consequat eu, vehicula ac mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nisl orci, condimentum.
[/one_half_last]

[/framedbox]

[toggle title="Get Code"]
<pre>
[[framedbox] content [/framedbox]]
</pre>
[/toggle]

[divider type="space"]

<h4>Highlighted Text</h4>
[one_fifth]
<p>Lorem ipsum dolor sit amet, [highlight color="red"]consectetur adipisicing[/highlight] elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim.</p>
[toggle title="Get Code"]
<pre>
[[highlight color="red"] content [/highlight]]
</pre>
[/toggle]
[/one_fifth]

[one_fifth]
<p>Lorem ipsum dolor sit amet, [highlight color="green"]consectetur adipisicing[/highlight] elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim.</p>
[toggle title="Get Code"]
<pre>
[[highlight color="green"] content [/highlight]]
</pre>
[/toggle]
[/one_fifth]

[one_fifth]
<p>Lorem ipsum dolor sit amet, [highlight color="blue"]consectetur adipisicing[/highlight] elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim.</p>
[toggle title="Get Code"]
<pre>
[[highlight color="blue"] content [/highlight]]
</pre>
[/toggle]
[/one_fifth]

[one_fifth]
<p>Lorem ipsum dolor sit amet, [highlight color="yellow"]consectetur adipisicing[/highlight] elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim.</p>
[toggle title="Get Code"]
<pre>
[[highlight color="yellow"] content [/highlight]]
</pre>
[/toggle]
[/one_fifth]

[one_fifth_last]
<p>Lorem ipsum dolor sit amet, [highlight color="black"]consectetur adipisicing[/highlight] elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim.</p>
[toggle title="Get Code"]
<pre>
[[highlight color="black"] content [/highlight]]
</pre>
[/toggle]
[/one_fifth_last]
[divider type="space"]

<h4>Tooltips</h4>

[one_half]
Vestibulum quis urna libero, [tooltip text="Suspendisse mollis sollicitudin sem, a sagittis mi pellentesque et. Avestibulum, arcu sodales feugiat consectetur."]a venenatis risus[/tooltip]. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
[/one_half]

[one_half_last]
[tooltip text="Suspendisse mollis sollicitudin sem, a sagittis mi pellentesque et. Avestibulum, arcu sodales feugiat consectetur."]Vestibulum[/tooltip] quis urna libero, a venenatis risus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
[/one_half_last]
[toggle title="Get Code"]
<pre>
[[tooltip text="Tooltip Text"] content [/tooltip]]
</pre>
[/toggle]
[divider type="space"]

<h4>Styled Table</h4>

[styledtable]

<table>
<thead>
<tr>
<th scope="col"><strong>Options</strong></th>
<th scope="col">Title 1</th>
<th scope="col">Title 2</th>
<th scope="col">Title 3</th>
<th scope="col">Title 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Option Title 1</td>
<td>Option</td>
<td>Option</td>
<td>Option</td>
<td>Option</td>
</tr>
<tr>
<td>Option Title 2</td>
<td>Option</td>
<td>Option</td>
<td>Option</td>
<td>Option</td>
</tr>
<tr>
<td>Option Title 3</td>
<td>Option</td>
<td>Option</td>
<td>Option</td>
<td>Option</td>
</tr>
<tr>
<td>Option Title 4</td>
<td>Option</td>
<td>Option</td>
<td>Option</td>
<td>Option</td>
</tr>
<tr>
<td>Option Title 5</td>
<td>Option</td>
<td>Option</td>
<td>Option</td>
<td>Option</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5"><em>Table footer text</em></td>
</tr>
</tfoot>
</table>

[/styledtable]
[toggle title="Get Code"]
<pre>
[[styledtable] table markup [/styledtable]]
</pre>
[/toggle]
[divider type="space"]
<h4>Url Shortening</h4>

Suspendisse mollis sollicitudin [short url="http://www.freaklife.com/rumblings/"] sem, a sagittis mi pellentesque et. Avestibulum, arcu sodales feugiat consectetur.

[toggle title="Get Code"]
<pre>
[[short url="http://www.yoursite.com/very-very-very-long-url/"]]
</pre>
[/toggle]

[divider type="space"]

<h4>Dividers</h4>

[one_third]
[toggle title="Get Code"]
<pre>
[[divider type="space"]]
</pre>
[/toggle]
[/one_third]


[one_third_last]
[toggle title="Get Code"]
<pre>
[[divider type="line"]]
</pre>
[/toggle]
[/one_third_last] 