KUB

Account Header

<div class="account account--header account--logged-in">
	<div class="account__inner l-max-width">
		<header>
			<span class="account__toggle">
				<h3 class="account__heading">Dewayne</h3>
				<span class="account__toggle--arrow"></span>
			</span>
			<a href="#" class="account__link account__logout">Logout</a>
		</header>

		<div class="account__info">
			<div class="account__bill-info">
				<span class="bill-info">
					<a href="" class="account__link account__link--featured">
						Current Bill (PDF)</a>
				</span>

				<span class="bill-info">
					$ due
				</span>

				<span class="bill-info paid">
					You paid $ on
				</span>
			</div>

			<ul class="account__nav">
				<li class="nav-item">
					<a href=""></a>
				</li>
			</ul>
		</div>
	</div>
</div>

Account Login

<div class="account account--logged-out">
	<div class="l-max-width">
		<div class="account__inner">
			<form class="account__form">
				<div class="account__form-padding">
					<div class="account__input-wrapper">
						<div class="account__form-block input-field">
							<input id="unique-id" type="text" placeholder="Username or Email"> </div>

						<div class="account__form-block input-field">
							<input id="unique-id" type="text" placeholder="Password"> </div>
					</div>

					<div class="account__form-block button-field">
						<button class="button button--bright-blue">
							Login
						</button> </div>

					<div class="account__form-block helper-links">
						<a class="login__link account__link--helper" href="#">Create Login</a>
						<a class="login__link account__link--helper" href="#">Forgot Username or Password</a>
					</div>
				</div>
			</form>
		</div>
	</div>
</div>

Ad List

Downloads List

<ul class="downloads-list">
</ul>

Footer

<footer class="footer">
	<div class="l-max-width l-relative">
		<div class="footer__col">
			<h2 class="footer__heading">About Us</h2>
			<ul class="footer__list about-us">
				<li>
					<a href="#">Contact Us</a>
				</li>
				<li>
					<a href="#">Company</a>
				</li>
				<li>
					<a href="#">News Release/Media</a>
				</li>
				<li>
					<a href="#">Careers</a>
				</li>
				<li>
					<a href="#">Community</a>
				</li>
				<li>
					<a href="#">Environment</a>
				</li>
				<li>
					<a href="#">Procurement</a>
				</li>
			</ul>
		</div>
		<div class="footer__col">
			<h2 class="footer__heading">Contact Us</h2>
			<ul class="footer__list contact-us">
				<li>
					<a href="tel:18655242911">(865) 524-2911</a>
				</li>
				<li>
					<a href="#">Email Contact Form</a>
				</li>
				<li>
					<a class="footer__icon icon-facebook" href="#">
						<span class="u-screen-reader-text">
							Facebook
						</span>
					</a>
					<a class="footer__icon icon-twitter" href="#">
						<span class="u-screen-reader-text">
							Twitter
						</span>
					</a>
					<a class="footer__icon icon-youtube" href="#">
						<span class="u-screen-reader-text">
							Youtube
						</span>
					</a>
				</li>
			</ul>
		</div>
		<div class="icon-footer-logo">
			<span class="u-screen-reader-text">KUB - Knoxville Utilities Board</span>
		</div>
	</div>
</footer>

Form Contact Info

Contact Information

How I Recieve This Account's Bill

Paperless via Email

My Mailing Address: For My Bill or Other KUB Paper Mail

9720 Clearwater Drive, Knoxville, TN 000000

My Email

dewayne@gmail.com

edit save cancel

Notifications

My Phone

555-555-5555

edit save cancel

Notifications

Alternate Contacts

None

save cancel

Add an alternate contact

<h2 class="content-heading">Contact Information</h2>

