Full width, featured rating section used to highlight a few different positive ratings from the site.
Terry & Barbara B Altura, MN
"Our whole experience with the staff was excellent. Lisa was very helpful and knowledgeable of the products and helped make selections easier. The crew was great to work with during installation despite the freezing temps! They were very professional and cleaned everything! Thank You!"
<section class="c-section--background o-flex--column">
<div class="c-strong-line-divider"></div>
<h3 class="hdg hdg--3 with--normal-font-weight with--text-center">What our <strong>Customers are saying</strong></h3>
<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>
<h5 class="txt txt--info-selection with--v-padding with--text-center">January 26, 2017</h5>
<p class="body-text with--text-center"> Terry & Barbara B Altura, MN</p>
<p class="body-text with--text-center">"Our whole experience with the staff was excellent. Lisa was very helpful and knowledgeable of the products and helped make selections easier. The crew was great to work with during installation despite the freezing temps! They were very professional
and cleaned everything! Thank You!"</p>
<div class="c-carousel-nav-indicator-dots--light o-flex--centered">
<div class="c-circle--md active"></div>
<div class="c-circle--md"></div>
<div class="c-circle--md"></div>
<div class="c-circle--md"></div>
</div>
</section>
<div class="o-flex o-flex--wrap">
<div class="full-rating__review-container">
<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>
<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>
</div>
<div class="full-rating__detail-container">
<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>
<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>
</div>
<hr class="c-horizontal-line">
</div>