Section & Variations › Product Ratings (Travel)

Available Variations
Product Ratings (Travel) Starter Kit Codes
<!-- include sections/product-ratings  -->
<section class="product-ratings">
	<div class="container">
		<div class="section-header">
			<div class="product-rating product-ratings">
				<strong class="rating-score">4.8</strong>
				<div class="product-rating-inner">
					<strong class="rating-category">Excellent</strong>
					<ul class="rating">
						<li>
							<i class="ic ic-star active"></i>
						</li>
						<li>
							<i class="ic ic-star active"></i>
						</li>
						<li>
							<i class="ic ic-star active"></i>
						</li>
						<li>
							<i class="ic ic-star active"></i>
						</li>
						<li>
							<i class="ic ic-star half"></i>
						</li>
					</ul>
					<div class="rating-text">
						<span class="rating-description">(890 reviews)</span>
					</div>
				</div>
			</div>
			<a class="btn btn-lg btn-brand-primary" href="#form-review">Write a review</a>
			<div class="rating-summary">
				<h5>Overall rating</h5>
				<div class="rating-summary-content">
					<div class="rating-summary-bars">
						<div class="rating-summary-bar-item">
							<span>5</span>
							<div class="progress">
								<div class="progress-bar bg-brand-primary" role="progressbar" style="width: 80%;" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
							</div>
						</div>
						<div class="rating-summary-bar-item">
							<span>4</span>
							<div class="progress">
								<div class="progress-bar bg-brand-primary" role="progressbar" style="width: 30%;" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
							</div>
						</div>
						<div class="rating-summary-bar-item">
							<span>3</span>
							<div class="progress">
								<div class="progress-bar bg-brand-primary" role="progressbar" style="width: 10%;" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
							</div>
						</div>
						<div class="rating-summary-bar-item">
							<span>2</span>
							<div class="progress">
								<div class="progress-bar bg-brand-primary" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
							</div>
						</div>
						<div class="rating-summary-bar-item">
							<span>1</span>
							<div class="progress">
								<div class="progress-bar bg-brand-primary" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
							</div>
						</div>
					</div>
					<div class="rating-summary-items">
						<div class="rating-summary-item">
							<i class="ic ic-tipi"></i>
							<label>Cleanliness</label>
							<strong>5.0</strong>
						</div>
						<div class="rating-summary-item">
							<i class="ic ic-treepalm"></i>
							<label>Comfort</label>
							<strong>4.8</strong>
						</div>
						<div class="rating-summary-item">
							<i class="ic ic-map-trifold"></i>
							<label>Location</label>
							<strong>5.0</strong>
						</div>
						<div class="rating-summary-item">
							<i class="ic ic-baseball-cap"></i>
							<label>Service</label>
							<strong>4.5</strong>
						</div>
						<div class="rating-summary-item">
							<i class="ic ic-chats-circle"></i>
							<label>Communication</label>
							<strong>4.7</strong>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>