<form class="profile__form">
	<div class="field">
		<label class="label">How I Recieve This Account's Bill</label>
		<p class="form__static">Paperless via Email</p>

		<div class="field-edit__controls">
			<div class="account-dropdown js-account-dropdown">
				<span class="account-dropdown__toggle js-account-dropdown__toggle">edit</span>
				<ul class="account-dropdown__list">
				</ul>
			</div>
		</div>
	</div>


	<div class="field">
		<label class="label">My Mailing Address: For My Bill or Other KUB Paper Mail</label>
		<p class="form__static">9720 Clearwater Drive, Knoxville, TN 000000</p>

		<div class="field-edit__controls">
			<a href="#" class="field-edit__control js-modal-trigger">edit</a>
		</div>
	</div>

	<div class="field profile__contact">
		<div class="field-edit">
			<label for="unique-id">
				My Email
			</label>
			<p class="form__static field-edit__value" placeholder="">dewayne@gmail.com</p>
			<div class="field-edit__controls">
				<a href="#" class="field-edit__control field-edit__control--edit js-edit-start">edit</a>
				<a href="#" class="field-edit__control field-edit__control--save js-hidden js-edit-done">save</a>
				<a href="#" class="field-edit__control field-edit__control--cancel js-hidden js-edit-done">cancel</a>
			</div>

		</div>
		<div class="profile__notifications">
			<label class="slide-toggle">
				<span class="slide-toggle__label">
					Notifications
				</span>
				<input id="unique-id" type="checkbox" checked>
				<span class="slide-toggle__selector"></span>
			</label> </div>
	</div>

	<div class="field profile__contact">
		<div class="field-edit">
			<label for="unique-id">
				My Phone
			</label>
			<p class="form__static field-edit__value" placeholder="">555-555-5555</p>
			<div class="field-edit__controls">
				<a href="#" class="field-edit__control field-edit__control--edit js-edit-start">edit</a>
				<a href="#" class="field-edit__control field-edit__control--save js-hidden js-edit-done">save</a>
				<a href="#" class="field-edit__control field-edit__control--cancel js-hidden js-edit-done">cancel</a>
			</div>

		</div>
		<div class="profile__notifications">
			<label class="slide-toggle">
				<span class="slide-toggle__label">
					Notifications
				</span>
				<input id="unique-id" type="checkbox" checked>
				<span class="slide-toggle__selector"></span>
			</label> </div>
	</div>

	<h3 class="label-heading">Alternate Contacts</h3>

	<div class="profile__none">None</div>

	<div class="profile__new">
		<div class="field-edit field-edit--add add-field">
			<p class="form__static field-edit__value form__static--new" placeholder="email or phone"></p>
			<div class="field-edit__controls">
				<a href="#" class="field-edit__control field-edit__control--save js-edit-done">save</a>
				<a href="#" class="field-edit__control field-edit__control--cancel js-edit-done">cancel</a>
			</div>


			<a href="#" class="field-edit__add profile__add js-edit-start">
				<span class="field-edit__add-icon profile__add-icon icon-add"></span> Add an alternate contact
			</a>
		</div>
	</div>
	<div class="modal-wrapper">
		<div class="modal">
			<button class="modal__close icon-close-icon">
				<span class="is-visually-hidden">Close Modal</span>
			</button>
			<div class="modal__message">
				Choose a Service Address or Your Alternate Address for your Mailing Address.
			</div>
			<div class="modal__content">
				<div>
					<div class="l-split">
						<div class="l-split__column">
							<form class="form">
								<h2 class="sp">Service Address</h2>

								<div class="field">
									<select id="state" required>
									</select></div>
								<footer class="form__footer">
									<button class="button button--bright-blue">
										Use this Service Address
									</button> </footer>
							</form>

						</div>

						<div class="l-split__column">
							<form class="form">
								<h2 class="sp">My Alternate Address</h2>

								<div class="field">
									<label for="address1">
										Address Line 1
										<span class="required">*</span>
									</label> <input id="address1" type="text" required> </div>
								<div class="field">
									<label for="address2">
										Address Line 2
									</label> <input id="address2" type="text"> </div>
								<div class="field">
									<label for="city">
										City
										<span class="required">*</span>
									</label> <input id="city" type="text" required> </div>
								<div class="field-group">
									<div class="field">
										<label for="state">
											State
											<span class="required">*</span>
										</label> <select id="state" required>
										</select></div>
									<div class="field">
										<label for="zip">
											Zip
											<span class="required">*</span>
										</label> <input id="zip" type="text" required> </div>
								</div>

								<footer class="form__footer">
									<button class="button button--bright-blue">
										Use my Alternate Address
									</button> </footer>
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</form>

Form Profile

Profile

<h2 class="content-heading">Profile</h2>

<form class="profile__form">
	<div class="field">
		<div class="field-edit">
			<label for="unique-id">
				My Name
			</label>
			<p class="form__static field-edit__value" placeholder="">Staci and Dewayne</p>
			<div class="field-edit__controls">
				<a href="#" class="field-edit__control field-edit__control--edit js-edit-start">edit</a>
				<a href="#" class="field-edit__control field-edit__control--save js-hidden js-edit-done">save</a>
				<a href="#" class="field-edit__control field-edit__control--cancel js-hidden js-edit-done">cancel</a>
			</div>

		</div>
	</div>
	<div class="field-group">
		<div class="field">
			<label class="label">My Login Username</label>
			<p class="form__static">F. DeWayne Lane</p>
			<div class="field-edit__controls">
				<a href="#" class="field-edit__control field-edit__control--link icon-text-arrow-right">login help</a>
			</div>
		</div>
		<div class="field">
			<div class="field-edit">
				<label for="unique-id">
					My Login Password
				</label>
				<p class="form__static field-edit__pwd-value" placeholder="">(hidden)</p>
				<fieldset class="field-edit__password">
					<input id="unique-id" type="password" placeholder="new password"> <input id="unique-id" type="password" placeholder="confirm password"> </fieldset>

				<div class="field-edit__controls">
					<a href="#" class="field-edit__control field-edit__control--edit js-edit-start">edit</a>
					<a href="#" class="field-edit__control field-edit__control--save js-hidden js-edit-done">save</a>
					<a href="#" class="field-edit__control field-edit__control--cancel js-hidden js-edit-done">cancel</a>
				</div>

			</div>
		</div>
	</div>
	<div class="field">
		<label class="label">My Bank Account</label>
		<p class="form__static">Knoxville University Credit Union<br />Checking account ending in 9999</p>
		<div class="field-edit__controls">
			<a href="#" class="field-edit__control field-edit__control--link icon-text-arrow-right">edit</a>
		</div>
	</div>
