Rating picker

Documentation for rating picker components.

Files

app/styles/modules/_rating-picker.scss

Rating picker

Rating picker is created via .rating-picker class.

Basic

See example below.

Example:

Code:

<div class="rating-picker">
  <a class="rating-picker__item" href="javascript:;">
    <div class="rating-picker__item-image rating-picker__item-image--1"></div>
    <div class="rating-picker__item-description">Trash</div>
  </a>
  <a class="rating-picker__item" href="javascript:;">
    <div class="rating-picker__item-image rating-picker__item-image--2"></div>
    <div class="rating-picker__item-description">Bad</div>
  </a>
  <a class="rating-picker__item" href="javascript:;">
    <div class="rating-picker__item-image rating-picker__item-image--3"></div>
    <div class="rating-picker__item-description">Okay</div>
  </a>
  <a class="rating-picker__item" href="javascript:;">
    <div class="rating-picker__item-image rating-picker__item-image--4"></div>
    <div class="rating-picker__item-description">Satisfied</div>
  </a>
  <a class="rating-picker__item" href="javascript:;">
    <div class="rating-picker__item-image rating-picker__item-image--5"></div>
    <div class="rating-picker__item-description">Excellent</div>
  </a>
</div>

Active state

To force active state on individual items, add .rating-picker__item--active class to .rating-picker__item.

Example:

Code:

<div class="rating-picker">
  ...
  <a href="javascript:;" class="rating-picker__item rating-picker__item--active">
    <div class="rating-picker__item-image rating-picker__item-image--2"></div>
    <div class="rating-picker__item-description">Bad</div>
  </a>
  ...
</div>

Sizes

Example:

.rating-picker--l

Code:

<div class="rating-picker rating-picker--l">
  ...
</div>

Rating indicator

Simply add .rating-picker__indicator right after opening of .rating-picker tag. See example below for more details.

Example:

4 / 5

Code:

<div class="text-center">
  <div class="rating-picker rating-picker--l">
    <div class="rating-picker__indicator">4 <span class='text-color-grey-600'>/ 5</span></div>
    <a class="rating-picker__item" href="javascript:;">
      ...
    </a>
    ...
  </div>
</div>