TYPHOGRAPHY

Typography is, quite simply, the art and technique of arranging type.

Headings

All HTML headings, <h1> through <h6> are available.

h1. Heading 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet nibh. Vivamus non arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

h2. Heading 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet nibh. Vivamus non arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

h3. Heading 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet nibh. Vivamus non arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

h4. Heading 4

h5. Heading 5
h6. Heading 6

Emphasis

<em>

For emphasizing a snippet of text with stress

The following snippet of text is rendered as italicized text.

<em>rendered as italicized text</em>

<strong>

For emphasizing a snippet of text with important

The following snippet of text is rendered as bold text.

<strong>rendered as bold text</strong>

<small>

For de-emphasizing inline or blocks of text, use the small tag.

This line of text is meant to be treated as fine print.

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>

Color Box

BOX 1

Lorem ipsum dolor sit amet, consecetur adipiscing elit donec sit amet nibh.

BOX 2

Lorem ipsum dolor sit amet, consecetur adipiscing elit donec sit amet nibh.

BOX 3

Lorem ipsum dolor sit amet, consecetur adipiscing elit donec sit amet nibh.

<div class="clearfix">
<div class="joobi-box box-grey col-md-3">
<h5>BOX 3</h5>

Lorem ipsum dolor sit amet, consecetur adipiscing elit donec sit amet nibh.

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

#First NameLast NameUsername
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table"></table>

Support

Lorem ipsum dolor sit amet, consectetur

+1-202-555-0151

help@joobi.co

Working Days/Hours:
Mon - Fri / 9:00AM - 8:00PM

Recommended Hosting

DreamHost

Be the First to Know

Get all the latest information on Events, Sales and Offers. Follow us.