</form>

Form Update Address

Example contents for the Update Address modal. This implements no new styles or markup.

<div>
	<div class="l-split">
		<div class="l-split__column">
			<form class="form">
				<h2 class="sp">Service Address</h2>

				<div class="field">
					<select id="state" required>
					</select></div>
				<footer class="form__footer">
					<button class="button button--bright-blue">
						Use this Service Address
					</button> </footer>
			</form>

		</div>

		<div class="l-split__column">
			<form class="form">
				<h2 class="sp">My Alternate Address</h2>

				<div class="field">
					<label for="address1">
						Address Line 1
						<span class="required">*</span>
					</label> <input id="address1" type="text" required> </div>
				<div class="field">
					<label for="address2">
						Address Line 2
					</label> <input id="address2" type="text"> </div>
				<div class="field">
					<label for="city">
						City
						<span class="required">*</span>
					</label> <input id="city" type="text" required> </div>
				<div class="field-group">
					<div class="field">
						<label for="state">
							State
							<span class="required">*</span>
						</label> <select id="state" required>
						</select></div>
					<div class="field">
						<label for="zip">
							Zip
							<span class="required">*</span>
						</label> <input id="zip" type="text" required> </div>
				</div>

				<footer class="form__footer">
					<button class="button button--bright-blue">
						Use my Alternate Address
					</button> </footer>
			</form>
		</div>
	</div>
</div>

Global Alerts

The password you entered is invalid, please try again.

<div class="global-alerts">
	<div class="global-alert global-alert--warning js-alert">
		<div class="l-max-width">
			<div class="global-alert__content">
				The password you entered is invalid, please try again.
				<span class="alert-close icon-close js-alert__close"></span>
			</div>
		</div>
	</div>
	<div class="global-alert global-alert--info js-alert">
		<div class="l-max-width">
			<div class="global-alert__content">
				The password you entered is invalid, please try again.
				<span class="alert-close icon-close js-alert__close"></span>
			</div>
		</div>
	</div>
</div>

Header

The password you entered is invalid, please try again.

<div class="global-alerts">
	<div class="global-alert global-alert--warning js-alert">
		<div class="l-max-width">
			<div class="global-alert__content">
				The password you entered is invalid, please try again.
				<span class="alert-close icon-close js-alert__close"></span>
			</div>
		</div>
	</div>
	<div class="global-alert global-alert--info js-alert">
		<div class="l-max-width">
			<div class="global-alert__content">
				The password you entered is invalid, please try again.
				<span class="alert-close icon-close js-alert__close"></span>
			</div>
		</div>
	</div>
</div>
<header class="header">
	<div class="l-max-width row header__content">

		<div class="logo-wrapper">
			<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>
		</div>

		<div class="header-wrapper">
			<div class="header-actions ">
				<div class="header-actions__action header-actions__action--major">
					<a href="#" class="button button--blue button--border" role="button">
						Report Outage
					</a> </div>

				<div class="header-actions__action header-actions__action--minor">
					<a href="#" class="button button--orange button--border" role="button">
						Pay Bill
					</a> </div>

			</div>
			<button class="icon-search search__button--at-small"><span class="u-screen-reader-text">Search</span></button>
			<nav class="nav" role='navigation'>
				<ul class="nav__list js-priority-nav" id="main">
					<li class="nav__item ">
						<a href="" class="nav__link"></a>
					</li>
					<li class="more js-more-nav is-visible" data-width="80">
						<a href="#" class="nav__link">Menu</a>
					</li>
				</ul>
			</nav>
		</div>
	</div>

	<div class="search ">
		<div class="search-input-wrapper">
			<div class="side-by-side--wrapper--sm">
				<input id="unique-id" type="text" class="icon-search search__input side-by-side side-by-side--major--sm"> <span class="side-by-side side-by-side--minor">
					<input id="unique-id" type="submit" value="Go" class="search__button"> </span>
			</div>
		</div>
	</div>
	<div class="nav-dropdown js-priority-dropdown">
		<div class="l-max-width">
			<ul class="nav-dropdown__list"></ul>
		</div>
	</div>
