Formatting

Shortcuts

<p class="highlight"> <div class="buffer"></div> <div class="box"><p></p></div> <div class="box half-left"><p></p></div> <div class="box half-right"><p></p></div> <h3 class="header-block" style="margin-bottom:0;">Title</h3> <div class="box" style="border-top:none;margin-top:0;"> </div> <div class="space"></div> <div class="separator"></div> <div class="one-half"> <div class="one-third"> <a class="btn" href="#">Here is a Rectangle Button</a> <div class="accordion"> <h3>Title<span class="plus">+</span></h3> <div> </div> </div>

Highlight Paragraph

This is a Sub Text Paragraph habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

This is a Sub Text Paragraph habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

<p class="highlight">This is a Sub Text Paragraph habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> <p>This is a Sub Text Paragraph habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>

Boxes

<div class="buffer"></div> <div class="box"> <h3>Lorem Ipsum Dolor Sit Amit</h3> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas <a href="#">Home</a> semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> </div> <div class="buffer"></div> <div class="box beige"> <h3>Lorem Ipsum Dolor Sit Amit</h3> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas <a href="#">Home</a> semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> </div> <div class="buffer"></div> <div class="box green"> <h3>Lorem Ipsum Dolor Sit Amit</h3> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas <a href="#">Home</a> semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> </div>

Half Boxes

<div class="box half-left"> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> </div> <div class="box half-right"> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> </div>

Header Block with Box

Header Block

<div class="buffer"></div> <h3 class="header-block" style="margin-bottom:0;">Header Block</h3> <div class="header-box"> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas <a href="#">Home</a> semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> </div>

Separator

This is a Regular Paragraph habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

This is a Regular Paragraph habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

<div class="separator"></div>

Spacer

This is a Regular Paragraph habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

This is a Regular Paragraph habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

<div class="space"></div>

Lists

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
• Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
• Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
• Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

<ul> <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> </ul>

Button

Here is a Rectangle Button <div class="buffer"></div> <a class="btn" href="#">Here is a Rectangle Button</a>

One Half Column

<div class="one-half">Content Goes Here</div><!-- end one-half --> <div class="one-half">Content Goes Here</div><!-- end one-half -->

One Third

<div class="one-third">Content Goes Here</div> <div class="one-third">Content Goes Here</div> <div class="one-third">Content Goes Here</div>

Accordion

<div class="buffer"></div> <div class="accordion"> <h3>Feature Title Here<span class="plus">+</span></h3> <div> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi.</p> </div> <h3>Feature Title Here<span class="plus">+</span></h3> <div> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi.</p> </div> </div><!-- end accordion div -->