Atoms

Buttons

Cta Primay Button

This is the primary call to action button. Styles for this button should be used whenever you want to highlight the critical call to action on a page.

<button class="c-btn-cta-primary">Request a Quote</button>

Cta Primary Icon Button

This is a variation on the the primary call to action button. Should be used when an icon could add extra context for the call to action.

<button class="c-btn-cta-primary--with-icon">
    <i class="material-icons md-22 md-bottom with--h-padding">event_available</i>
    Schedule a free consultation
</button>

Cta Secondary Button

This is the secondary call to action button. Styles for this button should be used whenever you want to highlight an important, but not primary call to action on a page.

<button class="c-btn-cta-secondary">Text</button>

Cta Secondary Icon Button

This is a variation on the the secondary call to action button. Should be used when an icon could add extra context for the call to action.

<button class="c-btn-cta-secondary--with-icon">
  <span class="c-btn-cta-secondary__wrapper">
    <i class="material-icons md-24 md-top with--h-padding">location_searching</i>
    <span class="c-btn-cta-secondary__text">Find a showroom</span>
  </span>
</button>

Small Button

Small buttons allow users to indicate if a review was helpful.

<button class="c-btn-small">yes (2)</button>

Navigation Items

Global Navigation

The global navigation is the main, highest level site navigation that stays at the top of the site throughout navigation.

main page 
<div class="with--bg-light-gray with--padding-3">
	<span class="c-global-nav">main page</span>
</div>

Main Navigation

<nav class="c-main-nav">main page
	<div class="c-main-nav__dropdown o-flex">

		<div class="c-main-nav__panel with--text-left">
			<img class="c-image--fit-width" src="./assets/toolkit/images/offer-img.png">
		</div>

		<div class="c-main-nav__panel with--text-left">
			<ul class="list list--no-style">
				<li class="list-item">
					<a class="hdg hdg-4 txt--body-link">Windows</a>
				</li>
				<li class="list-item">
					<a class="txt txt--body-link">Double Hung</a>
				</li>
				<li class="list-item">
					<a class="txt txt--body-link">Casement</a>
				</li>
				<li class="list-item">
					<a class="txt txt--body-link">Bay / Bow</a>
				</li>
				<li class="list-item">
					<a class="txt txt--body-link">Picture / Combination</a>
				</li>
				<li class="list-item">
					<a class="txt txt--body-link">Gliding / Sliding</a>
				</li>
				<li class="list-item">
					<a class="txt txt--body-link">Specialty</a>
				</li>
				<li class="list-item">
					<a class="txt txt--body-link">Awning</a>
				</li>
			</ul>
		</div>

		<div class="c-main-nav__panel with--text-left">
			<ul class="list list--no-style">
				<li class="list-item">
					<a class="hdg hdg-4 txt--body-link">Patio Doors</a>
				</li>
				<li class="list-item">
					<a class="txt txt--body-link">Hinged French Patio Doors</a>
				</li>
				<li class="list-item">
					<a class="txt txt--body-link">Sliding French Patio Doors</a>
				</li>
				<li class="list-item">
					<a class="txt txt--body-link">Contemporary Sliding Glass Doors</a>
				</li>
			</ul>
		</div>
	</div>
</nav>

Step Icon

1 
<span class="c-step-number">1</span>

Tab With Image

Double Hung
<div class="c-tab">
	<div class="c-tab__image-container">
		<img src="./assets/toolkit/images/double-hung.png">
	</div>
	<h6 class="c-tab__title">Double Hung</h6>
</div>

Tab

Signature Service
<div class="c-tab">
	<h5 class="c-tab__title">Signature Service</h5>
</div>

Iconography

Horizontal Line Divider

<hr class="c-horizontal-line">

Large Dot

The large dot is used in radio-buttons and in the detail slider.

<div class="c-circle--lg with--bg-accent"></div>

Medium Dot

The medium dot is used to show different locations on a map and as part of a carousel navigation indicator.

<div class="c-circle--md with--bg-accent"></div>

Minus

<button class="c-action-circle c-minus"></button>

Plus

<button class="c-action-circle c-plus"></button>

Slider

400
100
1,000
<div class="c-slider__container ">
	<div id="range-text-indicator" style="margin-left: 32%;" class="c-slider__indicator-label txt txt--info">400</div>
	<div class="c-slider__input-container">
		<input id="range-input" class="c-slider__input" type="range" min="100" max="1000" value="400">
	</div>
	<div class="c-slider__labels">
		<div class="c-slider__left-label txt txt--info">100</div>
		<div class="c-slider__right-label txt txt--info">1,000</div>
	</div>
</div>

Small Dot

The small dot is used as part of the ratings system to indicate stars in a smaller view.

<div class="c-circle--sm with--bg-accent"></div>

Star

The star is used as part of the rating system to indicate satisfaction out of 5 stars.

<span class="c-star"></span>

Strong Line Divider

<div class="o-grid-fixed__col--2of12">
	<div class="c-strong-line-divider"></div>
</div>

Vertical Line Divider

<!-- NOTE: container and inline style here just to quickly set a height to make the vertical line visible.  -->
<div style="height: 100px;" class="o-grid-fixed__col--2of12">
	<div class="c-vertical-line"></div>