</header>

Hero

<div class="hero " style="background-image: url(/images/hero.jpg)">
	<div class="hero__overlay">
		<div class="hero__max-width">
			<div class="hero__spacer"></div>
			<div class="hero__login">
				<div class="login">
					<h2 class="login__header">
						Log Into My Account
					</h2>
					<form class="login__form form">
						<div class="login__fields">
							<div class="field">
								<label for="unique-id">
									Username or Email
								</label> <input id="unique-id" type="text" placeholder="Username or Email"> </div>

							<div class="field">
								<label for="unique-id">
									Password
								</label> <input id="unique-id" type="password" placeholder="Password"> </div>
						</div>

						<div class="login__button">
							<button class="button button--bright-blue">
								Login
							</button> </div>

						<div class="login__actions">
							<a href="#" class="login__links">Create Login</a>
							<a href="#" class="login__links">Forgot Username or Password</a>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
</div>

Login

<div class="login">
	<h2 class="login__header">
		Log Into My Account
	</h2>
	<form class="login__form form">
		<div class="login__fields">
			<div class="field">
				<label for="unique-id">
					Username or Email
				</label> <input id="unique-id" type="text" placeholder="Username or Email"> </div>

			<div class="field">
				<label for="unique-id">
					Password
				</label> <input id="unique-id" type="password" placeholder="Password"> </div>
		</div>

		<div class="login__button">
			<button class="button button--bright-blue">
				Login
			</button> </div>

		<div class="login__actions">
			<a href="#" class="login__links">Create Login</a>
			<a href="#" class="login__links">Forgot Username or Password</a>
		</div>
	</form>
</div>

Multi Select

<div class="multi-select">
	<div class="dropdown">
		<h2 class="dropdown__prompt">What Service do you need?</h2>

		<select class="dropdown__select">
		</select>
	</div>
</div>

Nav

<nav class="nav" role='navigation'>
	<ul class="nav__list js-priority-nav" id="main">
		<li class="nav__item ">
			<a href="" class="nav__link"></a>
		</li>
		<li class="more js-more-nav is-visible" data-width="80">
			<a href="#" class="nav__link">Menu</a>
		</li>
	</ul>
</nav>

Nav Dropdown

<div class="nav-dropdown js-priority-dropdown">
	<div class="l-max-width">
		<ul class="nav-dropdown__list"></ul>
	</div>
</div>

Page Header

Page headers contain the page title and other meta data relating to the content of the page. The account number (.page-header__acount), hint (.hint), and summary (.page-header__summary) are all optional. To add an underline to the header, add the class .page-header--border.

<div class="page-header">
	<p class="page-header__account">Account# 8169010000</p>
	<div class="account-dropdown js-account-dropdown">
		<span class="account-dropdown__toggle js-account-dropdown__toggle">List Title</span>
		<ul class="account-dropdown__list">
		</ul>
	</div>
	<h1 class="page-header__title">
		<span>Page Title</span>
	</h1>
	<p class="page-header__summary">
		Some summary of the page
	</p>
</div>

Promo Container

<div class="promo-container">
	<div class="promo-container__item">
		<div class="promo">
			<img class="promo__image" src="/images/promo-img.jpg" alt="">

			<div class="promo__content">
				<h3 class="promo__heading">Avoid High Summer Bills with Levelized Billing</h3>
				<div class="promo__body">
					When you sign up for LBP, KUB recalculates your payment each month based on your latest 12 months of history. That rolling average means that bitter cold weather in January.


				</div>

				<div class="promo__more">
					<a href="" class="action-link icon-text-arrow-right ">
						Learn More
					</a>
				</div>
			</div>
		</div>
	</div>
	<div class="promo-container__item">
		<div class="promo">
			<img class="promo__image" src="/images/promo-img.jpg" alt="">

			<div class="promo__content">
				<h3 class="promo__heading">Make Moving Easier</h3>
				<div class="promo__body">
					When you sign up for LBP, KUB recalculates your payment each month based on your latest 12 months of history. That rolling average means that bitter cold weather in January, for example, is somewhat offset by milder weather (with lower bills) in the fall and spring.


				</div>

				<div class="promo__more">
					<a href="" class="action-link icon-text-arrow-right ">
						Learn More
					</a>
				</div>
			</div>
		</div>
	</div>
	<div class="promo-container__item promo-container__item--callout">
		<div class="promo promo--callout">
			<img class="promo__image" src="/images/promo-img.jpg" alt="">

			<div class="promo__content">
				<h3 class="promo__heading">Outage center</h3>
				<div class="promo__body">
					Let us help keep you informed when you experience an outage.

					<ul>
						<li>
							<a href="#">Report Outage</a>
						</li>
						<li>
							<a href="#">Outage Map</a>
						</li>
						<li>
							<a href="#">Check Outage Status</a>
						</li>
					</ul>

				</div>

			</div>
		</div>
	</div>
