Rating

# Overview

# Default (Medium)

Shows review rating with up to 5 stars highlighted. If rating is zero, star icons are displayed using the grey outline star icon.

<div>
  <cdr-rating rating="3.33333" count="100" />
  <br/>
  <cdr-rating rating="0" count="0" />
</div>

# Linked

Creates a link to the corresponding review content if on the same page.

<div>
  <p>
    <cdr-rating href="https://rei.com" rating="3.33333" count="100" />
  </p>
  <p>
    <cdr-rating href="https://rei.com" rating="0" count="0" />
  </p>
</div>

# Compact (Small)

Removes the word "Reviews" from the label for limited space layout.

<div>
  <cdr-rating rating="3.33333" count="100" compact />
  <br/>
  <cdr-rating rating="0" count="0" compact />
</div>

# Sizing

Change size for the star icon and text. Default size is medium.

<div>
  <cdr-rating size="small" rating="3.33333" count="100" compact />
  <br/>
  <cdr-rating size="medium" rating="3.33333" count="100" compact />
  <br/>
  <cdr-rating size="large" rating="3.33333" count="100" compact />
  <br/>
  <cdr-rating size="small" rating="0" count="0" compact />
  <br/>
  <cdr-rating size="medium" rating="0" count="0" compact />
  <br/>
  <cdr-rating size="large" rating="0" count="0" compact />
  <br/>
</div>

# Accessibility

Many WCAG requirements are contextual to their implementation. To ensure that usage of this component complies with accessibility guidelines you are responsible for the following:

• When linking the rating component be sure to provide a valid href value

This component has compliance with WCAG guidelines by:

• Providing screen reader text customized to each available variant
• Using text color with a Level AA contrast ratio of 4.5:1 contrast between the text color and the background (only when displayed on light backgrounds)
• Replacing icon stars with utf-8 characters when images are disabled
• Text links displays:
  • Underline text style for mouse usage
  • Focus state for keyboard usage

# Guidelines

# Use When

• Providing a tool for comparing others’ opinions

# Don't Use When

• Displaying a range of data

# Content

• Always display the number of reviews next to the star rating
• Use accompanying text label ‘Reviews’ when space allows

# Behavior

• Rating appears with grey outlined stars when no reviews are available
• Link to the corresponding review content if on the same page

# Do / Don’t

# Resources

• Icons

# API

# Props

# Usage

By default the CdrRating component renders the icons in medium size (24px) with the total number of reviews.

# Rating Values

• The count for reviews will always be visible
• Ratings are rounded to the nearest .25 because icons are represented in 25% increments
• Screen reader text is provided which reads, “Rated [ rounded ] out of 5 with [ count ] reviews”