Review stars

Taxonomic name: REVIEW-STARS

Beta v.1.0.4 - Updated 06/10/16.

Molecule

Design
Code

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

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

<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.

Joe Blogs has awarded an overall rating of 3 / 5

<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
`.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`