H1 - Primary header

H2 - Sub header

H3 - Sub header

H4 - Sub header

H5 - Sub header
H6 - Sub header

Paragraph (<p>) Examples:

A small paragraph to emphasis and show important bits. We can also underline things. Tousled drinking vinegar occupy, readymade vice post-ironic mustache vaporware lomo organic fap brunch health goth cronut. Chicharrones meggings chillwave, organic VHS coloring book fam vice kinfolk iceland four loko woke.

Meh craft beer +1, aesthetic before they sold out 3 wolf moon pork belly offal venmo roof party. Succulents thundercats pabst wayfarers, vinyl raw denim migas sriracha chia fixie ramps microdosing kale chips. Stumptown green juice +1 edison bulb, bushwick tbh VHS kale chips heirloom master cleanse williamsburg.

Horizontal Link (<hr>) Example:


Unordered List (<ul>) Example:

  • This is a list item
  • So is this - there could be more
  • Make sure to style list items to:
    • Not forgetting child list items
    • Not forgetting child list items
    • Not forgetting child list items
    • Not forgetting child list items
  • A couple more
  • top level list items

Ordered List (<ol>) Example:

  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  2. Aliquam tincidunt mauris eu risus.
    1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    2. Aliquam tincidunt mauris eu risus.
  3. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  4. Aliquam tincidunt mauris eu risus.

Table (<table>) Example:

Table Heading Table Heading
table data table data
table data table data
table data table data
table data table data

Blockquote (<blockquote>) Example

“Ooh - a blockquote! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.”

Code (<pre><code>) Example:

#header h1 a {
    display: block;
    width: 300px;
    height: 80px;
  }

Other phrase examples:

<em> Renders as emphasized text
<strong> Defines important text
<code> Defines a piece of computer code
<samp> Defines sample output from a computer program
<kbd> Defines keyboard input
<var> Defines a variable

Definition List (<dl>) Example:

Word One
Definition of word one... 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 eacommodo consequat.
Word Two
Definition of word two... Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magnaaliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex eacommodo consequat.

Libraries


Font Awesome

http://fontawesome.io/

Facebook
Twitter
Instagram
LinkedIn
Google Plus
YouTube

JQuery Mask

https://igorescobar.github.io/jQuery-Mask-Plugin/

Foundation Specific Stuff


Click Here to See More Examples and Code for the Examples

Form Example:

Here's how you use this input field!

Choose Your Favorite
Check these out
$ Submit

Badges Example:

Secondary Badge: 2
Success Badge: 3
Alert Badge: A
Warning Badge: B

Label Examples:

Secondary Label
Success Label
Alert Label
Warning Label

Button Examples:




Tiny
Small
Large
Expanded

Callout Examples:

This is a callout.

It has an easy to override visual style, and is appropriately subdued.

It's dangerous to go alone, take this.
This is a secondary callout

It has an easy to override visual style, and is appropriately subdued.

It's dangerous to go alone, take this.
This is a success callout

It has an easy to override visual style, and is appropriately subdued.

It's dangerous to go alone, take this.
This is a warning callout

It has an easy to override visual style, and is appropriately subdued.

It's dangerous to go alone, take this.
This is an alert callout

It has an easy to override visual style, and is appropriately subdued.

It's dangerous to go alone, take this.

This is a static close button example.

Dropdown Pane Example:

Tabs Example

one

Check me out! I'm a super cool Tab panel with text content!

two

Check me out! I'm a super cool Tab panel with text content!

three

Check me out! I'm a super cool Tab panel with text content!

four

Check me out! I'm a super cool Tab panel with text content!

five

Check me out! I'm a super cool Tab panel with text content!

six

Check me out! I'm a super cool Tab panel with text content!

Switch Examples