FreshUI FreshUI

Typography
Headings, Paragraphs, Blockquotes, Alerts, Labels, Lists and more, all looking great!

Toggle .page-header

Headings

h1. Heading

h2. Heading

h3. Heading

h4. Heading

h5. Heading
h6. Heading

h1. Heading

h2. Heading

h3. Heading

h4. Heading

h5. Heading
h6. Heading

Text

This is a lead paragraph!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultrices, justo vel imperdiet gravida, urna ligula hendrerit nibh, ac cursus nibh sapien in purus. Mauris tincidunt tincidunt turpis in porta. Integer fermentum tincidunt auctor. Vestibulum ullamcorper, odio sed rhoncus imperdiet, enim elit sollicitudin orci, eget dictum leo mi nec lectus. Nam commodo turpis id lectus scelerisque vulputate. Integer sed dolor erat. Fusce erat ipsum, varius vel euismod sed, tristique et lectus? Etiam egestas fringilla enim, id convallis lectus laoreet at. Fusce purus nisi, gravida sed consectetur ut, interdum quis nisi. Quisque egestas nisl id lectus facilisis scelerisque

Integer sed dolor erat. Fusce erat ipsum, varius vel euismod sed, tristique et lectus? Etiam egestas fringilla enim, id convallis lectus laoreet at. Fusce purus nisi, gravida sed consectetur ut, interdum quis nisi. Quisque egestas nisl id lectus facilisis scelerisque? Proin rhoncus dui at ligula vestibulum ut facilisis ante sodales! Suspendisse potenti. Aliquam tincidunt sollicitudin sem nec ultrices. Sed at mi velit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultrices, justo vel imperdiet gravida, urna ligula hendrerit nibh, ac cursus nibh sapien in purus. Mauris tincidunt tincidunt turpis in porta. Integer fermentum tincidunt auctor. Vestibulum ullamcorper, odio sed rhoncus imperdiet, enim elit sollicitudin orci, eget dictum leo mi nec lectus. Nam commodo turpis id lectus scelerisque vulputate.

Emphasis Text

.text-muted Link | Muted
.text-primary Link | Primary
.text-success Link | Success
.text-info Link | Info
.text-warning Link | Warning
.text-danger Link | Danger

Well Paragraph

Small Well Gives the paragraph an inset effect! .well .well-sm

Normal Well Gives the paragraph an inset effect! .well

Large Well Gives the paragraph an inset effect! .well .well-lg

Blockquote Left

This is a blockquote with source info

Someone famous Source Title

Blockquote Right

This is a blockquote pulled right

Someone famous Source Title

Success Alert

Success

Upgrade finished!

Info Alert

Info

Nice day today!

Warning Alert

Warning

Be careful!

Danger Alert

Error

Oops.. it failed!

Labels and Badges

Labels

.label .label-default
Default
.label .label-primary
Primary
.label .label-info
Info
.label .label-success
Success
.label .label-warning
Warning
.label .label-danger
Danger

Badges

.badge Badge 25

Ordered <ol>

  1. First item
  2. Second item
  3. Third item
  4. Sublist
    1. First subitem
    2. Second subitem
    3. Third subitem
  5. Another item

Unordered <ul>

  • First item
  • Second item
  • Third item
  • Sublist
    • First subitem
    • Second subitem
    • Third subitem
  • Another item

Unstyled .list-unstyled

  • First item
  • Second item
  • Third item
  • Sublist
    • First subitem
    • Second subitem
    • Third subitem
  • Another item

Icon .fa-ul

  • First item
  • Second item
  • Third item
  • Sublist
    • First subitem
    • Second subitem
    • Third subitem
  • Another item

Description Lists

Default

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 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.