</div>

Search

<div class="search ">
	<div class="search-input-wrapper">
		<div class="side-by-side--wrapper--sm">
			<input id="unique-id" type="text" class="icon-search search__input side-by-side side-by-side--major--sm"> <span class="side-by-side side-by-side--minor">
				<input id="unique-id" type="submit" value="Go" class="search__button"> </span>
		</div>
	</div>
</div>

Search Properties

<div class="search-properties">
	<span class="icon-search"></span>
	<input id="unique-id" type="text" placeholder="Search" class="search-properties__input"> <input id="unique-id" type="submit" value="Go" class="search-properties__button"></div>

Section Listing

<nav class="section-listing">
	<ul class="section-list">
		<li class="section-list__item"><a class="section-list__heading" href="#">Call Before You Dig</a>
		</li>
		<li class="section-list__item"><a class="section-list__heading" href="#">Utility Service Planning</a>
		</li>
		<li class="section-list__item"><a class="section-list__heading" href="#">Electric Safety</a>
			<ul class="section-list__lvl2">
				<li><a href="#">Electric Safety At Home</a>
				</li>
				<li><a href="#">Electric Safety At Work</a>
				</li>
			</ul>
		</li>
		<li class="section-list__item"><a class="section-list__heading" href="#">Natural Gas Safety</a>
			<ul class="section-list__lvl2">
				<li><a href="#">Recognize &amp; Report a Gas Leak</a>
				</li>
				<li><a href="#">Natural Gas Pipeline Markers</a>
				</li>
			</ul>
		</li>
		<li class="section-list__item"><a class="section-list__heading" href="#">Water Safety</a>
			<ul class="section-list__lvl2">
				<li><a href="#">Cross Connection (Avoid Contaminating Drinking Water)</a>
				</li>
			</ul>
		</li>
		<li class="section-list__item"><a class="section-list__heading" href="#">Wastewater Safety</a>
			<ul class="section-list__lvl2">
				<li><a href="#">Keep Our Wastewater Safe</a>
					<ul class="section-list__lvl3">
						<li><a href="#">Private Lateral Program FAQs</a></li>
						<li><a href="#">City of Knoxville Licensed Plumbers</a></li>
					</ul>
				</li>
				<li><a href="#">Grease Control</a>
					<ul class="section-list__lvl3">
						<li><a href="#">Grease Control Program</a></li>
						<li><a href="#">Can the Grease Quiz</a></li>
					</ul>
				</li>
			</ul>
		</li>
		<li class="section-list__item"><a class="section-list__heading" href="#">Tree Trimming</a>
			<ul class="section-list__lvl2">
				<li><a href="#">Plant Smart</a>
				</li>
				<li><a href="#">How We Prune</a>
				</li>
				<li><a href="#">Customer Trimming Options</a>
				</li>
				<li><a href="#">Contact Tree Trimming</a>
				</li>
				<li><a href="#">Where We Are Pruning (map)</a>
				</li>
				<li><a href="#">Tree Trimming FAQs</a>
				</li>
				<li><a href="#">Tree Trimming Policy Review Panel</a>
				</li>
			</ul>
		</li>
		<li class="section-list__item"><a class="section-list__heading" href="#">Utility Construction</a>
			<ul class="section-list__lvl2">
				<li><a href="#">Special Projects</a>
				</li>
				<li><a href="#">Construction Map</a>
				</li>
			</ul>
		</li>
		<li class="section-list__item"><a class="section-list__heading" href="#">Protecting Against Scams &amp; Frauds</a>
			<ul class="section-list__lvl2">
				<li><a href="#">Residential Natural Gas Rates</a>
				</li>
				<li><a href="#">Business Natural Gas Rates</a>
				</li>
			</ul>
		</li>
		<li class="section-list__item"><a class="section-list__heading" href="#">Century II</a>
			<ul class="section-list__lvl2">
				<li><a href="#">Century II FAQ</a>
				</li>
			</ul>
		</li>
	</ul>
</nav>

Section Navigation

