Button Types

						
<button type="button" class="btn btn-default">
	<span class="btn__text">Default</span>
	<span class="btn__spinner"></span>
</button>

					

						
<button type="button" class="btn btn-primary">
	<span class="btn__text">Primary</span>
	<span class="btn__spinner"></span>
</button>

					

						
<button type="button" class="btn btn-secondary">
	<span class="btn__text">Secondary</span>
	<span class="btn__spinner"></span>
</button>

					

						
<button type="button" class="btn btn-info">
	<span class="btn__text">Info</span>
	<span class="btn__spinner"></span>
</button>

					

Button Sizes

						
// Button large
<button type="button" class="btn btn-default btn-lg">Large</button>

// Button default
<button type="button" class="btn btn-default">Default</button>

// Button small
<button type="button" class="btn btn-default btn-sm">Small</button>

// Button extra small
<button type="button" class="btn btn-default btn-xs">XS-Small</button>


					

Common Button Groups

Next
Your information is secure.
				
<div class="row">
	<div class="col-xs-3 col-sm-6">
		<div class="btn btn-secondary btn-back">
		</div>
	</div>
	<div class="col-xs-9 col-sm-6">
		<button class="btn btn-primary btn-next" type="submit">
			<span class="btn__text">Next</span>
			<span class="btn__spinner"></span>
		</button>
		<div id="secure-text" class="secure-text">Your information is secure.</div>
	</div>
</div>


			
						
<button class="card-btn">
		<span class="card-btn__icon">
			<img src="/images/windows-type-single-hung.66f79ce5.svg" alt="Single hung">
		</span>
		<span class="card-btn__name">
			Single hung
		</span>
	</button>


					

Text Input Fields

I'm an error message
I'm an error message
						
<div class="form-group parent-error">
	<label>Standard Input</label>
	<input type="text" class="form-control" placeholder="Username">
	<div class="form-error-message">
		I'm an error message
	</div>
</div>



					

Input Groups with Addons

I'm an error message
I'm an error message
						
<div class="form-group parent-error">
	<label>Input with add-on before</label>
	<div class="input-group">
		<span class="input-group-addon">
			<div class="icon icon-fill-search"></div>
		</span>
		<input type="text" class="form-control" placeholder="Search...">
	</div>
	<div class="form-error-message">
		I'm an error message
	</div>
</div>


					

I'm an error message
I'm an error message
						
<div class="form-group parent-error">
	<label>Input with add-on after</label>
	<div class="input-group">
		<input type="text" class="form-control" placeholder="Search...">
		<span class="input-group-addon">
			<div class="icon icon-fill-search"></div>
		</span>
	</div>
	<div class="form-error-message">
		I'm an error message
	</div>
</div>



					

Input With Inline Button

						
<div class="input-group input-group--inline-btn">
	<input type="text" class="form-control" placeholder="Username">
	<span class="input-group-btn">
		<button type="button" class="btn btn-primary">
			<i class="icon-arrow-right"></i>
		</button>
	</span>
</div>

<div class="input-group input-group--inline-btn">
	<input type="text" class="form-control" placeholder="Username">
	<span class="input-group-btn">
		<button type="button" class="btn btn-primary">
			GO
		</button>
	</span>
</div>


					

Input With Tooltips

I'm an error message
This is an example. This is how the tooltip message looks like.
I'm an error message
This is how the tooltip message looks like
						
<div class="form-group parent-error">
	<label>Standard Input</label>
	<div class="form-group--tooltip">
		<input type="text" class="form-control" placeholder="Username">
		<div class="form-error-message">
			I'm an error message
		</div>
		<div class="form-group__tooltip">
			<i class="form-group__tooltip-icon icon-fill-question" data-bind="tooltip-icon" data-tooltip-name="Address"></i>
			<div class="form-group__tooltip-message">
				This is an example. This is how the tooltip message looks like.
			</div>
		</div>
	</div>
</div>

					

Radio Buttons

I'm an error message
I'm an error message
				
<div class="form-group parent-error">
	<div class="form-control radio">
		<label>
			<input type="radio" name="radio-input" value="Yes" checked="checked" />
			<span></span>
			Radio Option 1
		</label>
	</div>
	<div class="form-control radio">
		<label>
			<input type="radio" name="radio-input" value="No" />
			<span></span>
			Radio Option 2
		</label>
	</div>
	<div class="form-error-message">I'm an error message</div>
</div>



			

I'm an error message
I'm an error message
				
<div class="form-group parent-error">
	<div class="radio-with-check">
		<label>
			Radio Option With Check 1
			<input type="radio" name="radio-check" value="Yes" checked />
			<div class="icon icon-fill-check"></div>
			<span></span>
		</label>
	</div>
	<div class="radio-with-check">
		<label>
			Radio Option With Check 2
			<input type="radio" name="radio-check" value="No" />
			<div class="icon icon-fill-check"></div>
			<span></span>
		</label>
	</div>
	<div class="form-error-message">I'm an error message</div>
</div>



			

I'm an error message
I'm an error message
				
<div class="form-group parent-error">
	<div class="radio-btn-group">
		<div class="radio-btn-group__btn">
			<input id="option-1" type="radio" name="radio-btn-group" value="1">
			<label for="option-1">1</label>
		</div>
		<div class="radio-btn-group__btn">
			<input id="option-2" type="radio" name="radio-btn-group" value="2">
			<label for="option-2">2</label>
		</div>
		<div class="radio-btn-group__btn">
			<input id="option-3" type="radio" name="radio-btn-group" value="3" checked="checked">
			<label for="option-3">3</label>
		</div>
		<div class="radio-btn-group__btn">
			<input id="option-4" type="radio" name="radio-btn-group" value="4">
			<label for="option-4">4</label>
		</div>
		<div class="radio-btn-group__btn">
			<input id="option-5" type="radio" name="radio-btn-group" value="5">
			<label for="option-5">5</label>
		</div>
	</div>
	<div class="form-error-message">I'm an error message</div>
