- Taxonomic name: A-REVIEW-STARS
- Extension: REVIEWS
- Added on: v3.0.0 (15/09/17)
- Updated on: v5.0.0 (05/10/20)
Review stars
Star ratings illustrate individual ratings from customers, as well as an overall rating across a product.
Design and usage
- Review stars are built to work on light or dark backgrounds.
- Standard rating scale is one to five stars; do not use more than five stars in a group.
- Stars are usually followed by a text description, eg. 4.5/5.
- Do not use more than five stars in a group.
- Not for use with Abeille Assurances yellow as the accent colour background.
Examples
Interactive example
Code example
Review star rating
<p>
<span class="a-review-stars [ Modifier ]" itemscope="" itemtype="https://schema.org/AggregateRating" itemprop="aggregateRating">
<span class="u-hidden--visually">... has been awarded an overall rating of </span>
<strong class="a-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 ), use the following markup.
<span class="a-review-stars [ Modifier ]" itemscope itemtype="https://schema.org/Rating" itemprop="reviewRating">
<span class="u-hidden--visually">[ Author name ] has awarded an overall rating of </span>
<strong class="a-review-stars__rating u-hidden--visually">
<span itemprop="ratingValue">[ Rating ]</span> / <span itemprop="bestRating">5</span>
</strong>
</span>Development and test
Notes for developers
Ensure that the correct microdata format is used for the context that the star rating is being placed within.
Extension component
This component forms part of the 'reviews' extension and so requires an additional stylesheet to be loaded in order to be used; include the following code in the header of your page to attach the relevant additional stylesheet:
<link media="all" href="./assets/[ theme type ]/[ release version ]/[ organisation ]/[ theme name ]/css/reviews.css" rel="stylesheet" />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 fully understand the markup.
Classes overview
The following table gives you a quick overview of the CSS classes that can be applied.
| Class | Outcome | Required | Applied to | Comments |
|---|---|---|---|---|
.a-review-stars |
Sprite of stars | Yes | span |
|
.a-review-stars--zero |
Will show all stars as grey | .a-review-stars |
||
.a-review-stars--half |
Will show half the a star as yellow | .a-review-stars |
||
.a-review-stars--one-half |
Will show the a star as yellow | .a-review-stars |
||
.a-review-stars--two |
Will show two stars as yellow | .a-review-stars |
||
.a-review-stars--two-half |
Will show two and a half stars as yellow | .a-review-stars |
||
.a-review-stars--three |
Will show three stars as yellow | .a-review-stars |
||
.a-review-stars--three-half |
Will show three and a half stars as yellow | .a-review-stars |
||
.a-review-stars--four |
Will show four stars as yellow | .a-review-stars |
||
.a-review-stars--four-half |
Will show four and a half stars as yellow | .a-review-stars |
||
.a-review-stars--five |
Will show five stars as yellow | .a-review-stars |
||
.a-review-stars__rating |
Styling for the rating numbers when displayed | Yes | .a-review-stars span |
Component releases
- Added on: v3.0.0 (15/09/17)
- Updated on: v5.0.0 (05/10/20)
Latest update:
- updated: The paths and browser support requirements for the extension 'reviews' have been updated as part of v5.