<aside class="l-cols__nav">
	<nav class="section-nav">
		<h1 class="section-nav__header">More in <span class="section-nav__header--heavy">"About Us"</span></h1>
		<ul class="section-nav__menu" aria-hidden="false">
			<li class="section-nav__item"><a class="section-nav__link section-nav__item-heading" href="#">Call Before You Dig</a>

			</li>
			<li class="section-nav__item"><a class="section-nav__link section-nav__item-heading" href="#">Utility Service Planning</a>

			</li>
			<li class="section-nav__item"><a class="section-nav__link section-nav__item-heading" href="#">Electric Safety</a>
				<div class="toggle__wrapper">
					<div class="toggle__marker">
						<button class="toggle__trigger toggle__open icon-plus"></button>
						<button class="toggle__trigger toggle__close icon-minus"></button>
					</div>
				</div>

				<ul class="section-nav__list section-nav__lvl2">
					<li><a class="section-nav__link" href="#">Electric Safety At Home</a>
					</li>
					<li><a class="section-nav__link" href="#">Electric Safety At Work</a>
					</li>
				</ul>
			</li>
			<li class="section-nav__item"><a class="section-nav__link section-nav__item-heading" href="#">Natural Gas Safety</a>
				<div class="toggle__wrapper">
					<div class="toggle__marker">
						<button class="toggle__trigger toggle__open icon-plus"></button>
						<button class="toggle__trigger toggle__close icon-minus"></button>
					</div>
				</div>

				<ul class="section-nav__list section-nav__lvl2">
					<li><a class="section-nav__link" href="#">Recognize &amp; Report a Gas Leak</a>
					</li>
					<li><a class="section-nav__link" href="#">Natural Gas Pipeline Markers</a>
					</li>
				</ul>
			</li>
			<li class="section-nav__item"><a class="section-nav__link section-nav__item-heading" href="#">Water Safety</a>
				<div class="toggle__wrapper">
					<div class="toggle__marker">
						<button class="toggle__trigger toggle__open icon-plus"></button>
						<button class="toggle__trigger toggle__close icon-minus"></button>
					</div>
				</div>

				<ul class="section-nav__list section-nav__lvl2">
					<li><a class="section-nav__link" href="#">Cross Connection (Avoid Contaminating Drinking Water)</a>
					</li>
				</ul>
			</li>
			<li class="section-nav__item"><a class="section-nav__link section-nav__item-heading" href="#">Wastewater Safety</a>
				<div class="toggle__wrapper">
					<div class="toggle__marker">
						<button class="toggle__trigger toggle__open icon-plus"></button>
						<button class="toggle__trigger toggle__close icon-minus"></button>
					</div>
				</div>

				<ul class="section-nav__list section-nav__lvl2">
					<li><a class="section-nav__link" href="#">Keep Our Wastewater Safe</a>
						<div class="toggle__wrapper">
							<div class="toggle__marker">
								<button class="toggle__trigger toggle__open icon-plus"></button>
								<button class="toggle__trigger toggle__close icon-minus"></button>
							</div>
						</div>
						<ul class="section-nav__list section-nav__lvl3">
							<li><a class="section-nav__link" href="#">Private Lateral Program FAQs</a></li>
							<li><a class="section-nav__link" href="#">City of Knoxville Licensed Plumbers</a></li>
							<li>
								<ul class="section-nav__list section-nav__lvl4">
									<li><a class="section-nav__link" href="#">Fourth Level Item</a></li>
									<li><a class="section-nav__link" href="#">Can the Grease Quiz</a></li>
									<li><a class="section-nav__link" href="#">Where We Are Pruning (map)</a></li>
									<li><a class="section-nav__link" href="#">Tree Trimming FAQs</a></li>
									<li><a class="section-nav__link" href="#">Tree Trimming Policy Review Panel</a></li>
									<li><a class="section-nav__link" href="#">What Not to Flush</a></li>
									<li>
										<ul class="section-nav__list section-nav__lvl5">
											<li><a class="section-nav__link" href="#">Fifth Level Item</a></li>
											<li><a class="section-nav__link" href="#">Where We Are Pruning (map)</a></li>
										</ul>
									</li>
								</ul>
							</li>
						</ul>
					</li>
					<li><a class="section-nav__link" href="#">Grease Control</a>
						<div class="toggle__wrapper">
							<div class="toggle__marker">
								<button class="toggle__trigger toggle__open icon-plus"></button>
								<button class="toggle__trigger toggle__close icon-minus"></button>
							</div>
						</div>
						<ul class="section-nav__list section-nav__lvl3">
							<li><a class="section-nav__link" href="#">Grease Control Program</a></li>
							<li><a class="section-nav__link" href="#">Can the Grease Quiz</a></li>
							<li>
								<ul class="section-nav__list section-nav__lvl4">
									<li><a class="section-nav__link" href="#">Fourth Level Item</a></li>
									<li><a class="section-nav__link" href="#">Can the Grease Quiz</a></li>
									<li><a class="section-nav__link" href="#">Where We Are Pruning (map)</a></li>
									<li><a class="section-nav__link" href="#">Tree Trimming FAQs</a></li>
									<li><a class="section-nav__link" href="#">Tree Trimming Policy Review Panel</a></li>
									<li><a class="section-nav__link" href="#">What Not to Flush</a></li>
									<li>
										<ul class="section-nav__list section-nav__lvl5">
											<li><a class="section-nav__link" href="#">Fifth Level Item</a></li>
											<li><a class="section-nav__link" href="#">Where We Are Pruning (map)</a></li>
										</ul>
									</li>
								</ul>
							</li>
						</ul>
					</li>
				</ul>
			</li>
			<li class="section-nav__item"><a class="section-nav__link section-nav__item-heading" href="#">Tree Trimming</a>
				<div class="toggle__wrapper">
					<div class="toggle__marker">
						<button class="toggle__trigger toggle__open icon-plus"></button>
						<button class="toggle__trigger toggle__close icon-minus"></button>
					</div>
				</div>

				<ul class="section-nav__list section-nav__lvl2">
					<li><a class="section-nav__link" href="#">Plant Smart</a>
					</li>
					<li><a class="section-nav__link" href="#">How We Prune</a>
					</li>
					<li><a class="section-nav__link" href="#">Customer Trimming Options</a>
					</li>
					<li><a class="section-nav__link" href="#">Contact Tree Trimming</a>
					</li>
					<li><a class="section-nav__link" href="#">Where We Are Pruning (map)</a>
					</li>
					<li><a class="section-nav__link" href="#">Tree Trimming FAQs</a>
					</li>
					<li><a class="section-nav__link" href="#">Tree Trimming Policy Review Panel</a>
					</li>
				</ul>
			</li>
			<li class="section-nav__item"><a class="section-nav__link section-nav__item-heading" href="#">Utility Construction</a>
				<div class="toggle__wrapper">
					<div class="toggle__marker">
						<button class="toggle__trigger toggle__open icon-plus"></button>
						<button class="toggle__trigger toggle__close icon-minus"></button>
					</div>
				</div>

				<ul class="section-nav__list section-nav__lvl2">
					<li><a class="section-nav__link" href="#">Special Projects</a>
					</li>
					<li><a class="section-nav__link" href="#">Construction Map</a>
					</li>
				</ul>
			</li>
			<li class="section-nav__item"><a class="section-nav__link section-nav__item-heading" href="#">Protecting Against Scams &amp; Frauds</a>
				<div class="toggle__wrapper">
					<div class="toggle__marker">
						<button class="toggle__trigger toggle__open icon-plus"></button>
						<button class="toggle__trigger toggle__close icon-minus"></button>
					</div>
				</div>

				<ul class="section-nav__list section-nav__lvl2">
					<li><a class="section-nav__link" href="#">Residential Natural Gas Rates</a>
					</li>
					<li><a class="section-nav__link" href="#">Business Natural Gas Rates</a>
					</li>
				</ul>
			</li>
			<li class="section-nav__item"><a class="section-nav__link section-nav__item-heading" href="#">Century II</a>
				<div class="toggle__wrapper">
					<div class="toggle__marker">
						<button class="toggle__trigger toggle__open icon-plus"></button>
						<button class="toggle__trigger toggle__close icon-minus"></button>
					</div>
				</div>

				<ul class="section-nav__list section-nav__lvl2">
					<li><a class="section-nav__link" href="#">Century II FAQ</a>
					</li>
				</ul>
			</li>
		</ul>
	</nav>
