A Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non nibh quam, et scelerisque diam. Integer tincidunt, tortor eget scelerisque feugiat, libero urna tristique tortor, ac posuere tortor libero sit amet nibh. Aliquam condimentum lacinia fringilla. Proin bibendum nisl a enim adipiscing in mollis orci pellentesque. Cras in arcu dui, sed dapibus arcu. Nunc metus velit, molestie tincidunt tempus ut, faucibus sed dolor. Donec tempus faucibus velit, ut tempus felis feugiat sed. Sed tempus ultricies pharetra.

Right aligned Paragraph

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non nibh quam, et scelerisque diam. Integer tincidunt, tortor eget scelerisque feugiat, libero urna tristique tortor, ac posuere tortor libero sit amet nibh. Aliquam condimentum lacinia fringilla. Proin bibendum nisl a enim adipiscing in mollis orci pellentesque. Cras in arcu dui, sed dapibus arcu. Nunc metus velit, molestie tincidunt tempus ut, faucibus sed dolor. Donec tempus faucibus velit, ut tempus felis feugiat sed. Sed tempus ultricies pharetra.

Center aligned Paragraph

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non nibh quam, et scelerisque diam. Integer tincidunt, tortor eget scelerisque feugiat, libero urna tristique tortor, ac posuere tortor libero sit amet nibh. Aliquam condimentum lacinia fringilla. Proin bibendum nisl a enim adipiscing in mollis orci pellentesque. Cras in arcu dui, sed dapibus arcu. Nunc metus velit, molestie tincidunt tempus ut, faucibus sed dolor. Donec tempus faucibus velit, ut tempus felis feugiat sed. Sed tempus ultricies pharetra.

An image

A Blockquote:

This is how a blockquote will appear

Preformatted text

$('.accordion > dt > a').click(function() {
    allPanels.slideUp();
    $(this).parent().next().slideDown();
    return false;
});
                

This is how a H1 tag will appear inside a post

This is how a H2 tag will appear inside a post

This is how a H3 tag will appear inside a post

This is how a H4 tag will appear inside a post

This is how a H5 tag will appear inside a post

This is how a H6 tag will appear inside a post

An unordered list:

• First Unordered list item
• Second Unordered list item
• Third Unordered list item
• Fourth Unordered list item

An ordered list:

1. First Ordered list item
2. Second Ordered list item
3. Third Ordered list item
4. Fourth Ordered list item

This is how a link will appear

An accordion:

Panel 1

Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.

Panel 2

Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.

Panel 3

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.

Foundation UI elements

Alerts

Labels

Labels are useful inline styles that can be dropped into body copy to call out certain sections or to attach metadata. Examples might be noting when something was updated or that something is new. The syntax is simple, just a span element with a class of .label. The border styling mirrors that of the Foundation buttons.

Tooltips

The tooltips can be positioned on the "tip-bottom", which is the default position, "tip-top" (hehe), "tip-left", or "tip-right" of the target element.In a mobile environment the tooltips are full width and bottom aligned.

Panels

Nice Tabs

Need something a little fancier? Nice tabs have some sweet default styling and can add a little polish to a prototype (or documentation). They can be both standard and contained, just like the simple tabs.

Nice Tab 1

Nice Tab 2

Nice Tab 3

• This is nice tab 1's content. Pretty neat, huh?
• This is nice tab 2's content. Now you see it!
• This is simple tab 3's content. It's only okay.

hCard

hCards are a microformat for contact information. We've represented the correct syntax here to ensure they are machine readable, as well as applied some minimal styling.

• John T. Yeti
• Yeti
• Foundation, Inc.
• 408-867-5309
• http://foundation.zurb.com/