Rating Stars
Rating stars has two main usages: (1.) when filing or amending an opinion (2.) when displaying the overall score on a product sheet.
Filing or amending an opinion
Import
Import the settings and the "stars input" scss
files
@import 'settings-tools/all-settings';@import 'components/c.stars-input';
Basic usage
To use the rating stars when filing or modifying a opinion, you must apply the mc-stars-input
class to an html element (div or fieldset) used as a container for input radio tags (radio buttons). These radio buttons must be associated with label tags.
<div class="mc-stars-input"> <input type="radio" name="rating" value="0" id="no-rate" class="mc-stars-input__radio" checked aria-label="No opinion given" /> <input type="radio" name="rating" value="1" id="ratingstar1" class="mc-stars-input__radio" /> <label for="ratingstar1" class="mc-stars-input__label"> <span class="mc-stars-input__text">Very bad</span> </label> <input type="radio" name="rating" value="2" id="ratingstar2" class="mc-stars-input__radio" /> <label for="ratingstar2" class="mc-stars-input__label"> <span class="mc-stars-input__text">Bad</span> </label> <input type="radio" name="rating" value="3" id="ratingstar3" class="mc-stars-input__radio" /> <label for="ratingstar3" class="mc-stars-input__label"> <span class="mc-stars-input__text">Medium</span> </label> <input type="radio" name="rating" value="4" id="ratingstar4" class="mc-stars-input__radio" /> <label for="ratingstar4" class="mc-stars-input__label"> <span class="mc-stars-input__text">Good</span> </label> <input type="radio" name="rating" value="5" id="ratingstar5" class="mc-stars-input__radio" /> <label for="ratingstar5" class="mc-stars-input__label"> <span class="mc-stars-input__text">Excellent</span> </label></div>
Variations
Available sizes
The rating stars are available in 4 sizes.
To change the size of the stars, simply apply one of the following modifier to the main container :
- small :
mc-stars-input--s
- medium : this is the default size so you don't need to add a modifier class
- large :
mc-stars-input--l
; - extralarge :
mc-stars-input--xl
;
<div class="mc-stars-input mc-stars-input--s"> <!-- ... --></div><div class="mc-stars-input mc-stars-input--l"> <!-- ... --></div>
accessibility and semantic
Each radio button (input.mc-stars-input__radio) must be associated with a label tag (label.mc-stars-input__label)
Each label (label.mc-stars-input__label) must contain an explicit text describing the value of the radio button
The label text must be wrapped with a span.mc-stars-input__text tag
Don't forget to insert the first radio button that has a neutral value. This radio button must NOT be associated with a label tag. However, in this case the label is replaced by an aria-label attribute.
When displaying the global score
Import
Import the settings and the "stars result" scss
files
@import 'settings-tools/all-settings';@import 'components/c.stars-result';
Basic usage
To use rating stars when displaying the global score on a product sheet, you must apply the mc-stars-result
class to a div
serving as a container for a span.mc-stars-result__visual
and span.mc-stars-result__text
tags.
<div class="mc-stars-result"> <span class="mc-stars-result__visual"></span> <span class="mc-stars-result__text">Global score: 0</span></div>
Variations
Available sizes
The rating stars are available in 4 sizes.
To change the size of the stars, simply apply one of the following modifier to the main container :
- small :
mc-stars-result--s
- medium : this is the default style so you don't need to add a modifier class
- large :
mc-stars-result--l
; - extralarge :
mc-stars-result--xl
;
<div class="mc-stars-result mc-stars-result--s"> <!-- ... --></div><div class="mc-stars-result mc-stars-result--l"> <!-- ... --></div>
Available states
The overall score is displayed by "filling in" the rating stars in whole or in part.
The method for filling stars is to consider these stars as a percentage value. Therefore, considering that 5 stars filled = 100% (or a score of 5/5 = 100%), we can associate a filling level with a value in %.
The modifiers used to manage the filling of stars are based on the above principle. These modifiers are to be applied to the main container :
Note | Percentage | Modifier |
---|---|---|
0,5 | 10% | mc-stars-result--score-10 |
1 | 20% | mc-stars-result--score-20 |
1,5 | 30% | mc-stars-result--score-30 |
2 | 40% | mc-stars-result--score-40 |
2,5 | 50% | mc-stars-result--score-50 |
3 | 60% | mc-stars-result--score-60 |
3,5 | 70% | mc-stars-result--score-70 |
4 | 80% | mc-stars-result--score-80 |
4,5 | 90% | mc-stars-result--score-90 |
5 | 100% | mc-stars-result--score-100 |
With a label
You have the possibility (you are able) to display the average score or the total review count.
To do so, you just need to add a span.mc-stars-result__label
element in your HTML structure, just after the span.mc-stars-result__visual
element.
With a label link
If you want your label element to be a link, you can use an a
tag instead of a span
tag, while assigning it the classes specific to the Link component.
With an overall score
In case you need to display the global score, you can add the mc-stars-result__label--score
on the mc-stars-result__label
element
accessibility and semantic
For accessibility reasons, the global score shouldn't be expressed only in the visual form of rating stars.
To make the global score accessible, we also express it in text form, by inserting an explicit text in a span.mc-stars-result__text tag