</div>



			

I'm an error message
I'm an error message
				
<div class="form-group parent-error">
	<div class="image-selector__group">
		<span class="image-selector">
			<input id="image-selector-1" type="radio" name="image-selector" value="1" data-required="nonempty" checked="checked">
			<span class="image-selector__border">
				<label for="image-selector-1">
					<span>Option 1</span>
				</label>
			</span>
		</span>
		<span class="image-selector">
			<input id="image-selector-2" type="radio" name="image-selector" value="2" data-required="nonempty">
			<span class="image-selector__border">
				<label for="image-selector-2">
					<span>Option 2</span>
				</label>
			</span>
		</span>
		<span class="image-selector">
			<input id="image-selector-3" type="radio" name="image-selector" value="3" data-required="nonempty">
			<span class="image-selector__border">
				<label for="image-selector-3">
					<span>Option 3</span>
				</label>
			</span>
		</span>
	</div>
	<div class="form-error-message">I'm an error message</div>
</div>


			

Checkboxes

						
<div class="form-group">
	<div class="form-control checkbox">
		<label>
			<input value="Yes" type="checkbox" checked="checked" />
			I'm a checkbox
		</label>
	</div>
	<div class="form-control checkbox">
		<label>
			<input value="Yes" type="checkbox" checked="checked" />
			Me too!
		</label>
	</div>
	<div class="form-control checkbox">
		<label>
			<input value="Yes" type="checkbox" checked="checked" />
			So am I...
		</label>
	</div>
</div>

					

						
<div class="form-group">
	<div class="checkbox checkbox--no-border">
		<label>
			<input value="Yes" type="checkbox" checked="checked" />
			I'm a checkbox with no border
		</label>
	</div>
</div>

					

Input Groups with Addons

your progress 50%
						
// Sliding Progress Bar

<div class="progress-bar" id="progress">
	<div class="progress-bar__title">
			your progress
			<span class="progress-bar__percentage"><span>
	</div>
	<div class="progress-bar__empty"></div>
	<div class="progress-bar__fill" id="progress-bar"></div>
</div>

					

CTA Blocks

Find today's best prices for your
home improvement project.
				
<div class="fullscreen-cta"\>
	<div class="fullscreen-cta__container container row"\>
		<div class="col-sm-6 col-md-8"\>
			<div class="fullscreen-cta__title">Find today's best prices for your <br class="visible-lg"> home\>improvement
				project.</div\>
		</div\>
		<div class="col-sm-6 col-md-4"\>
			<button class="btn btn-primary">Get started now</button\>
		</div\>
	</div\>
</div\>


			

Ready to grow your business?
				
<div class="bottom-cta-block">
	<div class="bottom-cta-block__title">Ready to grow your business?</div>
	<button class="btn btn-primary">Get leads now</button>
</div>


			

Widgets

Want more
helpful tips?

Congratulations!

Be sure to take advantage of our special offers above.

				
<div class="single-input-widget">
	<div class="single-input-widget--left">
		<h3 class="single-input-widget__title">Want more<br>helpful tips?</h3>
	</div>
	<div class="single-input-widget--right">
		<form class="single-input-widget__form">
			<div class="form-group">
				<label class="form-group__label">Join 40,000+ homeowners who receive our money-saving tips and tricks in their
					inbox.</label>
				<div class="box">
					<div class="input-group input-group--inline-btn">
						<input type="text" class="form-control" placeholder="Username">
						<span class="input-group-addon">
							<span class="icon-arrow-right"></span>
						</span>
					</div>
				</div>
			</div>
		</form>
		<div class="post">
			<p class="post__title">Congratulations!</p>
			<p class="post__desc">Be sure to take advantage of our special offers above.</p>
		</div>
	</div>
</div>


			

Ready to start your project?

I'm an error message
				
<div class="mixed-input-widget">
	<div class="mixed-input-widget--left">
		<h3 class="mixed-input-widget__title"> Ready to start your project? </h3>
	</div>
	<div class="mixed-input-widget--right">
		<form class="mixed-input-widget__form" data-bind="zip-form-with-modal">
			<div class="form-group parent-error">
				<label class="form-group__label"> I'm looking for a </label>
				<div class="trades">
					<div class="form-control">
						<select class="select" name="trades" required="">
							<option value="" hidden="">Select Project Type</option>
							<option value="windows" selected="">Windows Contractor</option>
							<option value="roofing">Roofing Contractor</option>
							<option value="hvac">Heating & AC Installer</option>
							<option value="solar">Solar Installer</option>
							<option value="siding">Siding Contractor</option>
						</select>
						<span class="icon icon-caret-down"></span>
					</div>
					<div class="form-error-message">I'm an error message</div>
				</div>
			</div>
			<div class="form-group">
				<label class="form-group__label">Enter your zip code</label>
				<div class="zipbox">
					<div class="input-group input-group--inline-btn">
						<input type="text" class="form-control" placeholder="Zip">
						<span class="input-group-addon">
							<span class="icon-arrow-right"></span>
						</span>
					</div>
				</div>
			</div>
		</form>
	</div>
</div>


			

