Typography
Headings
Headings <h1> through <h6>, including usage examples for headings with subtext.
Standard Headlines
Heading One
Heading Two
Heading Three
Heading Four
Heading Five
Heading Six
<h1>Heading One</h1>
<h2>Heading Two</h2>
<h3>Heading Three</h3>
<h4>Heading Four</h4>
<h5>Heading Five</h5>
<h6>Heading Six</h6>Headings with Subtext
Add subtext to a heading by including a <span> inside <h1>, <h2>, or <h3>. Contents of the <span> will be treated as subtext.
Heading One Subtext
Heading Two Subtext
Heading Three Subtext
<h1>
Heading One
<span>Subtext</span>
</h1>
<h2>
Heading Two
<span>Subtext</span>
</h2>
<h3>
Heading Three
<span>Subtext</span>
</h3>Paragraph Styles
Unclassified, primary, secondary, and tertiary paragraphs.
Primary Text
Add a significant amount of emphasis to a paragraph.
Lorem ipsum dolor sit amet, ipsum commodo eros lacus. Adipiscing lectus quis eu vel mauris duis, ac tellus mauris cursus et. Sed deserunt augue orci, pede ac.
<p class="primary">Lorem ipsum dolor sit amet, ipsum commodo eros lacus. Adipiscing lectus quis eu vel mauris duis, ac tellus mauris cursus et. Sed deserunt augue orci, pede ac.</p>Secondary Text
Add a moderate amount of emphasis to a paragraph.
Lorem ipsum dolor sit amet, ipsum commodo eros lacus. Adipiscing lectus quis eu vel mauris duis, ac tellus mauris cursus et. Sed deserunt augue orci, pede ac.
<p class="secondary">Lorem ipsum dolor sit amet, ipsum commodo eros lacus. Adipiscing lectus quis eu vel mauris duis, ac tellus mauris cursus et. Sed deserunt augue orci, pede ac.</p>Tertiary Text
Add a small amount of emphasis to a paragraph.
Lorem ipsum dolor sit amet, ipsum commodo eros lacus. Adipiscing lectus quis eu vel mauris duis, ac tellus mauris cursus et. Sed deserunt augue orci, pede ac.
<p class="tertiary">Lorem ipsum dolor sit amet, ipsum commodo eros lacus. Adipiscing lectus quis eu vel mauris duis, ac tellus mauris cursus et. Sed deserunt augue orci, pede ac.</p>Quotes
Quotes for testimonials
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<p class="quote">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>Basic Text
Standard body text.
Lorem ipsum dolor sit amet, ipsum commodo eros lacus. Adipiscing lectus quis eu vel mauris duis, ac tellus mauris cursus et. Sed deserunt augue orci, pede ac.
<p>Lorem ipsum dolor sit amet, ipsum commodo eros lacus. Adipiscing lectus quis eu vel mauris duis, ac tellus mauris cursus et. Sed deserunt augue orci, pede ac.</p>Inline Elements
Bold
Lorem ipsum dolor sit amet, ipsum commodo eros lacus.
<p>Lorem ipsum dolor sit amet, <strong>ipsum commodo eros</strong> lacus.</p>Italics
Lorem ipsum dolor sit amet, ipsum commodo eros lacus.
<p>Lorem ipsum dolor sit amet, <em>ipsum commodo eros</em> lacus.</p>Abbreviations
Lorem ipsum dolor sit amet, ipsum commodo eros lacus.
<p>Lorem ipsum dolor sit amet, <abbr title="Expanded version of abbriviated text">ipsum commodo eros</abbr> lacus.</p>Links
Standard link.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<p>Lorem ipsum dolor sit amet, <a href="#">consectetur adipiscing elit</a>. Integer posuere erat a ante.</p>