ElementalCSS

Typography

Headings

Regular headings.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Headings with links. Note the dynamic underline sizing.

<h1><a href="#">Heading 1</a></h1>
<h2><a href="#">Heading 2</a></h2>
<h3><a href="#">Heading 3</a></h3>
<h4><a href="#">Heading 4</a></h4>
<h5><a href="#">Heading 5</a></h5>
<h6><a href="#">Heading 6</a></h6>

Paragraph

A paragraph goes in here.

<p>A paragraph goes in here.</p>

This is a link

This is a paragraph with a link in it.

<p><a href="#">This is a link</a></p>
<p>This is a paragraph with <a href="#">a link</a> in it.</p>

Bold

Some small text.

This is a paragraph with some small text.

<p><strong>Some small text.</strong></p>
<p>This is a paragraph with <strong>some small text</strong>.</p>

Italic

Some small text.

This is a paragraph with some small text.

<p><em>Some small text.</em></p>
<p>This is a paragraph with <em>some small text</em>.</p>

Small

Some small text.

This is a paragraph with some small text.

<p><small>Some small text.</small></p>
<p>This is a paragraph with <small>some small text</small>.</p>

Subscript & Superscript

Subscript2

Superscript2

<p>Subscript<sub>2</sub></p>
<p>Superscript<sup>2</sup></p>