Review stars
Taxonomic name: REVIEW-STARS
Beta v.1.0.4 - Updated 06/10/16.
Molecule
Star ratings illustrate individual ratings from customers, as well as an overall rating across a product.
- Review stars are built to work on light or dark backgrounds.
- Standard rating scale is 1 – 5 stars. Do not use more than 5 stars in a group.
- Stars are usually followed by a text description, e.g. 4.5/5.
- Do not use more than 5 stars in a group.
- Not for use with aviva yellow as the accent colour background.
Examples
Review star rating
Dobromil Smith-Choromanska has been awarded an overall rating of 4.5 / 5 from 9130 customer reviews. Read the reviews for Dobromil Smith-Choromanska
Dobromil Smith-Choromanska has been awarded an overall rating of 4.5 / 5 from 9130 customer reviews. Read the reviews for Dobromil Smith-Choromanska
Notes for developers
Ensure that the correct microdata format is used for the context that the star rating is being placed within.
Notes for testers
Ensure that sufficient hidden text has been provided to make the star rating meaningful when using a screen reader.
Ensure that microdata has been correctly applied so that search engines can understand the markup fully.
Code Examples
Review star rating
Dobromil Smith-Choromanska has been awarded an overall rating of 4.5 / 5 from 9130 customer reviews. Read the reviews for Dobromil Smith-Choromanska
Dobromil Smith-Choromanska has been awarded an overall rating of 4.5 / 5 from 9130 customer reviews. Read the reviews for Dobromil Smith-Choromanska
<p>
<span class="review-stars [ Modifier ]" itemscope="" itemtype="http://schema.org/AggregateRating" itemprop="aggregateRating">
<span class="u-hidden--visually">... has been awarded an overall rating of </span>
<strong class="review-stars__rating"><span itemprop="ratingValue">...</span>/<span itemprop="bestRating">...</span></strong>
<span class="u-hidden--visually"> from <span itemprop="reviewCount">...</span> customer reviews</span>
</span>
<a href="...">Read the reviews<span class="u-hidden--visually"> for ...</span></a>
</p>
Review stars for an individual reviews
When including a star rating within a review (using the review schema), use the following markup.
<span class="review-stars [ Modifier ]" itemscope itemtype="http://schema.org/Rating" itemprop="reviewRating">
<span class="u-hidden--visually">[ Author name ] has awarded an overall rating of </span>
<strong class="review-stars__rating u-hidden--visually">
<span itemprop="ratingValue">[ Rating ]</span> / <span itemprop="bestRating">5</span>
</strong>
</span>
Classes overview
The following table gives you a quick overview of the CSS classes that can be applied.
Class | Outcome | Required | Applied to | Comments |
---|---|---|---|---|
.review-stars |
Sprite of stars | Yes | span |
|
.review-stars--zero |
Will show all stars as grey | .review-stars |
||
.review-stars--half |
Will show half the a star as yellow | .review-stars |
||
.review-stars--one-half |
Will show the a star as yellow | .review-stars |
||
.review-stars--two |
Will show two stars as yellow | .review-stars |
||
.review-stars--two-half |
Will show two and a half stars as yellow | .review-stars |
||
.review-stars--three |
Will show three stars as yellow | .review-stars |
||
.review-stars--three-half |
Will show three and a half stars as yellow | .review-stars |
||
.review-stars--four |
Will show four stars as yellow | .review-stars |
||
.review-stars--four-half |
Will show four and a half stars as yellow | .review-stars |
||
.review-stars--five |
Will show five stars as yellow | .review-stars |
||
.review-stars__rating |
Styling for the rating numbers when displayed | Yes | .review-stars span |