Contractor card v2

				<ul class="contractors-list-v2">
	<li class="contractors-list-v2__item">
		<div class="contractor-card-v2">
			<div class="contractor-card-v2__header">
				<a href="javascript:void(0)" class="contractor-card-v2__header-link">
					<span class="contractor-card-v2__logo">
						<img src="/images/sears-logo-160x160.8ae54299.svg" alt="Castle the Windows People">
					</span>

					<span class="contractor-card-v2__name-props">
						<span class="contractor-card-v2__name">
							Castle the Windows People
						</span>
						<span class="contractor-card-v2__props">
							43 Years Experience, Accepts Emergencies, Licensed & Insured
						</span>
					</span>
				</a>
			</div>

			<div class="contractor-card-v2__rating-views">
				<div class="contractor-card-v2__rating-views-col">
					<div class="contractor-card-v2__rating">
						<div class="contractor-card-v2__rating-stars">
							<a href="javascript:void(0);" class="star-rating">
								<span class="star-rating__label">
									4.1
								</span>
								<span class="star-rating__stars star-rating__stars--45"></span>
							</a>
						</div>
						<div class="contractor-card-v2__rating-cta">
							<a href="javascript:void(0)">
								See Reviews
							</a>
						</div>
					</div>
				</div>
				<div class="contractor-card-v2__rating-views-col">
					<div class="contractor-card-v2__views">
						<div class="contractor-card-v2__views-row">
							<div class="contractor-card-v2__views-count">
								9.9k
							</div>
							<div class="contractor-card-v2__views-copy">
								<div class="contractor-card-v2__views-title">
									Profile views
								</div>
								<div class="contractor-card-v2__views-descr">
									in the last 30 days
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="contractor-card-v2__promo">
				<a href="javascript:void()">
					<i class="icon-fill-price-tag"></i> Book by March 20, 2020 and get $500 off
				</a>
			</div>

			<div class="contractor-card-v2__instant-match">
				<div class="contractor-card-v2__instant-match-title">
					Instant match!
				</div>
				<div class="contractor-card-v2__instant-match-descr">
					This contractor will call you within 24 hours.
				</div>
			</div>
		</div>
	</li>
	<li class="contractors-list-v2__item">
		<div class="contractor-card-v2">
			<div class="contractor-card-v2__header">
				<a href="javascript:void(0)" class="contractor-card-v2__header-link">
					<span class="contractor-card-v2__logo">
						<img src="/images/sears-logo-160x160.8ae54299.svg" alt="Castle the Windows People">
					</span>

					<span class="contractor-card-v2__name-props">
						<span class="contractor-card-v2__name">
							Castle the Windows People
						</span>
						<span class="contractor-card-v2__props">
							43 Years Experience, Accepts Emergencies, Licensed & Insured
						</span>
					</span>
				</a>
			</div>

			<div class="contractor-card-v2__rating-views">
				<div class="contractor-card-v2__rating-views-col">
					<div class="contractor-card-v2__rating">
						<div class="contractor-card-v2__rating-stars">
							<a href="javascript:void(0);" class="star-rating">
								<span class="star-rating__label">
									4.1
								</span>
								<span class="star-rating__stars star-rating__stars--45"></span>
							</a>
						</div>
						<div class="contractor-card-v2__rating-cta">
							<a href="javascript:void(0)">
								See Reviews
							</a>
						</div>
					</div>
				</div>
			</div>

			<div class="contractor-card-v2__appt-details">
				<div class="contractor-card-v2__appt-details-title">
					Appointment confirmed
				</div>
				<div class="contractor-card-v2__appt-details-descr">
					Wed, February 21 @<br>8:00 AM
				</div>
			</div>
		</div>
	</li>
	<li class="contractors-list-v2__item">
		<div class="contractor-card-v2">
			<div class="contractor-card-v2__header">
				<a href="javascript:void(0)" class="contractor-card-v2__header-link">
					<span class="contractor-card-v2__logo">
						<img src="/images/sears-logo-160x160.8ae54299.svg" alt="Castle the Windows People">
					</span>

					<span class="contractor-card-v2__name-props">
						<span class="contractor-card-v2__name">
							Castle the Windows People
						</span>
						<span class="contractor-card-v2__props">
							43 Years Experience, Accepts Emergencies, Licensed & Insured
						</span>
					</span>
				</a>
			</div>

			<div class="contractor-card-v2__cta">
				<button class="btn btn-default" type="button">
					Set up consultation
				</button>
			</div>
		</div>
	</li>
</ul>

			

Contractor card

A Pane In The Glass is a local family-owned and operated professional glass, window, door repair and replacement company that focuses on you… More
Casey was amazing in his presentation. He truly connected with me and my wife… Full review
Special offer Expires 12/31/18
FREE Installation on all windows & patio doors. Plus no money down, no payments, & no… More
  • 24 Years In Business
  • Accepts Emergency Requests