</aside>

Service Address

Address 1, City, State Zip

<div class="service-address__box">
	<div class="service-address__content">

		Address 1, City, State Zip
		<span class="service-address__notes"></span>
	</div>

	<div class="service-address__action service-address__action--actions is-empty">
	</div>

	<div class="service-address__action service-address__action--remove is-empty">
	</div>
</div>

Service Address One Action

4924 Kingston Pike Electric Commercial (Active), Gas-Commercial (Active)

<div class="service-address__box">
	<div class="service-address__content">
		4924 Kingston Pike
		<span class="service-address__notes">Electric Commercial (Active), Gas-Commercial (Active)</span>
	</div>

	<div class="service-address__action service-address__action--one-action">
		<button class="button button--blue">Start Service Here</button>
	</div>

</div>

Social Feeds

<div id="fb-root"></div>
<script>
	(function(d, s, id) {
		var js, fjs = d.getElementsByTagName(s)[0];
		if (d.getElementById(id)) return;
		js = d.createElement(s);
		js.id = id;
		js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5";
		fjs.parentNode.insertBefore(js, fjs);
	}(document, 'script', 'facebook-jssdk'));
</script>

<div class="social-feeds">
	<div class="l-max-width">
		<h1 class="social-feeds__heading">Recent Updates</h1>

		<div class="social-feeds__list">
		</div>
	</div>
</div>

Styled List

Purchase the appropriate permit.
- Call 215-2999 if your property is within the City of Knoxville.
- Call 558-2564 if your property is outside the City of Knoxville.
Install all internal wiring and the meter center. If required, contact the electrical inspector to conduct the rough-in inspection.
If you are installing underground service to your home, you must
- Call Tennessee One-Call at 800-351-1111 to locate underground utilities before you dig.
- Dig trenches and install all electrical conduit.
- Pull service wires from the transformer to the meter center.
- Leave all trenches uncovered and call your electrical inspector for your roughin (underground) inspection.
If your home needs to connect to overhead service lines, KUB will install your overhead service.
Contact the electrical inspector to conduct the final inspection as well as the HVAC inspection, if necesssary. The inspector will notify KUB when your home passes inspection. Within three business days, KUB will install and connect the electric meter.

