Rating
Rating, Stars, Reviews, CdrRating
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-user-support 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 in repository
View in sandbox
Linked
Creates a link to the corresponding review content if on the same page.
Copy to clipboard
View in repository
View in sandbox
Compact
Removes the word "Reviews" from the label for limited space layout.
Copy to clipboard
View in repository
View in sandbox
Sizing
Change size for the star icon and text. Default size is medium.
Copy to clipboard
View in repository
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
