Typography

Basic Headers


H1 Header

H2 Header

H3 Header

H4 Header

H5 Header
H6 Header

Headers with <small>

<small>content</small>

H1 Header

H2 Header

H3 Header

H4 Header

H5 Header
H6 Header

Sub Headers

class="subheader"

H1 Header

H2 Header

H3 Header

H4 Header

H5 Header
H6 Header

Paragraphs

It's really easy to add emphasis to copy in Foundation. We've implemented some standards like bold and italics, as well as, our own nifty styles, such as <code>, <kbd> and <small>

Unordered Lists

ul.disc
  • 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
ul.circle
  • 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
ul.square
  • 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

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

Definition Lists

Definition Title
Definition text, you can add as many of these as you need. The line-height matches paragraphs.

Blockquotes

<blockquote>

I do not fear computers. I fear the lack of them. Isaac Asimov

Print Styles

.print-only.hide-on-print

Foundation includes print styles developed by HTML5 Boilerplate to give you some basic print-specific styles. These are activated when you print through a media query. It includes:

  • Clearing out backgrounds, box shadows, and text shadows
  • Appending link URLs after the anchor text
  • Bordering blockquotes and pre elements
  • Page cleanup and window minimization

On top of that, Foundation includes a couple of simple classes you can use to control elements printing, or not printing. Simply attached .print-only on an element to only show when printing, and .hide-on-print to hide something when printing.