typography.html

---
title: Typography Test
sidebar_option: sidebar
---

<p class="intro">Welcome to the typography page for Jekyll Boilerplate. I'm glad you are interested in using this and want to show you how elements look.</p>

<p><strong>This is what blockquotes look like.</strong></p>

<blockquote>
  <p>This is an example of an html page. You can have as many of these as you like, but if you get too many it might be easier to put them in a <code>_pages</code> directory. It'll help keep your root directory clear. Don't forget to add an includes for the <code>_pages</code> directory to your <code>_config.yml</code> file.</p>
</blockquote>

<p><strong>Perhaps you'd like to see what an unordered list looks like?</strong></p>

<ul>
  <li>Unordered list item #1</li>
  <li>Unordered list item #2</li>
  <li>Unordered list item #3</li>
</ul>

<p><strong>Or you'd prefer to see what an ordered list looks like?</strong></p>

<ol>
  <li>Ordered list item #1</li>
  <li>Ordered list item #2</li>
  <li>Ordered list item #3</li>
</ol>

<p><strong>This is what the headings look like.</strong></p>

<h1>Headline 1</h1>

<h2>Headline 2</h2>

<h3>Headline 3</h3>

<h4>Headline 4</h4>

<h5>Headline 5</h5>

<h6>Headline 6</h6>

<hr>

<p><strong>Check out the button styles</strong></p>

<p><a href="#" class="button">Primary Button</a> <a href="#" class="button light">Light Button</a></p>

<p><a href="#" class="button small">Small Primary Button</a> <a href="#" class="button light small">Small Light Button</a></p>

<p><a href="#" class="button arrow-left">Arrow Left</a> <a href="#" class="button arrow-right">Arrow Right</a></p>

<p>Colors and fonts are kepted in variables to make things easy to change. Check the <code>/_sass/variables.scss</code> file.</p>