h1. Heading 1

<em>rendered as italicized text</em>

<strong>rendered as bold text</strong>

Buttons: 1-4

Default Button Button 2 Button 3 Button 4

<a href="#" class="joobi-btn">Default Button</a>
<a href="#" class="joobi-btn button-2">Button 2</a>
<a href="#" class="joobi-btn button-3">Button 3</a>
<a href="#" class="joobi-btn button-4">Button 4</a>

Buttons: Color

Button Grey Button Pink Button Green Button Purple Button Orange Button Blue

<a href="#" class="joobi-btn button-grey">Button Grey</a>
<a href="#" class="joobi-btn button-pink">Button Pink</a>
<a href="#" class="joobi-btn button-green">Button Green</a>
<a href="#" class="joobi-btn button-purple">Button Purple</a>
<a href="#" class="joobi-btn button-orange">Button Orange</a>
<a href="#" class="joobi-btn button-blue">Button Blue</a>

Buttons: Color Compounded with Buttons 2-4

Button Grey Button Pink Button Green Button Purple Button Orange Button Blue

<a href="#" class="joobi-btn button-2 button-grey">Button Grey</a>
<a href="#" class="joobi-btn button-3 button-pink">Button Pink</a>
<a href="#" class="joobi-btn button-4 button-green">Button Green</a>
<a href="#" class="joobi-btn button-2 button-purple">Button Purple</a>
<a href="#" class="joobi-btn button-3 button-orange">Button Orange</a>
<a href="#" class="joobi-btn button-4 button-blue">Button Blue</a>

Buttons: Square

Default Button Button 3 Button Grey Button Pink Button Green Button Purple Button Orange Button Blue

<a href="#" class="joobi-btn button-square">Default Button</a>
<a href="#" class="joobi-btn button-square button-3">Button 3</a>
<a href="#" class="joobi-btn button-square button-2 button-grey">Button Grey</a>
<a href="#" class="joobi-btn button-square button-3 button-pink">Button Pink</a>

Buttons: Icons

Default Button Button 2 Button 3 Button 4 Button Grey Button Pink Button Green Button Purple Button Orange Button Blue

<a href="#" class="joobi-btn"><i class="fa fa-fw fa-download"></i> Default Button</a>
<a href="#" class="joobi-btn button-2"><i class="fa fa-fw fa-cloud"></i> Button 2</a>
<a href="#" class="joobi-btn button-3"><i class="fa fa-fw fa-star"></i> Button 3</a>
<a href="#" class="joobi-btn button-4"><i class="fa fa-fw fa-car"></i> Button 4</a>
<a href="#" class="joobi-btn button-grey"><i class="fa fa-fw fa-tag"></i> Button Grey</a>
<a href="#" class="joobi-btn button-pink"><i class="fa fa-fw fa-university"></i> Button Pink</a>
<a href="#" class="joobi-btn button-green"><i class="fa fa-fw fa-edit"></i> Button Green</a>
<a href="#" class="joobi-btn button-purple"><i class="fa fa-fw fa-lock"></i> Button Purple</a>
<a href="#" class="joobi-btn button-orange"><i class="fa fa-fw fa-clock-o"></i> Button Orange</a>
<a href="#" class="joobi-btn button-blue"><i class="fa fa-fw fa-arrows"></i> Button Blue</a>

Buttons: Icons Only

<a href="#" class="joobi-btn"><i class="fa fa-fw fa-download"></i></a>
<a href="#" class="joobi-btn button-2"><i class="fa fa-fw fa-cloud"></i></a>
<a href="#" class="joobi-btn button-3"><i class="fa fa-fw fa-star"></i></a>
<a href="#" class="joobi-btn button-4"><i class="fa fa-fw fa-car"></i></a>
<a href="#" class="joobi-btn button-grey"><i class="fa fa-fw fa-tag"></i></a>
<a href="#" class="joobi-btn button-pink"><i class="fa fa-fw fa-university"></i></a>
<a href="#" class="joobi-btn button-green"><i class="fa fa-fw fa-edit"></i></a>
<a href="#" class="joobi-btn button-purple"><i class="fa fa-fw fa-lock"></i></a>
<a href="#" class="joobi-btn button-orange"><i class="fa fa-fw fa-clock-o"></i></a>
<a href="#" class="joobi-btn button-blue"><i class="fa fa-fw fa-arrows"></i></a>

Notice Styles

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

<p class="alert alert-success">…</p>

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

<p class="alert alert-info">…</p>

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

<p class="alert alert-warning">…</p>

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

<p class="alert alert-error">…</p>

Blockquotes

For quoting blocks of content from another source within your document.

Default blockquote

Wrap <blockquote> around any HTML as the quote. For straight quotes we recommend a <p>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

Blockquote options

Style and content changes for simple variations on a standard blockquote.

Naming a source

Add <small> tag for identifying the source. Wrap the name of the source work in <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<small>Someone famous <cite title="Source Title">Source Title</cite></small>
</blockquote>

Tables

<table class="table">
…
</table>