An accessible rating plugin that allows users to vote for your products.
All components are based on CodyFrame.
This component includes variations. All variations share the same SCSS/JS code. They only differ in the HTML part.
The rating component is used to allow users to rate products and display information about the average rating value.
<select> is hidden and the stars are injected into the DOM. To make sure the component is accessible, each star represents a radio button with a unique value (from 1 to 5).
To change the star icon, replace the SVG code within the
data-animation="on" attribute is used to enable some animated effects. Remove it if you prefer a version of the plugin with no animation.
Read-only variation #
--read-only variation disables the option to interact with the icons and is used to display information about the average rating value.
The value wrapped within the
.js-rating__value is used in JS to set the number of active vs. inactive stars.
Link variation #
--link variation, the rating stars are a link (e.g., to the reviews page).