Molecules

Navigation

Global Navigation

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

<div class="with--bg-light-gray with--padding-3 o-flex">
	<nav class="c-global-nav">Find a Showroom</nav>
	<nav class="c-global-nav">Request a Brochure</nav>
	<nav class="c-global-nav">Sweepstakes</nav>
</div>

Main Navigation

<!-- NOTE: Mutated the layout to remove spaces between elements.  -->
<div class="o-flex">
	<nav class="c-main-nav">Windows & Doors
		<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>
	<nav class="c-main-nav">Why Choose Us
		<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">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>
	<nav class="c-main-nav">Get Inspired
		<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">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>
</div>

Step Icons

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

Tabs

Signature Service
An Exclusive Product
Your Home. Your Style.
<div class="c-tab">
	<h6 class="c-tab__title">Signature Service</h6>
</div>
<div class="c-tab">
	<h6 class="c-tab__title">An Exclusive Product</h6>
</div>
<div class="c-tab">
	<h6 class="c-tab__title">Your Home. Your Style.</h6>
</div>

Tabs With Image

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

Pagination

previous 1 2 3 4 next 
<div class="c-pagination-nav">
	<span class="c-pagination-nav__title">previous</span>
	<span class="c-pagination-nav__title">1</span>
	<span class="c-pagination-nav__title active">2</span>
	<span class="c-pagination-nav__title">3</span>
	<span class="c-pagination-nav__title">4</span>
	<span class="c-pagination-nav__title">next</span>
</div>

Inputs

Form Inline

<form action="">
	<input class="c-input__inline--input" type="text" id="textInput" placeholder="Zip code" /><button class="c-input__inline--button">Go</button>
</form>

Radio Group

<div class="o-flex--column o-flex--wrap">
	<div class="c-radio">
		<input type="radio" name="groupName" id="radio1" />
		<label for="radio1" class="c-radio__label"> Radio 1</label>
	</div>
	<div class="c-radio">
		<input type="radio" name="groupName" id="radio2" />
		<label for="radio2" class="c-radio__label"> Radio 2</label>
	</div>
	<div class="c-radio">
		<input type="radio" name="groupName" id="radio3" />
		<label for="radio3" class="c-radio__label"> Radio 3</label>
	</div>
	<div class="c-radio">
		<input type="radio" name="groupName" id="radio1" />
		<label for="radio1" class="c-radio__label"> Radio 4</label>
	</div>
</div>

Typography

Caption Label

Your zipcode: 55483 
<div>
	<span class="txt txt--caption">Your zipcode: <strong>55483</strong></span>
	<div>

Headings

Hero Image Header

Welcome to Renewal by Anderson

The replacement window division of Anderson Windows

<div class="c-hero__container">
	<img class="c-hero__image" src="./assets/toolkit/images/HeroImg.jpg">
	<div class="c-hero__overlay o-flex--column">
		<h1 class="hdg hdg--1 with--normal-case with--c-white with--text-shadow with--text-center">Welcome to Renewal by Anderson</h1>
		<h3 class="hdg hdg--3 with--c-white with--text-shadow with--text-center">The replacement window division of Anderson Windows</h3>
		<button class="c-btn-cta-primary  o-flex--centered">Schedule a free consultation</button>
	</div>
</div>

Accent Header

You're just out of reach

Don't worry, you still have options

<h1 class="hdg hdg--1 with--c-green-dark with--text-center">You're just out of reach</h1>
<h2 class="hdg hdg--support with--c-gray-light with--text-center">Don't worry, you still have options</h2>

Info Header

Stay Informed

Sign up for our newsletter where we announce new locations, special deals, and promotions personalized to your needs.

<h3 class="hdg hdg--3 with--text-center">Stay Informed</h3>
<p class="txt txt--body with--text-center">Sign up for our newsletter where we announce new locations, special deals, and promotions personalized to your needs.</p>

Ratings

Dots

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

<div class="o-flex o-flex--space-btw o-wrapper__rating-dots">
	<div class="c-circle--sm"></div>
	<div class="c-circle--sm"></div>
	<div class="c-circle--sm"></div>
	<div class="c-circle--sm with--bg-disabled"></div>
	<div class="c-circle--sm with--bg-disabled"></div>
</div>

Stars

The stars are used to indicate satisfaction out of 5 stars.

<div class="rating-stars__stars o-flex--centered">
	<div class="o-flex o-flex--space-btw with--v-padding">
		<span class="c-star"></span>
		<span class="c-star"></span>
		<span class="c-star"></span>
		<span class="c-star"></span>
		<span class="c-star"></span>
	</div>
</div>

Rating Star

5