</div>

Inputs

Checkbox

<input id="checkbox1" type="checkbox" />
<label for="checkbox1" class="c-checkbox__label">Checkbox</label>

Radio

<div class="c-radio">
	<input type="radio" name="groupName" id="radio1" />
	<label for="radio1" class="c-radio__label"> Radio 1</label>
</div>

Search

The search is currently only used in the top global navigation.

<div class="c-search">
	<input class="c-search__input" type="text" id="textInput" placeholder="Enter search" />
</div>

Text Input

<input class="c-input__input" type="text" id="textInput" placeholder="enter your username" />

Select

<select class="c-select" name="" id="">
	<option value="0">Option 1</option>
	<option value="1">Option 2</option>
	<option value="2">Option 3</option>
	<option value="3">Option 4</option>
	<option value="4">Option 5</option>
</select>

Lists

Ordered

  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  2. Aliquam tincidunt mauris eu risus.
  3. Vestibulum auctor dapibus neque.
<ol>
	<li class="txt txt--list-item">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
	<li class="txt txt--list-item">Aliquam tincidunt mauris eu risus.</li>
	<li class="txt txt--list-item">Vestibulum auctor dapibus neque.</li>
</ol>

Unordered

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.
  • Vestibulum auctor dapibus neque.
<ul>
	<li class="txt txt--list-item">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
	<li class="txt txt--list-item">Aliquam tincidunt mauris eu risus.</li>
	<li class="txt txt--list-item">Vestibulum auctor dapibus neque.</li>
</ul>

Headers

H1

Main Header

<h1 class="hdg hdg--1">Main Header</h1>

H1 Light

Main Header on Dark Background

<!-- NOTE: container div is only here to allow the text to show. -->
<div class="with--bg-light-gray with--padding-2">
	<h1 class="hdg hdg--1 with--normal-case with--c-white">Main Header on Dark Background</h1>
</div>

H1 Accent

Accent Header

<h1 class="hdg hdg--1 with--c-green-dark">Accent Header</h1>

H2

Secondary Header

<h2 class="hdg hdg--2">Secondary Header</h2>

H2 Light

Light Secondary Header

<!-- NOTE: container div is only here to allow the text to show. -->
<div class="with--bg-light-gray with--padding-2">
	<h2 class="hdg hdg--2 with--c-white">Light Secondary Header</h2>
</div>

H3

3rd Header

<h3 class="hdg hdg--3">3rd Header</h3>

H3 Thin

3rd Header Thin

<h3 class="hdg hdg--3 with--normal-font-weight">3rd Header Thin</h3>

H4

4th Header

<h4 class="hdg hdg--4">4th Header</h4>

H5

5th Header
<h5 class="hdg hdg--5">5th Header</h5>

H6

6th Header
<h6 class="hdg hdg--6">6th Header</h6>

Support Heading

Main Support Heading

<h2 class="hdg hdg--support">Main Support Heading</h2>

Support Heading Light Gray

Mid Support Heading

<h2 class="hdg hdg--support with--c-gray-light">Mid Support Heading</h2>

Support Heading Light

Light Support Heading

<!-- NOTE: container div is only here to allow the text to show. -->
<div class="with--bg-light-gray with--padding-2">
	<h2 class="hdg hdg--support with--c-white with--text-shadow">Light Support Heading</h2>
</div>

Additional Support Heading

Additional Support Heading

<h3 class="hdg hdg--support-alt">Additional Support Heading</h2>

Other Typography

Caption

captions should be describing something 
<span class="txt txt--caption">captions should be describing something</span>

Caption Light

captions should be describing something 
<!-- NOTE: container div is only here to allow the text to show. -->
<div class="with--bg-light-gray with--padding-2">
	<span class="txt txt--caption with--c-white">captions should be describing something</span>
</div>

Info

Info about an item
<div class="txt txt--info">Info about an item</div>

Info Light

Info about an item 
<!-- NOTE: container div is only here to allow the text to show. -->
<div class="with--bg-light-gray with--padding">
	<span class="txt txt--info with--c-white">Info about an item</span>
</div>

Info Selection

Info Heading
<h5 class="txt txt--info-selection with--v-padding">Info Heading</h5>

Paragraph

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus.

<p class="body-text">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum
	nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus.</p>

Media

Hero Image

Hero Images, if used, should be used as a supporting background to an introductory header.

<div class="c-hero__container">
	<img class="c-hero__image" src="./assets/toolkit/images/HeroImg.jpg">
</div>

Vertical Image Details

The vertically aligned image details can be used anywhere a vertically aligned image or icon would be best used with a title and details below. It is currently used to describe a step in the installation process.

In-Home Consultation

Our design consultants listen to your needs and create a plan to improve energy efficiency and enhance your home's beauty.

<div class="o-layout__column o-grid-fixed__col--2of12">
	<div class="c-image__v-container">
		<img class="c-image--fit-width" src="./assets/toolkit/images/rba-customer.jpg">
	</div>
	<h5 class="txt txt--info-selection">In-Home Consultation</h5>
	<p class="txt txt--body">Our design consultants listen to your needs and create a plan to improve energy efficiency and enhance your home's beauty.</p>
</div>