Branding & Style Guide

1 base Base

These are the default base styles applied to HTML elements.

Component classes can override these styles, but if no class applies a style to an HTML element, these styles will be the ones displayed.

Source: styles.scss, line 14
Example
Main site colors, with percentage values and grayscale drawdowns for comparison.

Sienna

RGB: 119,17,20

Hex: #771114

Drawdown
100%
90%
80%
70%
60%
50%
40%
30%
20%
10%

Navy

RGB: 26,38,85

Hex: #1a2655

Drawdown
100%
90%
80%
70%
60%
50%
40%
30%
20%
10%

Orange

RGB: 183,106,41

Hex: #b76a29

Drawdown
100%
90%
80%
70%
60%
50%
40%
30%
20%
10%

Gray

RGB: 148,150,153

Hex: #949699

Drawdown
100%
90%
80%
70%
60%
50%
40%
30%
20%
10%

Olive

RGB: 142,144,53

Hex: #8e9035

Drawdown
100%
90%
80%
70%
60%
50%
40%
30%
20%
10%
Markup: base/colors.twig
<!-- Colors Twig -->
Main site colors, with percentage values and grayscale drawdowns for comparison.
<div class="colormain group">
	<div class="colordemo">
		<div class="chip-main chip-01">
		</div>
		<h4>Sienna</h4>
		<p>RGB: 119,17,20  </p>
		<p>Hex: #771114</p>
		<h5>Drawdown</h5>
		<div class="color-drawdown">
			<div class="dd-chip-label">100%</div>
			<div class="dd-chip-color chip-01"></div>
			<div class="dd-grayband"></div>
			<div class="dd-chip-label">90%</div>
			<div class="dd-chip-color chip-01 lighten-90"></div>
			<div class="dd-chip-label">80%</div>
			<div class="dd-chip-color chip-01 lighten-80"></div>
			<div class="dd-chip-label">70%</div>
			<div class="dd-chip-color chip-01 lighten-70"></div>
			<div class="dd-chip-label">60%</div>
			<div class="dd-chip-color chip-01 lighten-60"></div>
			<div class="dd-chip-label">50%</div>
			<div class="dd-chip-color chip-01 lighten-50"></div>
			<div class="dd-chip-label">40%</div>
			<div class="dd-chip-color chip-01 lighten-40"></div>
			<div class="dd-chip-label">30%</div>
			<div class="dd-chip-color chip-01 lighten-30"></div>
			<div class="dd-chip-label">20%</div>
			<div class="dd-chip-color chip-01 lighten-20"></div>
			<div class="dd-chip-label">10%</div>
			<div class="dd-chip-color chip-01 lighten-10"></div>
		</div>
	</div> <!-- End Color Demo -->
	<div class="colordemo">
		<div class="chip-main chip-02">
		</div>
		<h4>Navy</h4>
		<p>RGB: 26,38,85   </p>
		<p>Hex: #1a2655</p>
		<h5>Drawdown</h5>
		<div class="color-drawdown">
			<div class="dd-chip-label">100%</div>
			<div class="dd-chip-color chip-02"></div>
			<div class="dd-grayband"></div>
			<div class="dd-chip-label">90%</div>
			<div class="dd-chip-color chip-02 lighten-90"></div>
			<div class="dd-chip-label">80%</div>
			<div class="dd-chip-color chip-02 lighten-80"></div>
			<div class="dd-chip-label">70%</div>
			<div class="dd-chip-color chip-02 lighten-70"></div>
			<div class="dd-chip-label">60%</div>
			<div class="dd-chip-color chip-02 lighten-60"></div>
			<div class="dd-chip-label">50%</div>
			<div class="dd-chip-color chip-02 lighten-50"></div>
			<div class="dd-chip-label">40%</div>
			<div class="dd-chip-color chip-02 lighten-40"></div>
			<div class="dd-chip-label">30%</div>
			<div class="dd-chip-color chip-02 lighten-30"></div>
			<div class="dd-chip-label">20%</div>
			<div class="dd-chip-color chip-02 lighten-20"></div>
			<div class="dd-chip-label">10%</div>
			<div class="dd-chip-color chip-02 lighten-10"></div>
		</div>
	</div> <!-- End Color Demo -->
	<div class="colordemo">
		<div class="chip-main chip-03">
		</div>
		<h4>Orange</h4>
		<p>RGB: 183,106,41 </p>
		<p>Hex: #b76a29</p>
		<h5>Drawdown</h5>
		<div class="color-drawdown">
			<div class="dd-chip-label">100%</div>
			<div class="dd-chip-color chip-03"></div>
			<div class="dd-grayband"></div>
			<div class="dd-chip-label">90%</div>
			<div class="dd-chip-color chip-03 lighten-90"></div>
			<div class="dd-chip-label">80%</div>
			<div class="dd-chip-color chip-03 lighten-80"></div>
			<div class="dd-chip-label">70%</div>
			<div class="dd-chip-color chip-03 lighten-70"></div>
			<div class="dd-chip-label">60%</div>
			<div class="dd-chip-color chip-03 lighten-60"></div>
			<div class="dd-chip-label">50%</div>
			<div class="dd-chip-color chip-03 lighten-50"></div>
			<div class="dd-chip-label">40%</div>
			<div class="dd-chip-color chip-03 lighten-40"></div>
			<div class="dd-chip-label">30%</div>
			<div class="dd-chip-color chip-03 lighten-30"></div>
			<div class="dd-chip-label">20%</div>
			<div class="dd-chip-color chip-03 lighten-20"></div>
			<div class="dd-chip-label">10%</div>
			<div class="dd-chip-color chip-03 lighten-10"></div>
		</div>
	</div> <!-- End Color Demo -->
	<div class="colordemo">
		<div class="chip-main chip-04">
		</div>
		<h4>Gray</h4>
		<p>RGB: 148,150,153</p>
		<p>Hex: #949699</p>
		<h5>Drawdown</h5>
		<div class="color-drawdown">
			<div class="dd-chip-label">100%</div>
			<div class="dd-chip-color chip-04"></div>
			<div class="dd-grayband"></div>
			<div class="dd-chip-label">90%</div>
			<div class="dd-chip-color chip-04 lighten-90"></div>
			<div class="dd-chip-label">80%</div>
			<div class="dd-chip-color chip-04 lighten-80"></div>
			<div class="dd-chip-label">70%</div>
			<div class="dd-chip-color chip-04 lighten-70"></div>
			<div class="dd-chip-label">60%</div>
			<div class="dd-chip-color chip-04 lighten-60"></div>
			<div class="dd-chip-label">50%</div>
			<div class="dd-chip-color chip-04 lighten-50"></div>
			<div class="dd-chip-label">40%</div>
			<div class="dd-chip-color chip-04 lighten-40"></div>
			<div class="dd-chip-label">30%</div>
			<div class="dd-chip-color chip-04 lighten-30"></div>
			<div class="dd-chip-label">20%</div>
			<div class="dd-chip-color chip-04 lighten-20"></div>
			<div class="dd-chip-label">10%</div>
			<div class="dd-chip-color chip-04 lighten-10"></div>
		</div>
	</div> <!-- End Color Demo -->
	<div class="colordemo">
		<div class="chip-main chip-05">
		</div>
		<h4>Olive</h4>
		<p>RGB: 142,144,53 </p>
		<p>Hex: #8e9035</p>
		<h5>Drawdown</h5>
		<div class="color-drawdown">
			<div class="dd-chip-label">100%</div>
			<div class="dd-chip-color chip-05"></div>
			<div class="dd-grayband"></div>
			<div class="dd-chip-label">90%</div>
			<div class="dd-chip-color chip-05 lighten-90"></div>
			<div class="dd-chip-label">80%</div>
			<div class="dd-chip-color chip-05 lighten-80"></div>
			<div class="dd-chip-label">70%</div>
			<div class="dd-chip-color chip-05 lighten-70"></div>
			<div class="dd-chip-label">60%</div>
			<div class="dd-chip-color chip-05 lighten-60"></div>
			<div class="dd-chip-label">50%</div>
			<div class="dd-chip-color chip-05 lighten-50"></div>
			<div class="dd-chip-label">40%</div>
			<div class="dd-chip-color chip-05 lighten-40"></div>
			<div class="dd-chip-label">30%</div>
			<div class="dd-chip-color chip-05 lighten-30"></div>
			<div class="dd-chip-label">20%</div>
			<div class="dd-chip-color chip-05 lighten-20"></div>
			<div class="dd-chip-label">10%</div>
			<div class="dd-chip-color chip-05 lighten-10"></div>
		</div>
	</div> <!-- End Color Demo -->