What does this mean? 
<div class="rating-stars__container">
	<div class="rating-stars__rating">
		<h1 class="hdg hdg--1 rating-stars__rating-num">5</h1>
		<div class="rating-stars__stars o-flex--centered">
			<div class="o-flex o-flex--space-btw with--v-padding">
				<span class="c-star"></span>
				<span class="c-star"></span>
				<span class="c-star"></span>
				<span class="c-star"></span>
				<span class="c-star"></span>
			</div>
		</div> <a class="txt txt--link rating-stars__define-rating-link">What does this mean?</a>
	</div>
</div>

Review

Bobby G.

March 21, 2017

We were very pleased and impressed with the whole process from our first visit with the sales rep to final installation . Very happy with the windows.... so worth the expense.

Year house was built

1960 -- 1965

Gender, Age

Female, 45
<div class="c-review__container">
	<h3 class="hdg hdg--3 c-review__name">Bobby G.</h3>
	<div class="txt txt--info c-review__date"> March 21, 2017</div>

	<p class="txt txt--body c-review__review-body">
		We were very pleased and impressed with the whole process from our first visit with the sales rep to final installation . Very happy with the windows.... so worth the expense.
	</p>
	<div class="o-flex--column c-review__detail-item">
		<h4 class="hdg hdg--4">Year house was built</h4>
		<div class="txt txt--info">1960 -- 1965</div>
	</div>
	<div class="o-flex--column c-review__detail-item">
		<h4 class="hdg hdg--4">Gender, Age</h4>
		<div class="txt txt--info">Female, 45</div>
	</div>
</div>

Rating Details

Customer Rating

(out of 5)
Likely to Recommend
Window Consultant
Installation
Product 
<div class="rating-detail__container">
	<div>
		<h4 class="hdg hdg--4 with--display-inline">Customer Rating</h4>
		<span class="txt txt--caption">(out of 5)</span>
	</div>
	<div class="o-flex o-flex--space-btw">
		<span class="txt txt--caption with--text-right with--b-margin-0">Likely to Recommend</span>
		<div class="o-flex o-flex--space-btw o-wrapper__rating-dots">
			<div class="c-circle--sm"></div>
			<div class="c-circle--sm"></div>
			<div class="c-circle--sm"></div>
			<div class="c-circle--sm"></div>
			<div class="c-circle--sm"></div>
		</div>
	</div>
	<div class="o-flex o-flex--space-btw">
		<span class="txt txt--caption with--text-right with--b-margin-0">Window Consultant</span>
		<div class="o-flex o-flex--space-btw o-wrapper__rating-dots">
			<div class="c-circle--sm"></div>
			<div class="c-circle--sm"></div>
			<div class="c-circle--sm"></div>
			<div class="c-circle--sm"></div>
			<div class="c-circle--sm"></div>
		</div>
	</div>
	<div class="o-flex o-flex--space-btw">
		<span class="txt txt--caption with--text-right with--b-margin-0">Installation</span>
		<div class="o-flex o-flex--space-btw o-wrapper__rating-dots">
			<div class="c-circle--sm"></div>
			<div class="c-circle--sm"></div>
			<div class="c-circle--sm"></div>
			<div class="c-circle--sm"></div>
			<div class="c-circle--sm"></div>
		</div>
	</div>
	<div class="o-flex o-flex--space-btw">
		<span class="txt txt--caption with--text-right with--b-margin-0">Product</span>
		<div class="o-flex o-flex--space-btw o-wrapper__rating-dots">
			<div class="c-circle--sm"></div>
			<div class="c-circle--sm"></div>
			<div class="c-circle--sm"></div>
			<div class="c-circle--sm"></div>
			<div class="c-circle--sm"></div>
		</div>
	</div>
</div>

Product Detail

Product Installed

Window Type
Double Hung
Interior Color
Oak
Grilles
Prairie
<div class="rating-detail__container">
	<h4 class="hdg hdg--4">Product Installed</h4>
	<div class="o-flex">
		<div class="c-image__h-container">
			<img class="c-image--fit-width" src="./assets/toolkit/images/double-hung.png">
		</div>
		<div>
			<h5 class="hdg hdg--5 with--b-margin-0">Window Type</h5>
			<div class="txt txt--body-link">Double Hung</div>
			<h5 class="hdg hdg--5 with--b-margin-0">Interior Color</h5>
			<div class="txt txt--body">Oak</div>
			<h5 class="hdg hdg--5 with--b-margin-0">Grilles</h5>
			<div class="txt txt--body">Prairie</div>
		</div>
	</div>
</div>

Rated Review

Bobby G.

Rochester, MN

We were very pleased and impressed with the whole process from our first visit with the sales rep to final installation . Very happy with the windows.... so worth the expense.