Appointment requests
Wed, February 21 @ 8:00 AM
We’ll be contacting you soon to confirm your appointment.
						<div class="contractor-card">
	<div class="contractor-card__info">
		<div class="contractor-info">
			<div class="contractor-info__logo-name">
				<div class="contractor-info__logo contractor-logo-68"></div>
				<div class="contractor-info__name">
					<a href="">
						Sears Home Services
					</a>
				</div>
			</div>

			<div class="ratings-set">
				<div class="ratings-set__group">
					<a href="" class="star-rating">
						<span class="star-rating__stars star-rating__stars--45"></span>
						<span class="star-rating__label star-rating__label--verified">
							496 Verified Reviews
						</span>
					</a>
				</div>
				<div class="ratings-set__group">
					<a href="" class="ext-rating-icon ext-rating-icon--google">
						5.0
					</a>
					<a href="" class="ext-rating-icon ext-rating-icon--bbb">
						A+
					</a>
				</div>
			</div>

			<div class="contractor-more-block">
				<div class="contractor-more-block__content">
					<span class="contractor-more-block__text">
						A Pane In The Glass is a local family-owned and operated professional glass, window, door repair and replacement company that focuses on you…
					</span>
					<a href="" class="contractor-more-block__cta">More</a>
				</div>
			</div>

			<div class="contractor-more-block contractor-more-block--review">
				<div class="contractor-more-block__content">
					<span class="contractor-more-block__text">
						Casey was amazing in his presentation. He truly connected with me and my wife…
					</span>
					<a href="" class="contractor-more-block__cta">Full review</a>
				</div>
			</div>

			<a href="" class="contractor-more-block contractor-more-block--promo">
				<div class="contractor-more-block__header">
					<span class="contractor-more-block__badge">
						Special offer
					</span>
					<span class="contractor-more-block__note">
						Expires 12/31/18
					</span>
				</div>
				<div class="contractor-more-block__content">
					<span class="contractor-more-block__text">
						FREE Installation on all windows & patio doors. Plus no money down, no payments, & no…
					</span>
					<span class="contractor-more-block__cta">More</span>
				</div>
			</a>

			<ul class="contractor-icons-list">
				<li>
					<i class="icon-stroke-clock"></i>
					24 Years In Business
				</li>
				<li>
					<i class="icon-stroke-truck"></i>
					Accepts Emergency Requests
				</li>
			</ul>
		</div>
	</div>
	<div class="contractor-card__actions">
		<div class="contractor-card__action-row contractor-card__action-row--text">
			<div class="appt-details">
				<div class="appt-details__label">
					Appointment requests
				</div>
				<div class="appt-details__title">
					Wed, February 21 @ 8:00 AM
				</div>
				<div class="appt-details__text">
					We’ll be contacting you soon to confirm your appointment.
				</div>
			</div>
		</div>
		<div class="contractor-card__action-row">
			<a href="" class="contractor-card__action-btn">
				<i class="icon-stroke-star"></i>
				Rate & review
			</a>
		</div>
		<div class="contractor-card__action-row">
			<a href="" class="contractor-card__action-btn">
				<i class="icon-stroke-profile"></i>
				View profile
			</a>
		</div>
	</div>
</div>

					

Star rating

						<span class="star-rating">
	<span class="star-rating__stars star-rating__stars--35"></span>
</span>

					
(496)
						<span class="star-rating">
	<span class="star-rating__stars star-rating__stars--35"></span>
	<span class="star-rating__label">
		(496)
	</span>
</span>

					
496 Verified Reviews
						<span class="star-rating">
	<span class="star-rating__stars star-rating__stars--35"></span>
	<span class="star-rating__label star-rating__label--verified">
		496 Verified Reviews
	</span>
</span>

					
0 Verified Reviews
						<span class="star-rating">
	<span class="star-rating__stars star-rating__stars--00"></span>
	<span class="star-rating__label star-rating__label--verified">
		0 Verified Reviews
	</span>
</span>

					

Sizing

Large
496 Verified Reviews
						<span class="star-rating star-rating--lg">
	<span class="star-rating__stars star-rating__stars--35"></span>
	<span class="star-rating__label star-rating__label--verified">
		496 Verified Reviews
	</span>
</span>

					
Small
0 Verified Reviews
						<span class="star-rating star-rating--lg">
	<span class="star-rating__stars star-rating__stars--35"></span>
	<span class="star-rating__label star-rating__label--verified">
		496 Verified Reviews
	</span>
</span>

					

Third-party rating icons

Google
5.0
						<a href="" class="ext-rating-icon ext-rating-icon--google">
	5.0
</a>

					
BBB
A+
						<a href="" class="ext-rating-icon ext-rating-icon--bbb">
	A+
</a>

					

Ratings set

						<div class="ratings-set">
	<div class="ratings-set__group">
		<a href="" class="star-rating">
			<span class="star-rating__stars star-rating__stars--45">
			<span class="star-rating__label star-rating__label--verified">
				496 Verified Reviews
			</span>
		</a>
	</div>
	<div class="ratings-set__group">
		<a href="javascript:void(0);" class="ext-rating-icon ext-rating-icon--google">
			5.0
		</a>
		<a href="javascript:void(0);" class="ext-rating-icon ext-rating-icon--bbb">
			A+
		</a>
	</div>
</div>

					

Other elements

General text block
A Pane In The Glass is a local family-owned and operated professional glass, window, door repair and replacement company that focuses on you… More
						<div class="contractor-more-block">
	<div class="contractor-more-block__content">
		<span class="contractor-more-block__text">
			A Pane In The Glass is a local family-owned and operated professional glass, window, door repair and replacement company that focuses on you…
		</span>
		<a href="" class="contractor-more-block__cta">More</a>
	</div>
</div>

					
Latest review block
Casey was amazing in his presentation. He truly connected with me and my wife… Full review
						<div class="contractor-more-block contractor-more-block--review">
	<div class="contractor-more-block__content">
		<span class="contractor-more-block__text">
			Casey was amazing in his presentation. He truly connected with me and my wife…
		</span>
		<a href="" class="contractor-more-block__cta">Full review</a>
	</div>
</div>

					
						<a href="" class="contractor-more-block contractor-more-block--promo">
	<div class="contractor-more-block__header">
		<span class="contractor-more-block__badge">
			Special offer
		</span>
		<span class="contractor-more-block__note">
			Expires 12/31/18
		</span>
	</div>
	<div class="contractor-more-block__content">
		<span class="contractor-more-block__text">
			FREE Installation on all windows & patio doors. Plus no money down, no payments, & no…
		</span>
		<span class="contractor-more-block__cta">More</span>
	</div>
</a>

					
Bullets lists
  • 24 Years In Business
  • Accepts Emergency Requests
						<ul class="contractor-icons-list">
	<li>
		<i class="icon-stroke-clock"></i>
		24 Years In Business
	</li>
	<li>
		<i class="icon-stroke-truck"></i>
		Accepts Emergency Requests
	</li>
</ul>

					
Appointment requested
Appointment requests
Wed, February 21 @ 8:00 AM
We’ll be contacting you soon to confirm your appointment.
						<div class="appt-details">
	<div class="appt-details__label">
		Appointment requests
	</div>
	<div class="appt-details__title">
		Wed, February 21 @ 8:00 AM
	</div>
	<div class="appt-details__text">
		We’ll be contacting you soon to confirm your appointment.
	</div>
