Rating Stars

figma:ready

scss:ready

freemarker:ready

vue:ready

webComponent:ready

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