Reviews


This is the schema layout for a customer review.

HTML

<div itemscope itemtype="http://schema.org/Service"><meta itemprop="serviceType" content="Web Design" />
<div itemprop="review" itemscope itemtype="http://schema.org/Review">
<blockquote>
<p itemprop="reviewBody">The customer's testimonial or review goes here.” </p>
<span itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
<span itemprop="ratingValue"><span class="hidden">5/5 Stars</span>
<meta itemprop="ratingValue" content="5" />
<span class="rating_scale">
<i  class="x-icon ylw mrs mls x-icon-star" data-x-icon="&#xf005;" aria-hidden="true"></i><i  class="x-icon ylw mrs x-icon-star" data-x-icon="&#xf005;" aria-hidden="true"></i><i  class="x-icon ylw mrs x-icon-star" data-x-icon="&#xf005;" aria-hidden="true"></i><i  class="x-icon ylw mrs x-icon-star" data-x-icon="&#xf005;" aria-hidden="true"></i><i  class="x-icon ylw mbs x-icon-star" data-x-icon="&#xf005;" aria-hidden="true">
</i>
</span>
</span>
</span>
<em itemprop="author">– Joe Customer</em>: <em><span class="review_service">Web Design</span>
<span class="review_location"> Customer in Houston</span> -- <meta itemprop="datePublished" content="2016-08-25" />
<span class="review_time">August 25, 2016</span></em>
</blockquote>
</div>
</div>

CSS

/* REVIEWS BLOCKQUOTE
   ================================================== */

blockquote {
    font-size:16px; 
    padding:18px 20px 1px 20px;
    margin-left:3px; 
    margin-bottom:40px;
    background:#efefef;
    background:rgba(255, 255, 255, 0.70);
}	

blockquote:before {
    color: #333;
    font-size: 30px;
    line-height: 0.5em;
    margin-right: 0.27em;
    content: "\f10d";
    font-family: FontAwesome;
    float:left;
}

Related CSS

This review fits nicely in a 3rd column using CSS class .box-reviews

/* REVIEWS BOX
   ================================================== */

.box-reviews {
	padding:10px 18px 5px 13px !important;
        background-color: #f1f1f1;
	background-color: rgba(241, 241, 241, 1);
	border: 0px solid #fff;
	border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	font-size:15px;
}

Example usage: Demo