</div>

					
Appointment confirmed
Appointment confirmed
Wed, February 21 @ 8:00 AM
If you need to make a change to your appointment, contact your contractor directly.
						<div class="appt-details appt-details--confirmed">
	<div class="appt-details__label">
		Appointment confirmed
	</div>
	<div class="appt-details__title">
		Wed, February 21 @ 8:00 AM
	</div>
	<div class="appt-details__text">
		If you need to make a change to your appointment, contact your contractor directly.
	</div>
</div>

					

Contractor profile v2

Sanchez Metal Roofing Systems

Sanchez Metal Roofing Systems

For more than 25 years, Power Home Remodeling has been the most trusted name in replacement windows, siding, roofing, and doors. Your home is too important to be anything less than sure about, that’s why we have the strongest guarantees in the industry. Your attention can be focused on your family instead of worrying about your home.

Our contractors and employees bring a hard-working mentality and a personal touch. We don’t stop working until you’re happy. When you partner with us, we have the opportunity to get to know you, your family, and your hopes for what can be achieved with your home. We know that we can’t truly learn about your goals through technology alone, so building personal relationships is a key part of our process.

That’s why we work one-on-one, like business should be done.

  • Licensed
  • Bonded
  • Insured
  • Accepts Emergency Requests

Details

Hours of Operation

Monday
9:00AM – 5:00PM
Tuesday
9:00AM – 5:00PM
Wednesday
9:00AM – 5:00PM
Thursday
9:00AM – 5:00PM
Friday
9:00AM – 5:00PM
Saturday
9:00AM – 5:00PM
Sunday
Closed

Recent Photos View 34 more

Reviews

4.5
5.0
How was your experience?
Help other homeowners; be the first to review this contractor!
1,024 reviews
Verified review by Robert B.
September 8, 2018
Modernize Verified Job
A Pane In The Glass is a local family-owned and operated professional glass, window, door repair and replacement company. Specializing in repair or replacement of insulated glass units, single-pane glass, plate glass and safety glass for windows and doors, as well as patio door replacement, custom mirrored walls, shower enclosures, glass walls, table tops and…
1
						<div class="large-rating-icon-set">
	<div class="large-rating-icon-set__item">
		<span class="large-rating-icon">
			4.5
		</span>
	</div>
	<div class="large-rating-icon-set__item">
		<span class="large-rating-icon large-rating-icon--google">
			5.0
		</span>
	</div>
	<div class="large-rating-icon-set__item large-rating-icon-set__item--large">
		<div class="review-prompt">
			<div class="review-prompt__title">
				How was your experience?
			</div>
			<div class="review-prompt__text">
				Help other homeowners; be the first to review this contractor!
			</div>
			<div class="review-prompt__cta">
				<button type="button" class="btn btn-info btn-sm">
					Rate & review
				</button>
			</div>
		</div>
	</div>
</div>

<div class="reviews-block">
	<div class="reviews-block__header">
		<div class="reviews-block__header-left">
			1,024 reviews
		</div>

		<div class="reviews-block__header-right">
			<label for="review-block-sort-dropdown">
				Sort by:
			</label>
			<div class="reviews-block__dropdown-wrapper">
				<select class="reviews-block__dropdown" id="review-block-sort-dropdown">
					<option value="recent">
						Most Recent
					</option>
					<option value="highest">
						Highest to Lowest
					</option>
					<option value="lowest">
						Lowest to Highest
					</option>
				</select>
				<i class="icon-caret-down"></i>
			</div>
		</div>
	</div>

	<div class="review-item">
		<div class="review-item__by">
			Verified review by
			<span class="review-item__author">
				Robert B.
			</span>
		</div>
		<div class="review-item__date">
			September 8, 2018
		</div>
		<div class="review-item__rating">
			<span class="star-rating star-rating--sm">
				<span class="star-rating__stars star-rating__stars--45"></span>
				<span class="star-rating__label star-rating__label--verified">
					Modernize Verified Job
				</span>
			</span>
		</div>
		<div class="review-item__text">
			A Pane In The Glass is a local family-owned and operated professional glass, window, door repair and replacement company. Specializing in repair or replacement of insulated glass units, single-pane glass, plate glass and safety glass for windows and doors, as well as patio door replacement, custom mirrored walls, shower enclosures, glass walls, table tops and…
		</div>
		<ul class="review-item__photos">
			<li class="review-item__photo">
				<img src="" class="review-item__photo-img" alt=" " />
			</li>
		</ul>
	</div>

	<div class="reviews-block__pagination">
		<button type="button" class="reviews-block__pagination-btn reviews-block__pagination-btn--prev">
			<i class="icon-caret-left"></i>
		</button>
		<span class="reviews-block__pagination-btn reviews-block__pagination-btn--active">
			1
		</span>
		<button type="button" class="reviews-block__pagination-btn">
			2
		</button>
		<span class="reviews-block__pagination-btn reviews-block__pagination-btn--text">
			&hellip;
		</span>
		<button type="button" class="reviews-block__pagination-btn">
			29
		</button>
		<button type="button" class="reviews-block__pagination-btn reviews-block__pagination-btn--next">
			<i class="icon-caret-right"></i>
		</button>
	</div>
≶/div>
≶div class="powered-by-google">≶/div>

					

Nav

						<div class="profile-page-nav">
	<div class="container-fluid">
		<ul class="profile-page-nav__tabs">
			<li class="profile-page-nav__tab profile-page-nav__tab--active">
				<a href="" class="profile-page-nav__link">
					About
				</a>
			</li>
			<li class="profile-page-nav__tab">
				<a href="" class="profile-page-nav__link">
					Promotions
				</a>
			</li>
			<li class="profile-page-nav__tab">
				<a href="" class="profile-page-nav__link">
					Reviews
				</a>
			</li>
		</ul>
	</div>
