Typographie

Buttons

Default Button   Button Bevel   Button Square

<a href="#" class="button">Default Button</a>
<a href="#" class="button button-bevel">Button Bevel</a>
<a href="#" class="button button-square">Button Square</a>

Button 1   Button 2   Button Outline   Button Gradient

<a href="#" class="button button-1">Button 1</a>
<a href="#" class="button button-2">Button 2</a>
<a href="#" class="button button-outline">Button Outline</a>
<a href="#" class="button button-gradient">Button Gradient</a>

Button Block
Button XLarge   Button Large
Button Small   Button XSmall

<a href="#" class="button button-block">Button Block</a>
<a href="#" class="button button-xlarge">Button XLarge</a>
<a href="#" class="button button-large">Button Large</a>
<a href="#" class="button button-small">Button Small</a>
<a href="#" class="button button-xsmall">Button XSmall</a>

Color Buttons

button orange   button pink   button red   button purple   button green   button yellow   button blue   button lightblue   button darkblue   button white   button off-white   button black

<a href="#" class="button orange">button orange</a>
<a href="#" class="button pink">button pink</a>
<a href="#" class="button red">button red</a>
<a href="#" class="button purple">button purple</a>
<a href="#" class="button green">button green</a>
<a href="#" class="button yellow">button yellow</a>
<a href="#" class="button blue">button blue</a>
<a href="#" class="button lightblue">button lightblue</a>
<a href="#" class="button darkblue">button darkblue</a>
<a href="#" class="button white">button white</a>
<a href="#" class="button off-white">button off-white</a>
<a href="#" class="button black">button black</a>

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
<h1 class="heading">Heading 1</h1>
<h2 class="heading">Heading 2</h2>
<h3 class="heading">Heading 3</h3>
<h4 class="heading">Heading 4</h4>
<h5 class="heading">Heading 5</h5>
<h6 class="heading">Heading 6</h6>

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>

Code

Inline

Wrap inline snippets of code with <code>.

For example, <section> should be wrapped as inline.

For example, <code><section></code> should be wrapped as inline.

Note: Be sure to keep code within <pre> tags as close to the left as possible; it will render all tabs.

 

Basic block

Use <pre> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.

<p>Sample text here…</p>
<pre>&lt;p&gt;Sample text here…&lt;/p&gt;</pre>

Tables

# First Name Last Name Username
1 John Doe JohnDoe
2 Jane Doe JaneDoe
3 Bob Doe BobDoe
<table class="table">…</table>