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>
Links
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
- Ordered List Item 1
- Ordered List Item 2
- 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.