We typography — So we’ve given you a bit more than just a set of headers!

p.lead Foundation 3 uses a modular scale to generate typography. That means a great, logical relationship for your copy whether you use the Scss version or just download the CSS.

<h2> Design is so simple, that’s why it is so complicated.

<h3> Design is thinking made visual.

Sed volutpat, augue a imperdiet vehicula, diam elit laoreet felis, eu dapibus leo sapien nec mi. Phasellus et quam nunc, eget volutpat purus. Nullam pharetra ante eu orci euismod nec semper est blandit. Nullam felis felis, semper in mollis sit amet, eleifend vel metus.

There’s no shortcut for greatness.

Quisque malesuada viverra augue, a facilisis quam tempor sit amet. Praesent laoreet suscipit sagittis. Curabitur at tellus lectus, sit amet viverra erat. Cras tristique, odio ac ultrices commodo, lectus lacus fringilla dui, sed mollis ipsum ante malesuada enim.

<h4> Design is the method of putting form and content together.

Cras vestibulum mauris in arcu mattis sed tempor lectus eleifend. Etiam neque ante, elementum sed egestas ac, sollicitudin at ante. Quisque malesuada bibendum ultricies. Maecenas dignissim mollis nunc, a bibendum turpis fermentum eu. In vulputate suscipit tortor. Sed tristique lacus sed augue interdum ornare.

<h5> You can observe a lot just by watching.

Donec ultricies ligula sit amet arcu tempor dapibus. Suspendisse non ligula est. Vivamus tincidunt lacus at massa adipiscing ultricies. Nunc at nisi diam. Praesent pellentesque fringilla tortor. Sed eget diam sit amet est accumsan euismod ac eu tellus. Donec mi eros, vestibulum ac mattis et, convallis a augue.

Did you know?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec commodo.

find out more

<h6> Design in the key to everything. If you learn how to design you can do anything.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec commodo, nunc et luctus viverra, massa ante dapibus eros, ut tempus enim nibh non leo. Integer dictum faucibus turpis. Proin ut turpis diam, ut imperdiet purus.

h1 header

h2 header

h3 header

h4 header

h5 header

h6 header

h6 header Small header text.

h5 header Small header text.

h4 header Small header text.

h3 header Small header text.

h2 header Small header text.

h1 header + small part

Link in a header

h1 header

h1.subheader text

Donec lorem augue, rhoncus at sollicitudin at, interdum vitae erat. Morbi dolor felis, pellentesque ut viverra quis, aliquet a velit. Ut dignissim semper ligula eu placerat.

h2 header

h2.subheader text

Nam sodales mauris ut felis mattis bibendum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

h3 header

h3.subheader text

Integer eget eros nisl. Vivamus commodo augue vel risus imperdiet tincidunt. Maecenas feugiat, tortor sit amet tempus tempor, felis eros scelerisque ante, non ultricies tellus mi at augue.

h4 header

h4.subheader header

Proin nisl eros, congue sit amet vulputate a, posuere at lectus. Sed augue augue, cursus sit amet condimentum nec, vulputate nec orci. Proin lorem tortor, faucibus ac semper et, varius vitae magna.

h5 header

h5.subheader header

Mauris nec molestie mauris. Cras eu neque orci, convallis tempus dui. Nunc metus nunc, venenatis non sollicitudin eu, varius vitae tortor.

h6 header

h6.subheader header

Morbi tincidunt lorem nec lorem imperdiet venenatis cursus est molestie. Nam ac libero ut nibh volutpat gravida sit amet sed orci. Donec molestie risus pharetra metus dapibus porta.

ul

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

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

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

List item with a much longer description or more content.
List item
List item
List item
List item
List item
List item

ul.large

List item with a much longer description or more content.
List item
List item
List item

ul.very-large

List item with a much longer description or more content.
List item
List item
List item

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

ul.checkmark

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

ul.cross

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

li.checkmark or li.cross

List item with a much longer description or more content.
List item
List item
List item
List item
List item

Ordered List Item
Ordered List Item
Ordered List Item
Ordered List Item

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

Donec eget purus urna, non consectetur orci. Aliquam neque odio, blandit a faucibus nec, rutrum non leo. Morbi imperdiet nulla in ligula vestibulum blandit vitae ac orci. Fusce blandit consequat felis ac sagittis. Nullam turpis nibh, congue nec placerat quis, dictum sed arcu. Ut nec risus ante, eu condimentum metus. Ut convallis, justo in tempor ullamcorper, lectus lacus dapibus magna, id dictum felis nunc id orci.

The XYZ Doohickey Company was founded in 1971, and has been providing quality doohickeys to the public ever since. Located in Gotham City, XYZ employs over 2,000 people and does all kinds of awesome things for the Gotham community.
John Doe