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: sass/styles.scss, line 14

1.1 base.colors Colors

Main colors for use on the site.

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: sass/base/_base.scss, line 20

1.2 base.blockquote Blockquote & Pre

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: sass/base/_base.scss, line 271

1.3 base.details Details and Summary

Custom styling added to replace accordion-type content with semantic HTML

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: sass/base/_base.scss, line 416

1.4 base.headlines Base Headings

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: sass/base/_base.scss, line 145

1.5 base.lists List Types

Example

Ordered List

List Item 1
List Item 2
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
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: sass/base/_base.scss, line 307

1.6 base.segmented_controls Segmented Controls

Control elements where all options are visible by default. It makes use of semantic HTML and clean UX to lessen cognitive load. For most cases, it's advisable to use it for no more than four options.

Markup: base/segmented_controls.twig

This shows default behavior with three options. If one option is set to checked, focus tabbing will only work for that specific value. Total width of the element is applied on the parent container.
<div class="segmented_controls">
	<input type="radio" name="segment" id="option_1" value="option_1">
		<label for="option_1">Option 1</label>
	<input type="radio" name="segment" id="option_2" value="option_2">
		<label for="option_2">Option 2</label>
	<input type="radio" name="segment" id="option_3" value="option_3">
		<label for="option_3">Option 3</label>
</div>

This shows default behavior with two options, with first being set to checked.
<div class="segmented_controls">
	<input type="radio" name="segment2" id="2option_1" value="option_1" checked>
		<label for="2option_1">Option 1</label>
	<input type="radio" name="segment2" id="2option_2" value="option_2">
		<label for="2option_2">Option 2</label>
</div>

This shows default behavior with two options, and is called with the sub-class <code>.two</code>. This option allows use where Flexbox cannot be employed.
<div class="segmented_controls two">
	<input type="radio" name="segment3" id="3option_1" value="option_1">
		<label for="3option_1">Option 1</label>
	<input type="radio" name="segment3" id="3option_2" value="option_2">
		<label for="3option_2">Option 2</label>
</div>

This shows default behavior with three options, and is called with the sub-class <code>.three</code>. This option allows use where Flexbox cannot be employed.
<div class="segmented_controls three">
	<input type="radio" name="segment4" id="4option_1" value="option_1">
		<label for="4option_1">Option 1</label>
	<input type="radio" name="segment4" id="4option_2" value="option_2">
		<label for="4option_2">Option 2</label>
	<input type="radio" name="segment4" id="4option_3" value="option_3">
		<label for="4option_3">Option 3</label>
</div>

This shows default behavior with four options, and is called with the sub-class <code>.four</code>. This option allows use where Flexbox cannot be employed.
<div class="segmented_controls four">
	<input type="radio" name="segment5" id="5option_1" value="option_1">
		<label for="5option_1">Option 1</label>
	<input type="radio" name="segment5" id="5option_2" value="option_2">
		<label for="5option_2">Option 2</label>
	<input type="radio" name="segment5" id="5option_3" value="option_3">
		<label for="5option_3">Option 3</label>
	<input type="radio" name="segment5" id="5option_4" value="option_3">
		<label for="5option_4">Option 4</label>
</div>

Source: sass/base/_base.scss, line 464

1.7 base.table Tables

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: sass/base/_base.scss, line 359

1.8 base.text Base Text

Default styles for use on site. The treatments shown here normally differ per region, and are styled appropriately.
Special Note: Since the link styling affects interface elements, as well, it's best to make modifications to specific area styling rather than the base text.

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: sass/base/_base.scss, line 210

1.9 base.toggle_switch Toggle Switch

Makes use of semantic HTML and clean UX to lessen cognitive load. Interaction enhanced with use of CSS transitions. Styling is done with checkbox input only to minimize need for custom code.

Example

Standard Toggle Disabled Toggle

Markup: base/toggle_switch.twig

<input type="checkbox" class="toggle" id="check_1" name="check_1" value="check_1">
	<label for="check_1">Standard Toggle</label>
<input type="checkbox" class="toggle" id="check_2" name="check_2" value="check_2" disabled="">
	<label for="check_2">Disabled Toggle</label>

Source: sass/base/_base.scss, line 605