</div> <!-- End Outer wrapper -->
Source: base/_base.scss, line 15
Example

“This is a blockquote. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.”

Markup: base/blockquote.twig
<blockquote>
  <p>“This is a blockquote. Lorem ipsum dolor sit amet, consectetuer adipiscing
    elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc
    iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at,
    tincidunt nec, gravida vehicula, nisl.”</p>
</blockquote>
Source: base/_base.scss, line 248
Example
Summary Demonstration

Details text for demonstration purposes. This handy HTML5 element can be used to replace accordions and other structures with semantic markup that requires no scripting.

Also, it is good to note that when display: block; is used on the details element, the default arrow indicator will not show. This can be rectified by using display: list-item;.

Markup: base/details.twig
<details>
	<summary>Summary Demonstration</summary>
	<p>Details text for demonstration purposes. This handy HTML5 element can be used to replace accordions and other structures with semantic markup that requires no scripting.</p>
	<p>Also, it is good to note that when <code>display: block;</code> is used on the  details element, the default arrow indicator will not show. This can be rectified by using <code>display: list-item;</code>.</p>
</details>
Source: base/_base.scss, line 384
Example

I am an H1 tag

I am an H2 tag

I am an H3 tag

I am an H4 tag

I am an H5 tag
I am an H6 tag

Heading 2

This is a demonstration of adjacent sibling selectors for use with headings and paragraphs.

Heading 3

This is a demonstration of adjacent sibling selectors for use with headings and paragraphs.

Heading 4