</div>

					

Profile actions

Request a free consultation and quote from Sears Home Services:
						<div class="profile-actions">
	<div class="profile-actions__row profile-actions__row--text">
		<div class="profile-actions__headline">
			Request a free consultation and quote from Sears Home Services:
		</div>

		<button type="button" class="btn btn-primary btn-sm">
			<i class="icon-stroke-dollar-sign"></i>
			Request a Quote
		</button>
	</div>
</div>

					
						<div class="profile-actions">
	<div class="profile-actions__row profile-actions__row--text">
		<a href="" class="contractor-more-block contractor-more-block--promo">
			<div class="contractor-more-block__header">
				<span class="contractor-more-block__badge">
					Special offer
				</span>
				<span class="contractor-more-block__note">
					Expires 12/31/18
				</span>
			</div>
			<div class="contractor-more-block__content">
				<span class="contractor-more-block__text">
					FREE Installation on all windows & patio doors. Plus no money down, no payments, & no…
				</span>
				<span class="contractor-more-block__cta">More</span>
			</div>
		</a>
	</div>
	<div class="profile-actions__row">
		<button type="button" class="profile-actions__btn">
			<i class="icon-stroke-dollar-sign"></i>
			Request a Quote
		</button>
	</div>
</div>

					
Appointment requested
Wed, February 21 @ 8:00 AM
We’ll be contacting you soon to confirm your appointment.
						<div class="profile-actions">
	<div class="profile-actions__row profile-actions__row--text">
		<div class="appt-details">
			<div class="appt-details__label">
				Appointment requested
			</div>
			<div class="appt-details__title">
				Wed, February 21 @ 8:00 AM
			</div>
			<div class="appt-details__text">
				We’ll be contacting you soon to confirm your appointment.
			</div>
		</div>
	</div>
	<div class="profile-actions__row">
		<a href="tel:9724159980" class="profile-actions__btn">
			<i class="icon-stroke-phone"></i>
			(972) 415-9980
		</a>
	</div>
	<div class="profile-actions__row">
		<a href="mailto:schedule@searshomeimprovement.com" class="profile-actions__btn">
			<i class="icon-stroke-mail"></i>
			schedule@searshomeimprovement.com
		</a>
	</div>
	<div class="profile-actions__row">
		<a href="https://searshomeimprovement.com" target="_blank" rel="noopener" class="profile-actions__btn">
			<i class="icon-stroke-external-link"></i>
			Visit Website
		</a>
	</div>
	<div class="profile-actions__row">
		<button type="button" class="profile-actions__btn">
			<i class="icon-stroke-star"></i>
			Rate & Review
		</button>
	</div>
</div>

					

Profile header

Sears Home Services

  • 24 Years In Business
  • Accepts Emergency Requests
						<div class="contractor-info contractor-info--lg">
	<div class="contractor-info__logo-name">
		<div class="contractor-info__logo contractor-info__logo--desktop contractor-logo-160"></div>
		<div class="contractor-info__logo contractor-info__logo--mobile contractor-logo-68"></div>
		<h1 class="contractor-info__name">
			Sears Home Services
		</h1>
	</div>

	<div class="ratings-set">
		<div class="ratings-set__group">
			<a href="" class="star-rating">
				<span class="star-rating__stars star-rating__stars--45"></span>
				<span class="star-rating__label star-rating__label--verified">
					496 Verified Reviews
				</span>
			</a>
		</div>
		<div class="ratings-set__group">
			<a href="" class="ext-rating-icon ext-rating-icon--google">
				5.0
			</a>
			<a href="" class="ext-rating-icon ext-rating-icon--bbb">
				A+
			</a>
		</div>
	</div>

	<ul class="contractor-icons-list">
		<li>
			<i class="icon-stroke-clock"></i>
			24 Years In Business
		</li>
		<li>
			<i class="icon-stroke-truck"></i>
			Accepts Emergency Requests
		</li>
	</ul>
</div>

					

Open hours

Mon
7:00AM – 10:00PM
Tue
7:00AM – 10:00PM
Wed
7:00AM – 10:00PM
Thu
7:00AM – 10:00PM
Fri
7:00AM – 10:00PM
Sat
7:00AM – 10:00PM
Sun
7:00AM – 7:00PM
						<dl class="open-hours">
	<dt>
		Mon
	</dt>
	<dd>
		7:00AM – 10:00PM
	</dd>
	<dt>
		Tue
	</dt>
	<dd>
		7:00AM – 10:00PM
	</dd>
	<dt>
		Wed
	</dt>
	<dd>
		7:00AM – 10:00PM
	</dd>
	<dt>
		Thu
	</dt>
	<dd>
		7:00AM – 10:00PM
	</dd>
	<dt>
		Fri
	</dt>
	<dd>
		7:00AM – 10:00PM
	</dd>
	<dt>
		Sat
	</dt>
	<dd>
		7:00AM – 10:00PM
	</dd>
	<dt>
		Sun
	</dt>
	<dd>
		7:00AM – 7:00PM
	</dd>
</dl>

					

Promotion

