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:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam tincidunt mauris eu risus.
1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
2. Aliquam tincidunt mauris eu risus.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
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.

Foundation Specific Stuff

Click Here to See More Examples and Code for the Examples

Form Example:

Input Label

Here's how you use this input field!

How many puppies? What books did you read over summer break? Select Menu

Choose Your Favorite Red Blue Yellow

Check these out Checkbox 1 Checkbox 2 Checkbox 3

Label

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