Schema Review Snippet

Used to display a rich snippet customer review.

sdlawrence.com

This is the schema layout for a customer review.

HTML

Using blockquote:

<div>
<div>
<blockquote>
<p>The customer's testimonial or review goes here.” </p>
<span>
<span><span class="hidden">5/5 Stars</span>

<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>– Joe Customer</em>: <em><span class="review_service">Web Design</span>
<span class="review_location"> Customer in Houston</span> -- 
<span class="review_time">August 25, 2016</span></em>
</blockquote>
</div>
</div>

CSS

Using blockquote:

/* 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;
}

Example usage: Demo