<ol class="styled-list u-no-list-style">
	<li class="styled-list__item styled-list__item--you">
		Purchase the appropriate permit.
		<ul>
			<li>Call <a href="tel:+12152155555">215-2999</a> if your property is within the City of Knoxville.</li>
			<li>Call <a href="tel:+12155582564">558-2564</a> if your property is outside the City of Knoxville.</li>
		</ul>
	</li>
	<li class="styled-list__item styled-list__item--you">
		Install all internal wiring and the meter center. If required, contact the electrical inspector to conduct the rough-in inspection.
	</li>
	<li class="styled-list__item styled-list__item--you">
		If you are installing underground service to your home, you must
		<ul>
			<li>Call Tennessee One-Call at <a href="tel:+12155582564">800-351-1111</a> to locate underground utilities before you dig.</li>
			<li>Dig trenches and install all electrical conduit.</li>
			<li>Pull service wires from the transformer to the meter center.</li>
			<li>Leave all trenches uncovered and call your electrical inspector for your roughin (underground) inspection.</li>
		</ul>
	</li>
	<li class="styled-list__item styled-list__item--kub">
		If your home needs to connect to overhead service lines, KUB will install your overhead service.
	</li>
	<li class="styled-list__item styled-list__item--you">
		Contact the electrical inspector to conduct the final inspection as well as the HVAC inspection, if necesssary. The inspector will notify KUB when your home passes inspection. Within three business days, KUB will install and connect the electric meter.
	</li>
</ol>

Task Slider

<ul class="u-no-list-style slides task-slider__list">
</ul>

Wysiwyg

Your first step in establishing utility service with KUB is to call us at 558-2555 with your new service request. The first business day after the order is placed, a KUB marketing representative will contact you to discuss installation options and arrange a site visit.

You need to have the following information ready when you call KUB:

Billing name and phone number
Billing address
Service address/lot number

Heading 1	Heading 2
Sit ab reiciendis exercitationem esse tenetur fugiat!	Cell 2
Row 2	Slightly more text here
Row 3	Cell 2

A Pullquote

Consectetur deserunt dicta dicta molestias praesentium fugit quis unde sed? Totam maiores molestiae aut saepe omnis quia animi. Consequatur mollitia dignissimos incidunt tempore architecto quae. Possimus harum est obcaecati est!

Video embed

<div class="wysiwyg">
	<p>Your first step in establishing utility service with KUB is to call us at <a href="tel:+18655582555">558-2555</a> with your new service request. The first business day after the order is placed, a KUB marketing representative will contact you to discuss installation options and arrange a site visit.</p>

	<strong>You need to have the following information ready when you call KUB:</strong>

	<ul>
		<li>Billing name and phone number</li>
		<li>Billing address</li>
		<li>Service address/lot number</li>
	</ul>

	<figure>
		<img src="/images/promo-img.jpg" alt="">
		<figcaption class="f-family--sans">An img caption</figcaption>
	</figure>

	<table>
		<thead>
			<tr>
				<th>Heading 1</th>
				<th>Heading 2</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>Sit ab reiciendis exercitationem esse tenetur fugiat!</td>
				<td>Cell 2</td>
			</tr>
			<tr>
				<td>Row 2</td>
				<td>Slightly more text here</td>
			</tr>
			<tr>
				<td>Row 3</td>
				<td>Cell 2</td>
			</tr>
		</tbody>
	</table>

	<h2>A Pullquote</h2>

	<blockquote>
		Consectetur deserunt dicta dicta molestias praesentium fugit quis unde sed? Totam maiores molestiae aut saepe omnis quia animi. Consequatur mollitia dignissimos incidunt tempore architecto quae. Possimus harum est obcaecati est!
	</blockquote>

	<h2>Video embed</h2>

	<div class="video-embed__wrapper">
		<div class="video-embed u-sp">
			<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/EMw8ymMUrrE?rel=0" frameborder="0" allowfullscreen></iframe>
		</div>
	</div>
</div>

Organisms

Account Header

Dewayne

Ad List

Further Reading

Downloads List

Footer

Form Contact Info

Contact Information

Alternate Contacts

Form Profile

Profile

Form Update Address

Service Address

My Alternate Address

Global Alerts

Header

Hero

Multi Select

Nav

Page Header

Page Title

Search

Search Properties

Section Listing

Section Navigation

Service Address

Service Address One Action

Styled List

Task Slider

Wysiwyg

A Pullquote

Video embed