$c-tx-blue
#183a71
$c-orange
#ff7700
$c-light-blue
#849ebf
$c-link-blue
#469ffc
$c-bright-blue
#1680fb
$c-lightest-blue
#eaf1f7
$c-login-blue
#057CFF
$c-faded-blue
#b0d6ff
$c-gray
#999999
$c-light-gray
#d2d2d2
$c-red
#E8391E
$c-green
#75A841
<div class="docs-color">
<code>$c-tx-blue</code>
<div class="docs-color__block" style="background: #183a71"></div>
<code>#183a71</code>
</div>
<div class="docs-color">
<code>$c-orange</code>
<div class="docs-color__block" style="background: #ff7700"></div>
<code>#ff7700</code>
</div>
<div class="docs-color">
<code>$c-light-blue</code>
<div class="docs-color__block" style="background: #849ebf"></div>
<code>#849ebf</code>
</div>
<div class="docs-color">
<code>$c-link-blue</code>
<div class="docs-color__block" style="background: #469ffc"></div>
<code>#469ffc</code>
</div>
<div class="docs-color">
<code>$c-bright-blue</code>
<div class="docs-color__block" style="background: #1680fb"></div>
<code>#1680fb</code>
</div>
<div class="docs-color">
<code>$c-lightest-blue</code>
<div class="docs-color__block" style="background: #eaf1f7"></div>
<code>#eaf1f7</code>
</div>
<div class="docs-color">
<code>$c-login-blue</code>
<div class="docs-color__block" style="background: #057CFF"></div>
<code>#057CFF</code>
</div>
<div class="docs-color">
<code>$c-faded-blue</code>
<div class="docs-color__block" style="background: #b0d6ff"></div>
<code>#b0d6ff</code>
</div>
<div class="docs-color">
<code>$c-gray</code>
<div class="docs-color__block" style="background: #999999"></div>
<code>#999999</code>
</div>
<div class="docs-color">
<code>$c-light-gray</code>
<div class="docs-color__block" style="background: #d2d2d2"></div>
<code>#d2d2d2</code>
</div>
<div class="docs-color">
<code>$c-red</code>
<div class="docs-color__block" style="background: #E8391E"></div>
<code>#E8391E</code>
</div>
<div class="docs-color">
<code>$c-green</code>
<div class="docs-color__block" style="background: #75A841"></div>
<code>#75A841</code>
</div>.f-family--sans
Default Sans Serif
.f-family--light
Brandon Grot W01 Light
.f-family--regular
Brandon Grot W01 Regular
.f-family--medium
Brandon Grot W01 Medium
.f-family--bold
Brandon Grot W01 Bold
<div class="docs-fonts">
<code>.f-family--sans</code>
<span class="docs-fonts__families f-family--sans">Default Sans Serif</span>
</div>
<div class="docs-fonts">
<code>.f-family--light</code>
<span class="docs-fonts__families f-family--light">Brandon Grot W01 Light</span>
</div>
<div class="docs-fonts">
<code>.f-family--regular</code>
<span class="docs-fonts__families f-family--regular">Brandon Grot W01 Regular</span>
</div>
<div class="docs-fonts">
<code>.f-family--medium</code>
<span class="docs-fonts__families f-family--medium">Brandon Grot W01 Medium</span>
</div>
<div class="docs-fonts">
<code>.f-family--bold</code>
<span class="docs-fonts__families f-family--bold">Brandon Grot W01 Bold</span>
</div>.f-size--xs
Extra Small
.f-size
Default
.f-size--s
Small
.f-size--md
Medium
.f-size--lg
Large
.f-size--xl
Extra Large
<div class="docs-fonts">
<code>.f-size--xs</code>
<span class="f-size--xs">Extra Small</span>
</div>
<div class="docs-fonts">
<code>.f-size</code>
<span class="f-size">Default</span>
</div>
<div class="docs-fonts">
<code>.f-size--s</code>
<span class="f-size--s">Small</span>
</div>
<div class="docs-fonts">
<code>.f-size--md</code>
<span class="f-size--md">Medium</span>
</div>
<div class="docs-fonts">
<code>.f-size--lg</code>
<span class="f-size--lg">Large</span>
</div>
<div class="docs-fonts">
<code>.f-size--xl</code>
<span class="f-size--xl">Extra Large</span>
</div>Large, highlighted text for phone numbers and such
<span class="tx-bright-important">865-524-2911</span><span class="tx-super-important">Important Text</span><button class="action-link icon-text-arrow-right ">
Learn More
</button>This alternate version of the action link embeds the SVG icon so that CSS can modify the color.
<a href="" class="action-link ">
Learn More <span class="icon-text-arrow-right" data-grunticon-embed></span>
</a>Headings to separate sections of content on pages. Any heading tag can be used, they will be styled the same.
<h1 class="content-heading">Heading 1</h1>
<h2 class="content-heading">Heading 2</h2>
<h3 class="content-heading">Heading 3</h3>
<h4 class="content-heading">Heading 4</h4>
<h5 class="content-heading">Heading 5</h5>
<h6 class="content-heading">Heading 6</h6>Default styling for headings. Usually found in a wysiwyg component.
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>An inline heading that mimics a form label.
<h3 class="label-heading">Heading Text</h3>A scrollable content element for long, embedded legal text.
Please read the following messages while we process your request, then acknowledge below.
Utility Service Agreement
Submission of this request for utility services from the Knoxville Utilities Board (KUB) binds the requestor to conform and be subject to all current KUB rules and regulations (which are subject to change).
Meter Access Message
Utility meters are the sole property of KUB. As a customer of KUB's utility service, you are responsible for providing KUB employees and/or contractors free and clear access to the meter at any time for the purposes of reading, maintaining, or inspecting the meter.
Schedule of Connection Charges
A connection charge of {0} will be included on your first bill.
Schedule of Potential Deposits
KUB verifies identity and determines deposit requirements by processing an energy credit check via Equifax. This credit check provides KUB with your ERAM score, but does not affect your credit rating or credit history. Based upon your ERAM score, a deposit of {1} may be included on your first bill.
<div class="legalese">
<p>Please read the following messages while we process your request, then acknowledge below.</p>
<p><b>Utility Service Agreement</b><br>Submission of this request for utility services from the Knoxville Utilities Board (KUB) binds the requestor to conform and be subject to all current KUB rules and regulations (which are subject to change).</p>
<p><b>Meter Access Message</b><br>Utility meters are the sole property of KUB. As a customer of KUB's utility service, you are responsible for providing KUB employees and/or contractors free and clear access to the meter at any time for the purposes of reading, maintaining, or inspecting the meter.</p>
<p><b>Schedule of Connection Charges</b><br>A connection charge of {0} will be included on your first bill.</p>
<p><b>Schedule of Potential Deposits</b><br>KUB verifies identity and determines deposit requirements by processing an energy credit check via Equifax. This credit check provides KUB with your ERAM score, but does not affect your credit rating or credit history. Based upon your ERAM score, a deposit of {1} may be included on your first bill.</p>
</div><div class="loading-indicator">
<div class="loading-indicator__step"></div>
<div class="loading-indicator__step"></div>
<div class="loading-indicator__step"></div>
</div><div class="logo">
<span class="logo--env">test</span>
<a class="logo__link icon-kub" href="/">
<span class="logo__text icon-kub-text"></span>
<span class="u-screen-reader-text">KUB</span>
</a>
</div>