Base

Accent

• 
  $primary-color

• 
  $secondary-color

• 
  $tertiary-color

• 
  $alert-color

• 
  $warning-color

• 
  $info-color

Base Light

• 
  $white

• 
  $ghost

• 
  $snow

• 
  $vapor

• 
  $whitesmoke

• 
  $silver

• 
  $smoke

• 
  $gainsboro

• 
  $base

Base Dark

• 
  $aluminum

• 
  $jumbo

• 
  $monsoon

• 
  $steel

• 
  $charcoal

• 
  $tuatara

• 
  $oil

• 
  $jet

• 
  $black

Headers

h1. This is a very large header.

h2. This is a large header.

h3. This is a medium header.

h4. This is a moderate header.

h5. This is a small header.

h6. This is a tiny header.

Headers with Links

h1. This is a very large header.

h2. This is a large header.

h3. This is a medium header.

h4. This is a moderate header.

h5. This is a small header.

h6. This is a tiny header.

Subheader

h1. subheader

h2. subheader

h3. subheader

h4. subheader

h5. subheader

h6. subheader

Definition List

Definition lists are great for small block of copy that describe the header

Lower cost

The new version of this product costs significantly less than the previous one!

Easier to use

We've changed the product so that it's much easier to use!

Safe for kids

You can leave your kids alone in a room with this product and they won't get hurt (not a guarantee).

Un-ordered Lists

Un-ordered lists are great for making quick outlines bulleted.

• List item with a much longer description or more content.
• List item
• List item
  • Nested List Item
  • Nested List Item
  • Nested List Item
• List item
• List item
• List item

Ordered Lists

Ordered lists are great for lists that need order, duh.

1. List Item 1
2. List Item 2
3. List Item 3

Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque feugiat vulputate porta. Nullam porta, nisl at feugiat aliquam, risus purus fermentum magna, sit amet hendrerit dui tellus a dolor. Suspendisse vehicula, lectus a rhoncus accumsan, lectus dolor facilisis urna, eu pretium ligula metus a lorem. Vivamus ornare eget arcu et blandit. Donec sed elit quis risus convallis consequat. Praesent varius turpis dolor, ac luctus libero interdum at. Morbi varius ullamcorper nulla, a interdum mi. Vivamus vel enim id nibh consectetur convallis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus aliquet elit sed lacinia sodales. Cras at quam diam. In vel enim ut sapien ornare iaculis vitae vel nisi. Aenean ligula nisl, scelerisque at cursus sit amet, efficitur sed lacus. Fusce sodales magna eu elementum hendrerit. Morbi sodales elit vel arcu mattis fermentum. Etiam dapibus quam blandit gravida suscipit.

Inline Elements

This is a text link
The strong element and b element example
The em element and i element example
The u element
This text has a strikethrough
The mark element indicates a highlight
Superscript^®
Subscript for things like H₂O
This small text is small for for fine print, etc.
This text is deleted and This text is inserted
Abbreviation: HTML
This is a citation
This is what inline code looks like.
Keybord input: Cmd
This is sample output from a computer program

Blockquote

I do not fear computers. I fear the lack of them. Maecenas faucibus mollis interdum. Aenean lacinia bibendum nulla sed consectetur. Isaac Asimov

Vcard

• Gaius Baltar
• 123 Colonial Ave.
• Caprica City
• Caprica , 12345
• [email protected]

Horizonal Rule

Standard Icons

Social Icons

Favicon

Foundation

You are on a small screen or larger.

You are on a medium screen or larger.

You are on a large screen or larger.

You are definitely on a small screen.

You are definitely on a medium screen.

You are definitely on a large screen.

You are not on a medium screen or larger.

You are not on a large screen or larger.

You are definitely not on a small screen.

You are definitely not on a medium screen.

You are definitely not on a large screen.

Can't touch this.

Can sort of touch this.

You are in landscape orientation.

You are in portrait orientation.

This text can only be read by a screen reader.

There's a line of text above this one, you just can't see it.

This text can be seen, but won't be read by a screen reader.

Skip to Content

Extras