Special Offer Expires 08/18/2019
Champion Black Friday Window Deal - 50% Off!
Windows, Solar
50% Off* Windows or 60 month payment plans
						<div class="promotion">
	<div class="promotion__header">
		<span class="promotion__badge">
			Special Offer
		</span>
		<span class="promotion__note">
			Expires 08/18/2019
		</span>
	</div>
	<div class="promotion__title">
		Champion Black Friday Window Deal - 50% Off!
	</div>
	<div class="promotion__subtitle">
		50% Off* Windows or 60 month payment plans
	</div>
	<div>
		<div class="promotion__details">
			Recently I came across an exciting video on the internet. The video was packed with information about marketing and how cooperation between the owners of businesses in the same industry can do a great deal more for one another.
		</div>
		<div class="promotion__details">
			This concept, that there is no competition in your industry, gives you a tremendous leverage in business. Results from the effort of one person are more than doubled when a second person joins the first person.
		</div>
		<div class="promotion__terms-title">
			Terms & conditions
		</div>
		<div class="promotion__terms">
			Offer not available in all areas. Offer ends 12/31/18. Discount applied by retailer representative at time of contract execution and applies to purchase of 4 or more windows and/or patio doors. Cannot be combined with other offers. **0% APR for  18 months financing available to well qualified buyers on approved credit only. Not all customers may qualify. Higher rates apply for customers with lowe credit ratings. Financing not valid with other offers or prior purchases. Renewal by Anderson retailers are independently owned and operated retailers, and are neither brokers nor lenders. Any finance terms advertised are estimates only, and all financing is provided by third-party lenders unaffiliated with Renewal by Anderson retailers, under terms and conditions arranged directly between the customer and such lender, all subject to credit requirements. Renewal by Anderson retailers do not assist with, counsel, or negotiate financing, other than providing customers an introduction to lenders interestd in financing, OR Lic# 198571. WA Lic# RENEWAP877BM. “Renewal by Anderson” and all other marks where denoted are marks of Anderson Corporation. 2018 Anderson Corporation. All rights reserved.
		</div>
		<div class="promotion__details">
			<a href="https://google.com/" rel="noopener" target="_blank">
				https://google.com/
			</a>
		</div>
	</div>
	<div class="promotion__more-row">
		<button class="btn btn-link promotion__more-btn" type="button">
			Show more
		</button>
	</div>
</div>


					

Mobile bottom fixed toolbar

Appointment requested
Wed, February 21 @ 8:00 AM
We’ll be contacting you soon to confirm your appointment.
						<div class="mobile-bottom-toolbar mobile-bottom-toolbar--active">
	<div class="mobile-bottom-toolbar__content">
		<button type="button" class="btn btn-primary btn-sm">
			<i class="icon-stroke-calendar"></i>
			Set appointment
		</button>
		<button type="button" class="btn btn-secondary btn-sm"> </button>
	</div>

	<div class="mobile-bottom-toolbar__menu">
		<div class="profile-actions">
			<div class="profile-actions__row profile-actions__row--text">
				<div class="appt-details">
					<div class="appt-details__label">
						Appointment requested
					</div>
					<div class="appt-details__title">
						Wed, February 21 @ 8:00 AM
					</div>
					<div class="appt-details__text">
						We’ll be contacting you soon to confirm your appointment.
					</div>
				</div>
			</div>
			<div class="profile-actions__row">
				<a href="tel:9724159980" class="profile-actions__btn">
					<i class="icon-stroke-phone"></i>
					(972) 415-9980
				</a>
			</div>
			<div class="profile-actions__row">
				<a href="mailto:schedule@searshomeimprovement.com" class="profile-actions__btn">
					<i class="icon-stroke-mail"></i>
					schedule@searshomeimprovement.com
				</a>
			</div>
			<div class="profile-actions__row">
				<a href="https://searshomeimprovement.com" target="_blank" rel="noopener" class="profile-actions__btn">
					<i class="icon-stroke-external-link"></i>
					Visit Website
				</a>
			</div>
			<div class="profile-actions__row">
				<button type="button" class="profile-actions__btn">
					<i class="icon-stroke-star"></i>
					Rate & Review
				</button>
			</div>
		</div>
	</div>
</div>
<div class="mobile-bottom-toolbar-overlay mobile-bottom-toolbar-overlay--active"> </div>

					
How to use these icons

There are two implementation methods when using an icon font:

						
// Element level implementation

<i class="icon-fill-calendar"></i>
<i class="icon-stroke-calendar"></i>
<i class="icon-basic-close"></i>


					
						
// Pseudo class implementation

i {
	&::before {
		@include icon-stroke;
		content: '\e900';
		font-size: 10px;
		height: 10px;
		width: 10px;
	}

	&::after {
		@include icon-fill;
		content: '\e900';
		font-size: 10px;
		height: 10px;
		width: 10px;
	}
}

					

Logos

Click to download

About Mod Style

Mod Style is a design system package for use on Modernize's S3 microsites. Its purpose is to streamline development by providing flexible, reusable, styled components.

Current examples:

  • a list of predefined color variables
  • media breakpoint mixins
  • buttons and button groups
  • input fields
  • other form elements
  • custom icons
  • font and typography styles
  • logos optimized for both desktop and mobile devices
  • progress bars
  • modals

The functionality of the Mod Style package is built on top of bootstrap-sass, which is a sass-powered version of Bootstrap 3. (bootstrap-sass will be referenced throughout this guide as simply Bootstrap to avoid confusion).

The elements found within Mod Style were developed based on the Mod Style sketch file that is maintained by our designers. The current version can be found here. This google doc also includes a changelog, a list of archived versions, and versions that are currently under construction. If this link is not accessible or has not been shared with you, please let someone on the engineering team know.

File Structure

  src
  ├── fonts
  |   └── modstyle-icons
  │     ├── modicons-basic
  │     ├── modicons-fill
  │     └── modicons-stroke
  ├── images
  │   └── modstyle-logos
  ├── styles
  │   ├── base
  │       ├── _animations.scss
  │       ├── _breakpoint-mixins.scss
  │       ├── _colors.scss
  │       ├── _fonts.scss
  │       ├── _image-mixins.scss
  │       ├── _logos.scss
  │       ├── _reset.scss
  │       └── index.scss
  │   ├── components
  │       ├── _buttons.scss
  │       ├── _inputs.scss
  │       ├── _nav.scss
  │       ├── _progress-bars.scss
  │       └── index.scss
  │   ├── icons
  │       ├── _basic.scss
  │       ├── _fill.scss
  │       ├── _stroke.scss
  │       └── index.scss
  │   └── vendor
  │       ├── _bootstrap-base.scss
  │       ├── _custom-variables.scss
  │       └── index.scss
  ├── .editorconfig
  ├── .sass-lint.ym
  ├── package-lock.json
  └── package.json
  

