Typography

headings, texts, lists and more

Heading

H1. Heading 1

H2. Heading 2

H3. Heading 3

H4. Heading 4

H5. Heading 5
H6. Heading 6

Paragraph

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.

Blockquotes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Duis mollis, est non commodo luctus, nisi erat porttitor ligula integer posuere erat a ante.

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

Someone famous Source Title

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

Someone famous Source Title

Paragraph Styling & Lead

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididuntut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo attribute consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lists

Unordered

  • List Item 1
  • List Item 2
  • List Item 3
  • List Item 4

Ordered

  1. List Item 1
  2. List Item 2
  3. List Item 3
  4. List Item 4

Unstyled

  • List Item 1
  • List Item 2
  • List Item 3
  • List Item 4

Inline

  • List Item 1
  • List Item 2
  • List Item 3
  • List Item 4

Advance Lists

Styling

  • List item in strong tag
  • List item in small tag
  • List item with longer text that may show in 2 line
  • List item in italic tag

Colorfull

  1. Normal list item
  2. List Item in .text-success class
  3. List Item in .text-error class
  4. List Item in .text-warning class
  5. List Item in .text-info class
  6. List Item in .muted class

Custom Icon

  • List Item 1
  • List Item 2
  • List Item 3
  • List Item 4, without icon
  • List Item 5

Inline & Custom Icon

  • Item 1
  • Item 2
  • Item 3
  • Item 4, without icon
  • Item 5

Description

Default Description

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.

Horizontal Description

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Abbreviations

For expanded text on long hover of an abbreviation, include the title attribute.

An abbreviation of the word attribute is attr.

Add .initialism to an abbreviation for a slightly smaller font-size.

HTML is the best thing since sliced bread.

Address

Your, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Full Name
first.last@example.com

Pre

<p>Sample text here...</p>

Code

Inline Code

Embeded Inline Code in <p> tag

Syntax Highliter

<div class="modal hide fade">
  <div class="modal-header">
    <button type="button" class="close" >&times;</button>
    <h3>Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn">Close</a>
    <a href="#" class="btn btn-primary">Save changes</a>
  </div>
</div>

Well Block

Default Well

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Large Well

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Small Well

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

2013 © FLATY Admin Template.