This is a demonstration of adjacent sibling selectors for use with headings and paragraphs.

Heading 5

This is a demonstration of adjacent sibling selectors for use with headings and paragraphs.

Heading 6

This is a demonstration of adjacent sibling selectors for use with headings and paragraphs.

Markup: base/headlines.twig
<h1>I am an H1 tag</h1>

<h2>I am an H2 tag</h2>

<h3>I am an H3 tag</h3>

<h4>I am an H4 tag</h4>

<h5>I am an H5 tag</h5>

<h6>I am an H6 tag</h6>

<hr>

<h2>Heading 2</h2>
<p>This is a demonstration of adjacent sibling selectors for use with headings and paragraphs.</p>

<h3>Heading 3</h3>
<p>This is a demonstration of adjacent sibling selectors for use with headings and paragraphs.</p>

<h4>Heading 4</h4>
<p>This is a demonstration of adjacent sibling selectors for use with headings and paragraphs.</p>

<h5>Heading 5</h5>
<p>This is a demonstration of adjacent sibling selectors for use with headings and paragraphs.</p>

<h6>Heading 6</h6>
<p>This is a demonstration of adjacent sibling selectors for use with headings and paragraphs.</p>
Source: base/_base.scss, line 140
Example

Ordered List

  1. List Item 1
  2. List Item 2
  3. List Item 3
    1. List Item 3.1
    2. List Item 3.2
      1. List Item 3.2.1
      2. List Item 3.2 2
    3. List Item 3.3
  4. List Item 4

Unordered List

  • List Item 1
  • List Item 2
  • List Item 3
    • List Item 3.1
    • List Item 3.2
      • List Item 3.2.1
      • List Item 3.2 2
    • List Item 3.3
  • List Item 4
Markup: base/lists.twig
<h3>Ordered List</h3>
<ol>
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3
    <ol>
      <li>List Item 3.1</li>
      <li>List Item 3.2
        <ol>
          <li>List Item 3.2.1</li>
          <li>List Item 3.2 2</li>
        </ol>
      </li>
      <li>List Item 3.3</li>
    </ol>
  </li>
  <li>List Item 4</li>
</ol>
<hr />
<h3>Unordered List</h3>
<ul>
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3
    <ul>
      <li>List Item 3.1</li>
      <li>List Item 3.2
        <ul>
          <li>List Item 3.2.1</li>
          <li>List Item 3.2 2</li>
        </ul>
      </li>
      <li>List Item 3.3</li>
    </ul>
  </li>
  <li>List Item 4</li>
</ul>
Source: base/_base.scss, line 283
Example
Table Header 1 Table Header 2 Table Header 3
Division 1 Division 2 Division 3
Division 1 Division 2 Division 3
Division 1 Division 2 Division 3
Footer Element 1 Footer Element 2 Footer Element 3
Markup: base/table.twig
<table>
  <thead>
  <tr>
    <th>Table Header 1</th>
    <th>Table Header 2</th>
    <th>Table Header 3</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>Division 1</td>
    <td>Division 2</td>
    <td>Division 3</td>
  </tr>
  <tr>
    <td>Division 1</td>
    <td>Division 2</td>
    <td>Division 3</td>
  </tr>
  <tr>
    <td>Division 1</td>
    <td>Division 2</td>
    <td>Division 3</td>
  </tr>
  </tbody>
  <tfoot>
  <tr>
    <td>Footer Element 1</td>
    <td>Footer Element 2</td>
    <td>Footer Element 3</td>
  </tr>  
  </tfoot>
</table>
Source: base/_base.scss, line 335

1.7 base.text Base Text

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Default styles for use on site. The treatments shown here normally differ per region, and are styled appropriately.

Example

Liquorice fruitcake lollipop. Sesame snaps muffin gummies cake. Apple pie dessert sugar plum toffee marzipan bonbon sesame snaps halvah. Macaroon croissant sweet cheesecake. Croissant icing muffin. Gingerbread pudding halvah bonbon chupa chups bonbon sugar plum fruitcake ice cream. Bear claw tootsie roll jujubes.

Jelly donut dragée sweet roll sesame snaps tootsie roll. Halvah powder chocolate cake pudding. Cotton candy fruitcake jelly beans cake. Marshmallow jelly apple pie cookie. Wafer chupa chups powder wafer. Danish cake candy

Markup: base/text.twig
<p>Liquorice fruitcake lollipop. Sesame snaps muffin gummies cake. Apple pie
  dessert sugar plum toffee <a href="#">marzipan bonbon sesame</a> snaps halvah.
  Macaroon croissant sweet cheesecake. <i>Croissant icing</i> muffin. Gingerbread
  pudding
  halvah bonbon chupa chups bonbon sugar plum fruitcake ice cream. Bear claw
  tootsie roll jujubes.</p>
<p>Jelly donut dragée sweet <a href="#">roll</a> sesame snaps
  <strong>tootsie roll</strong>. Halvah powder chocolate cake pudding.
  Cotton candy fruitcake jelly beans cake. Marshmallow
  jelly apple pie cookie. Wafer chupa chups powder wafer. Danish cake candy </p>
Source: base/_base.scss, line 192