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>
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 Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
<table class="table"> … </table>