Review card

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

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:

<!--[if !IE | gt IE 8]><!-->
	<link media="all" href="[ CDN Folder Path ]/css/customer/reviews.css" rel="stylesheet" />
<!--<![endif]-->
<!--[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

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