H1. Heading 1

H2. Heading 2

H3. Heading 3

H4. Heading 4

H5. Heading 5
H6. Heading 6

All HTML headings, <h1> through <h6> are available.

Navigation

use navigation-text class for creating menu <a class="navigation-text" />

Link

body-text and default paragraph

    <p>...</p>
    <div class="body-text">...</div>

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

body-secondary-text

    <p class="body-secondary-text">...</p>

Pellentesque laoreet molestie lacus sit amet tempor. Quisque eget felis augue, non egestas dui. Curabitur id nulla tortor, nec tincidunt libero. Donec placerat diam sed massa commodo quis auctor mauris consectetur. In luctus pharetra rhoncus. Etiam tristique arcu eget neque dignissim suscipit. In hac habitasse platea dictumst.

long-text

Use this class to display large amounts of text, such as the contents of books or magazines.
    <p class="long-text">...</p>

Regular Pellentesque laoreet molestie lacus sit amet tempor. Quisque eget felis augue, non egestas dui. Curabitur id nulla tortor, nec tincidunt libero. Donec placerat diam sed massa commodo quis auctor mauris consectetur. In luctus pharetra rhoncus. Etiam tristique arcu eget neque dignissim suscipit. In hac habitasse platea dictumst.

paragraph with .indent class

    <p class="indent">...</p>

Aenean porttitor, purus eget egestas pellentesque, sapien mi feugiat massa, quis malesuada ante nisl ac orci. Curabitur at lacus mauris. Sed tincidunt scelerisque tortor, id convallis enim auctor a. Mauris pharetra, lectus nec rutrum venenatis, neque nunc elementum libero, at feugiat justo ipsum at orci.

Sed iaculis quam a nisl porttitor et cursus mauris porttitor. Vestibulum gravida posuere lacus id tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum blandit, nibh ac molestie viverra, libero orci venenatis felis, ornare facilisis magna leo at ligula.

tertiary-text

    <p class="tertiary-text">...</p>

Integer tempor molestie aliquet. Aliquam erat volutpat. Praesent in ultricies erat. Vivamus dolor purus, posuere quis accumsan ac, hendrerit sit amet lorem. Phasellus non risus mi. Integer libero metus, egestas ut tincidunt sit amet, auctor eget nisl. Sed tortor massa, adipiscing sed aliquet tempor, cursus quis est. Proin id neque pharetra arcu consequat laoreet. Nullam pretium faucibus congue. In erat mauris, viverra in tempus vestibulum, dictum ac nibh. Integer ullamcorper velit vitae lacus semper ut mollis mauris tincidunt. Phasellus malesuada urna et augue bibendum viverra. Curabitur dui nulla, luctus eu vulputate eget, congue at metus.

tertiary-secondary-text

    <p class="tertiary-secondary-text">...</p>

Suspendisse eu magna tellus, sit amet facilisis tortor. Aliquam posuere placerat rhoncus. Donec egestas lectus vitae mauris volutpat et imperdiet neque fringilla. Cras dictum dui ac turpis vestibulum et posuere nibh ornare. Donec mattis odio quis mi dictum malesuada eu a tellus. Praesent nisl magna, pellentesque ac pharetra vel, varius ac est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla facilisi. Praesent consequat sem commodo tortor facilisis quis consectetur urna varius.

Small text

    <small>...</small>

This is a small text.

Bold text

    <strong>...</strong>

This is a strong text.

Italic text

    <em>...</em>

This is a italicized text.

Abbreviations

    <abbr title="Title of abbreviation">...</abbr>

An abbreviation of the word attribute is attr

html is the best thing since sliced bread.

Address

    <address>
        ...
    </address>
Company, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Full Name
first.last@gmail.com

Blockquote

    <blockquote>
        ...
    </blockquote>

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

Blockquote to left

    <blockquote>
        ...
        <small>...</small>
    </blockquote>

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

Someone famous Source Title

Blockquote to right

    <blockquote class="place-right">
        ...
        <small>...</small>
    </blockquote>

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

Someone famous Source Title

Lists

Unordered list

    <ul>
        <li>...</li>
    </ul>
  • 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
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Ordered list

    <ol>
        <li>...</li>
    </ol>
  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
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem

Unstyled list

    <ul class="unstyled">
        <li>...</li>
    </ul>
  • 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
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Labels

Label type Label definition
Default <span class="label">Default</span>
Success <span class="label success">Success</span>
Warning <span class="label warning">Warning</span>
Important <span class="label important[error]">Important</span>
Info <span class="label info">Info</span>
Inverse <span class="label inverse">Inverse</span>

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.