Review card
Taxonomic name: M-CARD--REVIEW
Extension: REVIEWS
v.4.0.0 - Updated 20/07/18. Archives
Molecule
Review cards are used to display customer ratings and reviews. The review star rating displays the overall rating for a product or service, while the review cards themselves display an individual rating and review comments from a customer. Customer reviews help users to make an informed choice about a product or service.
- Review cards are built to work on light and dark accent colours.
- When including a date line on a card, do not abbreviate the date; instead, use the full month name ie. 30 March 2016.
- Do not allow a review card to span more than eight columns at desktop or tablet viewports to ensure readability.
- When including a date line on a card, do not abbreviate the date; instead, use the full month name ie. 30 March 2016.
Examples
Philosophy as a science
Dobromil Smith-Choromanska has been awarded an overall rating of 4 / 5By James Michaels on 08 September 2015
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
Philosophy as a science
Dobromil Smith-Choromanska has been awarded an overall rating of 4 / 5By James Michaels on 08 September 2015
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
Notes for developers
Extension component
This component forms part of the 'reviews' extension and so requires additional stylesheets to be loaded in order to be used; include the following code in the header of your page to attach the relevant additional stylesheets:
<link media="all" href="[ CDN Folder Path ]/css/customer/reviews.css" rel="stylesheet" />
<!--[if lte IE 8]>
<link media="all" href="[ CDN Folder Path ]/css/customer/reviews-unmq.css" rel="stylesheet" />
<![endif]-->
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
Philosophy as a science
Dobromil Smith-Choromanska has been awarded an overall rating of 4 / 5By James Michaels on 08 September 2015
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
Philosophy as a science
Dobromil Smith-Choromanska has been awarded an overall rating of 4 / 5By James Michaels on 08 September 2015
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
<div class="l-columns__column m-card m-card--review [ Modifiers ]" itemprop="review" itemscope itemtype="http://schema.org/Review">
<div class="m-card-content">
<div class="m-card-content__inner m-card-content__inner--top">
<h2 class="a-heading a-heading--2 a-heading--semibold">...</h2>
<span class="a-review-stars [ Modifiers ]" itemscope itemtype="http://schema.org/Rating" itemprop="reviewRating">
<span class="u-hidden--visually">... has been awarded an overall rating of </span>
<strong class="a-review-stars__rating u-hidden--visually"><span itemprop="ratingValue">...</span> / <span itemprop="bestRating">...</span></strong>
</span>
<p><strong>By <span itemprop="author">...</span> on <span itemprop="datePublished">...</span></strong></p>
<p itemprop="description">...</p>
</div>
</div>
</div>
Classes overview
The following table gives you a quick overview of the CSS classes that can be applied.
Class | Outcome | Required | Applied to | Comments |
---|---|---|---|---|
.m-card |
Base style for card | Yes | .l-columns-column |
|
.m-card--review |
Modifier for review card | Yes | .m-card |
|
.m-card-content |
Base style for the text section of card | Yes | .m-card > div |
|
.m-card-content__inner |
Base style for text section of card used to ensure elements align correctly | Yes | .m-card-content |
|
.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 |