Typography

16
Archie
Heading
<h1>Heading 1</h1>

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
Paragraph
<p>paragraph</p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id eleifend nunc. Sed fringilla pellentesque consequat.

lead paragraph

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Blockquotes
blockquotes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id eleifend nunc. Sed fringilla pellentesque consequat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id eleifend nunc. Sed fringilla pellentesque consequat.

List

Unordered

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Ordered

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem
Box > Body 10px padding
<div class="box">
 <header>
  <h5>Title</h5>
 </header>
 <div class="body">Content;</div>
</div>
Box > Block No padding
<div class="box">
  <header>
    <h5>Title</h5>
  </header>
    <div class="block">Content</div>
</div>
Label
label
Labels Markup
Default <span class="label">Default</span>
Success <span class="label label-success">Success</span>
Warning <span class="label label-warning">Warning</span>
Important <span class="label label-important">Important</span>
Info <span class="label label-info">Info</span>
Inverse <span class="label label-inverse">Inverse</span>
Badge
badge
Name Example Markup
Default 1 <span class="badge">1</span>
Success 2 <span class="badge badge-success">2</span>
Warning 4 <span class="badge badge-warning">4</span>
Important 6 <span class="badge badge-important">6</span>
Info 8 <span class="badge badge-info">8</span>
Inverse 10 <span class="badge badge-inverse">10</span>