March 21, 2017
<div class="o-flex o-flex--space-btw">
	<div class="o-flex with--b-margin-3">
		<h3 class="hdg hdg--3 c-review__name with--b-margin-0">Bobby G.</h3>
		<div class="o-flex o-flex--space-btw rating-stars__stars--sm">
			<span class="c-star--sm"></span>
			<span class="c-star--sm"></span>
			<span class="c-star--sm"></span>
			<span class="c-star--sm"></span>
			<span class="c-star--sm"></span>
		</div>
	</div>
	<div class="txt txt--info c-review__date">Rochester, MN</div>
</div>

<p class="txt txt--body">
	We were very pleased and impressed with the whole process from our first visit with the sales rep to final installation . Very happy with the windows.... so worth the expense.
</p>
<div class="txt txt--info c-review__date"> March 21, 2017</div>

Sections

Section

Section used to separate out content in a vertical scrolling page.

Content would appear Below

<section class="c-section">
	<div class="c-strong-line-divider"></div>
	<h3 class="hdg hdg--3 with--normal-font-weight with--text-center">Content would appear <strong>Below</strong></h3>
</section>

Section With Background

Full width, featured section used to highlight steps, processes or content.

Content would appear Below

<section class="c-section--background">
	<div class="c-strong-line-divider"></div>
	<h3 class="hdg hdg--3 with--normal-font-weight with--text-center">Content would appear <strong>Below</strong></h3>
</section>

Cards

Card With Header

Heading Text

Some Options

<div class="c-card o-grid-fixed__col--2of12">

	<div class="c-card__heading">Heading Text</div>

	<div class="c-card__body ">
		<h4 class="hdg hdg--4">Some Options</h4>
		<div class="o-flex--column o-flex--wrap">
			<div class="c-radio">
				<input type="radio" name="groupName" id="radio1" />
				<label for="radio1" class="c-radio__label"> Radio 1</label>
			</div>
			<div class="c-radio">
				<input type="radio" name="groupName" id="radio2" />
				<label for="radio2" class="c-radio__label"> Radio 2</label>
			</div>
			<div class="c-radio">
				<input type="radio" name="groupName" id="radio3" />
				<label for="radio3" class="c-radio__label"> Radio 3</label>
			</div>
			<div class="c-radio">
				<input type="radio" name="groupName" id="radio1" />
				<label for="radio1" class="c-radio__label"> Radio 4</label>
			</div>
		</div>
	</div>

</div>

Offer Card

The offer card drives conversions with a specific promotions.

Buy one, get the 2nd 40% off!

When the 2nd window is of equal or lesser value

Offer ends July 31st

<div class="o-grid-fixed__col--4of12">
	<form class="c-card__offer o-flex--column o-flex--space-btw" action="">
		<div class="o-flex--grow o-flex--column">
			<h2 class="hdg hdg--2 with--text-center">Buy one, get the 2nd 40% off!</h2>
			<h2 class="hdg hdg--support-alt with--c-gray-light with--text-center">When the 2nd window is of equal or lesser value</h2>
		</div>
		<div class="o-flex--column o-flex--align-end">
			<h3 class="hdg hdg--3 with--text-center">Offer ends July 31st</h3>
			<button class="c-btn-cta-primary o-flex--centered">See Offer Details</button>
		</div>
	</form>
</div>

Form Offer Card

The offer form card is used as an inline, direct lead generating contact form.

Stay In Touch

Meet the team closest to your location. We’re always happy to talk.

Your zipcode: 55483
Change my location
<div class="c-card__offer--dark o-grid-fixed__col--4of12">
	<form class="o-flex--column o-flex--centered" action="">
		<h2 class="hdg hdg--2 with--c-white with--text-center">Stay In Touch</h2>
		<h2 class="hdg hdg--support-alt with--c-green-light with--text-center">Meet the team closest to your location. We’re always happy to talk.</h2>
		<div class="c-input__container">
			<input class="c-input__input" type="text" id="textInput" placeholder="First name" />
		</div>
		<div class="c-input__container">
			<input class="c-input__input" type="text" id="textInput" placeholder="Last name" />
		</div>
		<div class="c-input__container">
			<input class="c-input__input" type="text" id="textInput" placeholder="Email address" />
		</div>
		<div class="o-flex o-flex--space-btw">
			<div class="with--text-left txt txt--caption with--c-white">Your zipcode: <strong>55483</strong></div>
			<div class="txt txt--info with--c-white with--text-right">Change my location</div>
		</div>
		<button class="c-btn-cta-primary o-grid__col--6of12 o-flex--centered">Submit</button>
	</form>
</div>