Base CSS

Blockquote

A block quote example

Here is a block quote. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. 
<blockquote>Here is a block quote. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. </blockquote>

Buttons

Button styles can be applied to any element. Typically you'll want to use either a <button> or an <a> element:

An a element In orange 
<a class="btn" href="#">An a element</a>
<a class="btn orange" href="#">In orange</a>

<button class="btn">A button element</button>
<button class="btn orange">In orange</button>

Colours

There's a few SCSS variables to sort out the primary swatches of the website. Listed as follows

$col-grey
$col-yellowgrey
$col-lightorange
$col-orange-bg
$col-orange
$col-red
$col-navy
$col-purple 
<div class="line txtC">
    <div class="col cols6">
      <div class="docSwatch" style="background-color: #d7d6c4;"></div>
      <code>$col-grey</code>
    </div>
    <div class="col cols6">
      <div class="docSwatch" style="background-color: #9f9d83;"></div>
      <code>$col-yellowgrey</code>
    </div>
    <div class="col cols6">
      <div class="docSwatch" style="background-color: #f7941e;"></div>
      <code>$col-lightorange</code>
    </div>
    <div class="col cols6">
      <div class="docSwatch" style="background-color: #f15a22;"></div>
      <code>$col-orange-bg</code>
    </div>
    <div class="col cols6">
      <div class="docSwatch" style="background-color: #f58220;"></div>
      <code>$col-orange</code>
    </div>
    <div class="col cols6">
      <div class="docSwatch" style="background-color: #ed1c24;"></div>
      <code>$col-red</code>
    </div>
    <div class="col cols6">
      <div class="docSwatch" style="background-color: #04003f;"></div>
      <code>$col-navy</code>
    </div>
    <div class="col cols6">
      <div class="docSwatch" style="background-color: #231930;"></div>
      <code>$col-purple</code>
    </div>
</div>

File List

A file list example

<ul class="file-list listReset">
    <li><a href="example.pdf">PDF Listing Title</a></li>
    <li><a href="example.doc">Word document download example</a></li>
    <li><a href="example.jpg">Jpg document download example</a></li>
    <li><a href="example.zip">Zip document download example</a></li>
</ul>

Table

Table styling for a default content table. Don't forget the caption. Add a .hidden class to the caption to have it hidden.

Column Heading Column Heading Column Heading
Cell content here Cell content here Cell content here
Cell content here Cell content here Cell content here
Cell content here Cell content here Cell content here
Cell content here Cell content here Cell content here
1a. A table caption 
<table class="table table-striped">
    <thead>
        <tr>
            <td>Column Heading</td>
            <td>Column Heading</td>
            <td>Column Heading</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Cell content here</td>
            <td>Cell content here</td>
            <td>Cell content here</td>
        </tr>
        <tr>
            <td>Cell content here</td>
            <td>Cell content here</td>
            <td>Cell content here</td>
        </tr>
        <tr>
            <td>Cell content here</td>
            <td>Cell content here</td>
            <td>Cell content here</td>
        </tr>
        <tr>
            <td>Cell content here</td>
            <td>Cell content here</td>
            <td>Cell content here</td>
        </tr>
    </tbody>
    <caption><strong>1a.</strong> A table caption</caption>
</table>