Rating

Provide insight of others’ opinions for products, experiences and expert information

REI.com is currently using Bazaarvoice for ratings - styles documented here may not reflect the current styles provided by the tool. Reach out in #cedar-users for further guidance or questions.

Default

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

Copy to clipboard
View source in repository View in repository
View in code sandbox View in sandbox

Linked

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

Copy to clipboard
View source in repository View in repository
View in code sandbox View in sandbox

Compact

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

Copy to clipboard
View source in repository View in repository
View in code sandbox View in sandbox

Sizing

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

Copy to clipboard
View source in repository View in repository
View in code sandbox View in sandbox

Accessibility

To ensure that usage of this component complies with accessibility guidelines:

  • Use Rating component only on light backgrounds

This component has compliance with WCAG guidelines by:

  • Providing screen reader text that reads “Rated { rounded } out of 5 with { count }”
  • 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)
  • Text links displays:
    • Underline text style for mouse usage
    • Focus state for keyboard usage