style_guide.html

---
title: styleguide
permalink: "/style_guide/"
layout: page
type: hidden
---

<h1 class="t-section-headline">Core</h1>




<h2 class="t-h5 t-grey t-sans-bold">Color</h2>
<div class="row l-pad--bottom">
  <div class="col-2">
    <div class="aspect-1-1">
      <div class="bg-red t-center l-pad--top">
        <p class="t-white">
          #ce1a40
        </p>
      </div>
    </div>
  </div>
  <div class="col-2">
    <div class="aspect-1-1">
      <div class="bg-blue t-center l-pad--top">
        <p class="t-white">
          #65B3E0
        </p>
      </div>
    </div>
  </div>
  <div class="col-2">
    <div class="aspect-1-1">
      <div class="bg-black t-center l-pad--top">
        <p class="t-white">
          #111111
        </p>
      </div>
    </div>
  </div>
  <div class="col-2">
    <div class="aspect-1-1">
      <div class="bg-grey t-center l-pad--top">
        <p class="t-white">
          #828282
        </p>
      </div>
    </div>
  </div>
  <div class="col-2">
    <div class="aspect-1-1">
      <div class="bg-white t-center l-pad--top">
        <p class="t-grey">
          #FFFFFF
        </p>
      </div>
    </div>
  </div>
</div>









<h2 class="t-h5 t-grey t-sans-bold">Type</h2>
<div class="row l-pad--bottom">
  <div class="col-12">
    <h1 class="t-serif">Merriweather</h1>
  </div>
  <div class="col-12">
    <h1 class="t-serif-italic">Merriweather Italic</h1>
  </div>
  <div class="col-12 ">
    <h1 class="t-sans">Open Sans</h1>
  </div>
  <div class="col-12">
    <h1 class="t-sans-bold">Open Sans Bold</h1>
  </div>

</div>

<h2 class="t-h5 t-grey t-sans-bold">Font Sizing</h2>

<h1>This is a Headline (h1)</h1>
<h2>This is a Headline (h2)</h2>
<h3>This is a Headline (h3)</h3>
<h4>This is a Headline (h4)</h4>
<h5>This is a Headline (h5)</h5>
<h6>This is a Headline (h6)</h6>

<p>This is a large body of text. This is a large body of text. This is a large body of text. This is a large body of text. This is a large body of text. This is a large body of text. This is a large body of text. This is a large body of text. This is a large body of text. This is a large body of text. This is a large body of text. This is a large body of text. This is a large body of text. </p>

<blockquote>
  This is a quote.
</blockquote>



<h1 class="t-section-headline">Grid</h1>
<pre>Note: .col-* always go directly inside a .row</pre>
<div class="row l-pad--bottom">
  <div class="col-12 bg-grey t-center">
    .col-12
  </div>
</div>
<div class="row l-pad--bottom">
  <div class="col-6 bg-grey t-center">
    .col-6
  </div>
  <div class="col-6 bg-grey t-center">
    .col-6
  </div>
</div>
<div class="row l-pad--bottom">
  <div class="col-4 bg-grey t-center">
    .col-4
  </div>
  <div class="col-4 bg-grey t-center">
    .col-4
  </div>
  <div class="col-4 bg-grey t-center">
    .col-4
  </div>
</div>
<div class="row l-pad--bottom">
  <div class="col-3 bg-grey t-center">
    .col-3
  </div>
  <div class="col-3 bg-grey t-center">
    .col-3
  </div>
  <div class="col-3 bg-grey t-center">
    .col-3
  </div>
  <div class="col-3 bg-grey t-center">
    .col-3
  </div>
</div>
<pre>Grid colums can be centered with .row.row--centered</pre>
<div class="row row--centered l-pad--bottom">
  <div class="col-3 bg-grey t-center">
    .col-3
  </div>
  <div class="col-3 bg-grey t-center">
    .col-3
  </div>
  <div class="col-3 bg-grey t-center">
    .col-3
  </div>
</div>
<div class="row row--centered l-pad--bottom">
  <div class="col-6 bg-grey t-center">
    .col-6
  </div>
</div>



<h1 class="t-section-headline">UI Controls</h1>


<h2 class="t-h5 t-grey t-sans-bold l-pad--top">Buttons</h2>


<div>
  <button class="btn-default">.btn-default</button>
  <button class="btn-primary">.btn-primary</button>
  <button class="btn-secondary">.btn-secondary</button>
  <br>
  <br>
  <button class="btn-default btn--large">.btn--large</button>
  <button class="btn-default btn--small">.btn--small</button>

</div>



<h2 class="t-h5 t-grey t-sans-bold l-pad--top">Text Links</h2>

<div>
  <p>Here is some text and <a href="#">this is a link</a> and here is more text. Here is some text and <a href="#">this is a link</a> and here is more text. Here is some text and <a href="#">this is a link</a> and here is more text. Here is some text and <a href="#">this is a link</a> and here is more text. Here is some text and <a href="#">this is a link</a> and here is more text </p>
</div>



<h2 class="t-h5 t-grey t-sans-bold l-pad--top">Input Controls</h2>

<form action="#">
  <label for="text-input">Text input</label>
  <input type="text" id="text-input">
  <br>
  <br>
  <input type="checkbox" name="my-checkbox" id="my-checkbox">
  <label for="my-checkbox">Checkbox</label>
  <br>
  <br>
  <input type="radio" name="my-radio" id="my-radio1">
  <label for="my-radio1">radio 1</label>
  <input type="radio" name="my-radio" id="my-radio2">
  <label for="my-radio2">radio 2</label>
  <br>
  <br>
</form>












<h1 class="t-section-headline">Content Components</h1>


<div class="row">

  <div class="col-4">
    <img src="//placehold.it/350x100" alt="placeholder">
    <h2>content callout</h2>
    <p> Here is some content about the above image and headline</p>
    <button class="btn-default">Optional CTA</button>
  </div>

  <div class="col-4">
    <img src="//placehold.it/350x100" alt="placeholder">
    <h2>content callout</h2>
    <p> Here is some content about the above image and headline</p>
    <button class="btn-primary">Optional CTA</button>
  </div>

  <div class="col-4">
    <img src="//placehold.it/350x150" alt="placeholder">
    <h2>content callout</h2>
    <p> Here is some content about the above image and headline</p>
    <button class="btn-default">Optional CTA</button>
  </div>

</div>





<h1 class="t-section-headline">Larger Components</h1>

{% include header.html %}