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.
<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
Link in a header
Link in a header
Link in a header
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.
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
Hi everyone! I hope you like this article. This comments placed here to show admins’ comments stylization. Let me know what you think about it?
Wow, you really have nice styles here, but you forgot this: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac augue tortor, ut lobortis erat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum placerat, mi ut egestas commodo, tortor sem imperdiet nunc, in hendrerit lacus nibh eget nisl. Fusce non risus molestie tellus suscipit viverra. Donec varius, nisl at tincidunt aliquet, dolor tortor ornare diam, sed dapibus nunc turpis eget ante. Sed non ligula ante. Morbi porttitor ornare odio vitae facilisis. Mauris eu volutpat neque.
This an example of reply comment made by admin.
Really great. This looks like a good solution for a long searched and by many tried idea. think, some people will start to use BV because of this. Congrats!
This is a novel take on the web typography. Well-played, Blue Vanga, well-played.
Thanks, hope you like it!
I have a long name, but short comment.
Short message with strong text.
What about links in the comments? Links work and so abbreviation.
What about block-quotes?
Third level comment with cite: Proin placerat augue a tellus sodales eu vehicula lectus mattis. Nulla et turpis nisi, in interdum dolor. Nullam ac erat ligula.
Can we go even further?
Alright! Morbi vitae mi nisi, vitae blandit nisl. Morbi fermentum, tellus at pulvinar pulvinar, lorem dolor porttitor mi, quis lobortis lacus ligula id urna.