Installation

$ npm install --save mod-style-bootstrap

Install proper dependecies:

  • Ensure that the latest version of Mod Style is a dependency of your project
  • Ensure that the latest version of Mod Site is a dependency of your project
  • Mod Site ensures that: Bootstrap is included as a dependency in your project, and Gulp handles proper compiling of src files from the Mod Style package into your project

Create proper file structure:

  • Create a folder named 'vendor' under the 'src/styles/' folder of your project
  • Inside this 'vendor' folder, create a file called 'bootstrap-base.scss'
  • Inside this file you will import the 'bootstrap-base.scss' file from Mod Style
  • Note: If you need any additional bootstrap components, you will import them from Bootstrap into this file
  • Note: See Bootstrap section for full list of available components

Update HTML and SCSS files:

  • Add this base file into the head section of your html file using a link tag
  • Your custom css for your project should be listed as a link tag AFTER the bootstrap-base file
  • Import whatever components you will need from Mod Style into the top of your project's index.scss file
    • At the very least you will need to import the base/index.scss file
    • If you are using icons you will need to import the correct icon type scss file as well

Properly Including Link Tags in HTML File

<!DOCTYPE html>
  <html lang="en">
  <head>
    <link target="_blank" href="/styles/vendor/bootstrap-base.ce8f9ad4.css" rel="stylesheet" type="text/css"  />
    <link target="_blank" href="/styles/home.89bb1f48.css" rel="stylesheet" type="text/css"  />
  </head>
  <body>

Importing In SCSS

Importing boostrap base file from Mod Style:

@import './../../node_modules/mod-style-bootstrap/src/styles/vendor/bootstrap-base'

Importing components from Mod Style:

@import '../../../node_modules/mod-style-bootstrap/src/styles/base/index'
@import '../../../node_modules/mod-style-bootstrap/src/styles/components/buttons'
@import '../../../node_modules/mod-style-bootstrap/src/styles/components/inputs'

Importing Extra Components from Bootstrap:

@import '../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/carousel'

How Bootstrap Works for Us

For more information on the version of Bootstrap we are currently using please see
Bootstrap 3 - Using Sass.

Mod Style Bootstrap Base

The Mod Style bootstrap-base.scss file serves to pull in the minimum components necessary from Bootstrap.

The components included in this file are:
  • custom-variables
  • variables
  • mixins
  • normalize
  • scaffolding
  • component-animations
  • grid
  • forms
  • buttons
  • input-groups
  • modals
  • utilities
  • responsive-utilities
List of all other available Bootstrap components

For more about available components within Bootstrap 3 see Bootstrap 3 Components.

Another version of this list can be found inside the Bootstrap repo.

Mod Style Custom Variables

Every sass variable in Bootstrap includes the !default flag, allowing you to override the variable’s default value in your own sass files without modifying Bootstrap’s source code.

For that reason Mod Style contains a copy of Bootstrap's variable.scss file located in 'styles/vendor/custom-variables.scss'. In this file the !default flag has been removed from all variables so that it won’t be re-assigned by the default values in Bootstrap. All variables that are in use by our pages have been over written with our own custom styles.

This file is included at the top of the 'bootstrap-base.scss' file because it must come before you import Bootstrap’s Sass variables and other files for the override to work properly.

Developing and Testing Locally

To test and develop locally you will need to work within two separate repositories:

modify.modernize.com

  • Please ensure that you have cloned the modify.modernize.com repo and you have pulled the most recent changes from master.
  • Please make sure to branch from master using a branch name that corresponds with a JIRA ticket, for ease of tracking changes.
  • Symlink your local copy of mod-style with the modify project:
    • Navigate to the root directory of your local copy of mod-style and run npm link #.
    • Navigate to the root directory of the modify project and run npm link mod-style-bootstrap # in your terminal.
    • This link allows you to see changes made within Mod Style.
    • Note: when you make and save changes within Mod Style you will then have to do cmnd + s within a modify scss file for you changes to be picked up.
    • Note: that the npm package name for the mod-style repo is mod-style-bootstrap, not mod-style.
  • Run gulp serve from the root directory of the modify project.
  • Make necessary changes. If new features or elements are being added (i.e icons, form-elements etc.) please be sure to update the modify project to reflect these changes.
  • Be sure to unlink mod-style before pushing your changes by running npm unlink mod-style-bootstrap # in the root directory of the modify project.
  • Create a PR against the master branch of modify.modernize.com.
  • Once your PR is approved merge your feature branch into qa. Note: any changes made in mod-style will have to be published before deploying this repo to qa.
  • QA lives on modifyqa.modernize.com.
  • Once qa approves you can merge your changes to master.

mod-style

  • Please ensure that you have cloned the mod-style repo and you have pulled the most recent changes from master.
  • Please make sure to branch from master using a branch name that corresponds with the same JIRA ticket you used above, for ease of tracking changes.
  • Make necessary changes. If new features or elements are being added (i.e icons, form-elements etc.) please be sure to update the modify.modernize.com ui to reflect these changes.
  • Update the version number in the package.json.
  • If this update coincides with an update to the design system sketch file, please be sure to update sketchFileVersion in the package.json as well, to match the version number named on the sketch file.
  • Create a PR against master branch.
  • Once your PR is approved merge your mod-style feature branch directly to master (Note: There is no qa branch for mod-style).
  • In your terminal, from the root directory of mod-style, on the master branch run npm publish.
  • Depending on the version number you are releasing, the change will take effect on pages only once the page has been re-deployed to production by qa. If it's a major version increase, pages will have to manually opt in to the change.