- Taxonomic name: M-CARD--REVIEW
- Extension: REVIEWS
- Added on: v3.0.0 (15/09/17)
- Updated on: v5.5.0 (23/03/21)
Review cards
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.
Design and usage
- 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.
- Review cards hava a fixed layout: Heading, stars, byline (with optional date) and the actual review only.
- 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.
Examples
Interactive example
Code example
<li class="m-card m-card--review [ Modifiers ]" itemprop="review" itemscope itemtype="https://schema.org/Review">
<div class="m-card-content">
<div class="m-card-content__inner">
<h2 class="a-heading a-heading--2 a-heading--semibold">...</h2>
<span class="a-review-stars [ Modifiers ]" itemscope itemtype="https://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>
</li>Optional white card with border on white background
See tertiary cards for more information.
Development and test
Notes for developers
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 understand the markup fully.
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 |
|
.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.5.0 (23/03/21)
Latest update:
- updated: Alternative markup has been created to allow cards to be better linked semantically and to prevent failure of WCAG 1.3.1. These changes are currently optional, but although the old code will continue to work for Framework v5, it has been deprecated and will be removed from v6.