Headings

<h4> <h5> <h6> are identical in styling to discourage excessive levels of hierarchy.

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>

Fancy Headings

Add flair to your headings.

Heading 1

Heading 2

Heading 3

<h1 class='fancy'>Heading 1</h1>
<h2 class='fancy'>Heading 2</h2>
<h3 class='fancy'>Heading 3</h3>

Doc headings

Headings with id attributes within a doc block will automatically get linkable elements prepended to them.

.doc

Hello!

Good morning

Good afternoon

Good night

<div class='doc pad1y pad2x'>
  <h1 id='doc-h1'>Hello!</h1>
  <h2 id='doc-h2'>Good morning</h2>
  <h3 id='doc-h3'>Good afternoon</h3>
  <h4 id='doc-h4'>Good night</h4>
</div>

Default Inline Elements

By default, inline elements have minimal formatting applied to them and no default block margins. The <p> tag is the sole exception whose functional use is to create dividing space.

A small excerpt

There's a saying amongst the officers: If a job's worth doing, it's worth doing well. If it's not worth doing, give it to Rimmer. He aches for responsibility, yet constantly fails the Astro-navigation exam. Astoundingly zealous, possibly mad; probably has more teeth than brain cells. Promotion prospects: comical.

An Astronaut
  • Hello, I'm Hilly.
  • Hello, I'm Holly.
  • Hello Holly.
  • Hello Hilly.
<h3>A small excerpt</h3>
<p>There's a saying amongst the officers: If a job's worth doing, it's worth doing well. If it's not worth doing, give it to <a href='http://en.wikipedia.org/wiki/Arnold_Rimmer'>Rimmer</a>. He aches for responsibility, yet constantly fails the Astro-navigation exam. Astoundingly zealous, possibly mad; probably has more teeth than brain cells. Promotion prospects: comical.</p>
<p><img src='../../img/astronaut1.png' /></p>
<span class='caption'>An Astronaut</span>
<ul>
  <li>Hello, I'm Hilly.</li>
  <li>Hello, I'm Holly.</li>
  <li>Hello Holly.</li>
  <li>Hello Hilly.</li>
</ul>

Formatted inline elements

For formatted long-running text in a blog post, about text, or documentation, a prose class on the parent container will apply block-level margins and additional formatting for child elements.

.prose

A small excerpt

There's a saying amongst the officers: If a job's worth doing, it's worth doing well. If it's not worth doing, give it to Rimmer. He aches for responsibility, yet constantly fails the Astro-navigation exam. Astoundingly zealous, possibly mad; probably has more teeth than brain cells. Promotion prospects: comical.

An Astronaut
  • Hello, I'm Hilly.
  • Hello, I'm Holly.
  • Hello Holly.
  • Hello Hilly.
<div class='prose'>

<h3>A small excerpt</h3>
<p>There's a saying amongst the officers: If a job's worth doing, it's worth doing well. If it's not worth doing, give it to <a href='http://en.wikipedia.org/wiki/Arnold_Rimmer'>Rimmer</a>. He aches for responsibility, yet constantly fails the Astro-navigation exam. Astoundingly zealous, possibly mad; probably has more teeth than brain cells. Promotion prospects: comical.</p>
<p><img src='../../img/astronaut1.png' /></p>
<span class='caption'>An Astronaut</span>
<ul>
  <li>Hello, I'm Hilly.</li>
  <li>Hello, I'm Holly.</li>
  <li>Hello Holly.</li>
  <li>Hello Hilly.</li>
</ul>

</div>

Dark formatted inline elements

Text elements have a contrast color when the parent container uses a .dark class.

.prose.dark.fill-navy

A small excerpt

There's a saying amongst the officers: If a job's worth doing, it's worth doing well. If it's not worth doing, give it to Rimmer. He aches for responsibility, yet constantly fails the Astro-navigation exam. Astoundingly zealous, possibly mad; probably has more teeth than brain cells. Promotion prospects: comical.

An Astronaut
  • Hello, I'm Hilly.
  • Hello, I'm Holly.
  • Hello Holly.
  • Hello Hilly.
<div class='prose fill-navy dark'>

<h3>A small excerpt</h3>
<p>There's a saying amongst the officers: If a job's worth doing, it's worth doing well. If it's not worth doing, give it to <a href='http://en.wikipedia.org/wiki/Arnold_Rimmer'>Rimmer</a>. He aches for responsibility, yet constantly fails the Astro-navigation exam. Astoundingly zealous, possibly mad; probably has more teeth than brain cells. Promotion prospects: comical.</p>
<p><img src='../../img/astronaut1.png' /></p>
<span class='caption'>An Astronaut</span>
<ul>
  <li>Hello, I'm Hilly.</li>
  <li>Hello, I'm Holly.</li>
  <li>Hello Holly.</li>
  <li>Hello Hilly.</li>
</ul>

</div>

Large formatted inline elements

Pair .prose-big with .prose for larger formatted text. This is ideal for read content that's more narrative like a blog or tutorial guide.

.prose.prose-big

A small excerpt

There's a saying amongst the officers: If a job's worth doing, it's worth doing well. If it's not worth doing, give it to Rimmer. He aches for responsibility, yet constantly fails the Astro-navigation exam. Astoundingly zealous, possibly mad; probably has more teeth than brain cells. Promotion prospects: comical.

An Astronaut
  • Hello, I'm Hilly.
  • Hello, I'm Holly.
  • Hello Holly.
  • Hello Hilly.
<div class='prose prose-big'>

<h3>A small excerpt</h3>
<p>There's a saying amongst the officers: If a job's worth doing, it's worth doing well. If it's not worth doing, give it to <a href='http://en.wikipedia.org/wiki/Arnold_Rimmer'>Rimmer</a>. He aches for responsibility, yet constantly fails the Astro-navigation exam. Astoundingly zealous, possibly mad; probably has more teeth than brain cells. Promotion prospects: comical.</p>
<p><img src='../../img/astronaut1.png' /></p>
<span class='caption'>An Astronaut</span>
<ul>
  <li>Hello, I'm Hilly.</li>
  <li>Hello, I'm Holly.</li>
  <li>Hello Holly.</li>
  <li>Hello Hilly.</li>
</ul>

</div>