Mozaic

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>

Viewport: px

<div class="example">
  <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>
</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>

Viewport: px

<div class="example">
  <div class="example__item">
    <div class="mc-stars-input mc-stars-input--s">
      <input type="radio" name="rating0" value="0" id="no-rate0" class="mc-stars-input__radio" checked
        aria-label="No opinion given" />

      <input type="radio" name="rating0" 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="rating0" 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="rating0" 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="rating0" 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="rating0" 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>
  </div>

  <div class="example__item">
    <div class="mc-stars-input">
      <input type="radio" name="rating1" value="0" id="no-rate1" class="mc-stars-input__radio" checked
        aria-label="No opinion given" />

      <input type="radio" name="rating1" value="1" id="ratingstar10" class="mc-stars-input__radio" />
      <label for="ratingstar10" class="mc-stars-input__label">
        <span class="mc-stars-input__text">Very bad</span>
      </label>

      <input type="radio" name="rating1" value="2" id="ratingstar20" class="mc-stars-input__radio" />
      <label for="ratingstar20" class="mc-stars-input__label">
        <span class="mc-stars-input__text">Bad</span>
      </label>

      <input type="radio" name="rating1" value="3" id="ratingstar30" class="mc-stars-input__radio" />
      <label for="ratingstar30" class="mc-stars-input__label">
        <span class="mc-stars-input__text">Medium</span>
      </label>

      <input type="radio" name="rating1" value="4" id="ratingstar40" class="mc-stars-input__radio" />
      <label for="ratingstar40" class="mc-stars-input__label">
        <span class="mc-stars-input__text">Good</span>
      </label>

      <input type="radio" name="rating1" value="5" id="ratingstar50" class="mc-stars-input__radio" />
      <label for="ratingstar50" class="mc-stars-input__label">
        <span class="mc-stars-input__text">Excellent</span>
      </label>
    </div>
  </div>

  <div class="example__item">
    <div class="mc-stars-input mc-stars-input--l">
      <input type="radio" name="rating2" value="0" id="no-rate2" class="mc-stars-input__radio" checked
        aria-label="No opinion given" />

      <input type="radio" name="rating2" value="1" id="ratingstar11" class="mc-stars-input__radio" />
      <label for="ratingstar11" class="mc-stars-input__label">
        <span class="mc-stars-input__text">Very bad</span>
      </label>

      <input type="radio" name="rating2" value="2" id="ratingstar21" class="mc-stars-input__radio" />
      <label for="ratingstar21" class="mc-stars-input__label">
        <span class="mc-stars-input__text">Bad</span>
      </label>

      <input type="radio" name="rating2" value="3" id="ratingstar31" class="mc-stars-input__radio" />
      <label for="ratingstar31" class="mc-stars-input__label">
        <span class="mc-stars-input__text">Medium</span>
      </label>

      <input type="radio" name="rating2" value="4" id="ratingstar41" class="mc-stars-input__radio" />
      <label for="ratingstar41" class="mc-stars-input__label">
        <span class="mc-stars-input__text">Good</span>
      </label>

      <input type="radio" name="rating2" value="5" id="ratingstar51" class="mc-stars-input__radio" />
      <label for="ratingstar51" class="mc-stars-input__label">
        <span class="mc-stars-input__text">Excellent</span>
      </label>
    </div>
  </div>

  <div class="example__item">
    <div class="mc-stars-input mc-stars-input--xl">
      <input type="radio" name="rating3" value="0" id="no-rate3" class="mc-stars-input__radio" checked
        aria-label="No opinion given" />

      <input type="radio" name="rating3" value="1" id="ratingstar12" class="mc-stars-input__radio" />
      <label for="ratingstar12" class="mc-stars-input__label">
        <span class="mc-stars-input__text">Very bad</span>
      </label>

      <input type="radio" name="rating3" value="2" id="ratingstar22" class="mc-stars-input__radio" />
      <label for="ratingstar22" class="mc-stars-input__label">
        <span class="mc-stars-input__text">Bad</span>
      </label>

      <input type="radio" name="rating3" value="3" id="ratingstar32" class="mc-stars-input__radio" />
      <label for="ratingstar32" class="mc-stars-input__label">
        <span class="mc-stars-input__text">Medium</span>
      </label>

      <input type="radio" name="rating3" value="4" id="ratingstar42" class="mc-stars-input__radio" />
      <label for="ratingstar42" class="mc-stars-input__label">
        <span class="mc-stars-input__text">Good</span>
      </label>

      <input type="radio" name="rating3" value="5" id="ratingstar52" class="mc-stars-input__radio" />
      <label for="ratingstar52" class="mc-stars-input__label">
        <span class="mc-stars-input__text">Excellent</span>
      </label>
    </div>
  </div>
</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>

Viewport: px

<div class="example">
  <div class="mc-stars-result mc-stars-result--score-30">
    <span class="mc-stars-result__visual"></span>
    <span class="mc-stars-result__text">Global score: 1,5/5</span>
  </div>
</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`

Viewport: px

<div class="example">
  <div class="example__item">
    <div class="mc-stars-result mc-stars-result--s mc-stars-result--score-20">
      <span class="mc-stars-result__visual"></span>
      <span class="mc-stars-result__text">Global score: 1/5</span>
    </div>
  </div>

  <div class="example__item">
    <div class="mc-stars-result mc-stars-result--score-40">
      <span class="mc-stars-result__visual"></span>
      <span class="mc-stars-result__text">Global score: 2/5</span>
    </div>
  </div>

  <div class="example__item">
    <div class="mc-stars-result mc-stars-result--l mc-stars-result--score-60">
      <span class="mc-stars-result__visual"></span>
      <span class="mc-stars-result__text">Global score: 3/5</span>
    </div>
  </div>

  <div class="example__item">
    <div class="mc-stars-result mc-stars-result--xl mc-stars-result--score-90">
      <span class="mc-stars-result__visual"></span>
      <span class="mc-stars-result__text">Global score: 4,5/5</span>
    </div>
  </div>
</div>

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

Rating Stars

Filing or amending an opinion

Import

Basic usage

Variations

Available sizes

accessibility and semantic

When displaying the global score

Import

Basic usage

Variations

Available sizes

Available states

With a label

With a label link

With an overall score

accessibility and semantic