Go to rebrand

Stars Rating SVG implementation

Version 1

Non interactive stars

Implementation

Make sure to include the CSS into your page or project:

<link rel="stylesheet" type="text/css" media="all" href="{{ static('css/ca_styleguide_stars_rate.css') }}" />

To fill the stars partially, it's pretty much the same process as non-partial stars, you just need to fill the percentage of the div containing the class stars-rating__star-wrapper, and you should make sure that non of the classes contains a js prefix since it's a non interactive implementation. If you need to have an empty variation of the stars, with gray colour, you have to add a stars-rating--empty modifier class to the stars-rating element.

To increase a specific star you just have to add the modifier stars-rating__star--increased to the class stars-rating__star.

Smaller stars

For a smaller version of the stars, you have to add a stars-rating--sm modifier class to the stars-rating element.

Snippet for partial stars

<div class="stars-rating__container"> <div class="stars-rating__star"> <div class="stars-rating__star-full"> <div class="stars-rating__star-wrapper" style="width: 100%;"> {% include "base/common/icons/star-full.html" %} </div> </div> <div class="stars-rating__star-empty"> {% include "base/common/icons/star-outline.html" %} </div> </div> <div class="stars-rating__star"> <div class="stars-rating__star-full"> <div class="stars-rating__star-wrapper" style="width: 100%;"> {% include "base/common/icons/star-full.html" %} </div> </div> <div class="stars-rating__star-empty"> {% include "base/common/icons/star-outline.html" %} </div> </div> <div class="stars-rating__star"> <div class="stars-rating__star-full"> <div class="stars-rating__star-wrapper" style="width: 100%;"> {% include "base/common/icons/star-full.html" %} </div> </div> <div class="stars-rating__star-empty"> {% include "base/common/icons/star-outline.html" %} </div> </div> <div class="stars-rating__star"> <div class="stars-rating__star-full"> <div class="stars-rating__star-wrapper" style="width: 100%;"> {% include "base/common/icons/star-full.html" %} </div> </div> <div class="stars-rating__star-empty"> {% include "base/common/icons/star-outline.html" %} </div> </div> <div class="stars-rating__star"> <div class="stars-rating__star-full"> <div class="stars-rating__star-wrapper" style="width: 50%;"> {% include "base/common/icons/star-full.html" %} </div> </div> <div class="stars-rating__star-empty"> {% include "base/common/icons/star-outline.html" %} </div> </div> </div>


Interactive stars

To implement the interactive stars please add the modifier stars-rating--interactive to the class containing stars-rating this will add the styles required for the interactive stars

plugin for displaying stars with hover and select options.
The result of selection is provided inside input element.


Snippet for interactive stars

<div class="stars-rating stars-rating--interactive stars-rating--empty js-stars-rate"> <div class="stars-rating__container"> <div class="stars-rating__star js-stars-rate__star"> <div class="stars-rating__star-full"> <div class="stars-rating__star-wrapper js-stars-rate__star-fill"> {% include "base/common/icons/star-full.html" %} </div> </div> <div class="stars-rating__star-empty"> {% include "base/common/icons/star-outline.html" %} </div> </div> <div class="stars-rating__star js-stars-rate__star"> <div class="stars-rating__star-full"> <div class="stars-rating__star-wrapper js-stars-rate__star-fill"> {% include "base/common/icons/star-full.html" %} </div> </div> <div class="stars-rating__star-empty"> {% include "base/common/icons/star-outline.html" %} </div> </div> <div class="stars-rating__star js-stars-rate__star"> <div class="stars-rating__star-full"> <div class="stars-rating__star-wrapper js-stars-rate__star-fill"> {% include "base/common/icons/star-full.html" %} </div> </div> <div class="stars-rating__star-empty"> {% include "base/common/icons/star-outline.html" %} </div> </div> <div class="stars-rating__star js-stars-rate__star"> <div class="stars-rating__star-full"> <div class="stars-rating__star-wrapper js-stars-rate__star-fill"> {% include "base/common/icons/star-full.html" %} </div> </div> <div class="stars-rating__star-empty"> {% include "base/common/icons/star-outline.html" %} </div> </div> <div class="stars-rating__star js-stars-rate__star"> <div class="stars-rating__star-full"> <div class="stars-rating__star-wrapper js-stars-rate__star-fill"> {% include "base/common/icons/star-full.html" %} </div> </div> <div class="stars-rating__star-empty"> {% include "base/common/icons/star-outline.html" %} </div> </div> </div> </div>

How to init

Make sure to include the CSS and JS into your page or project:

<link rel="stylesheet" type="text/css" media="all" href="{{ static('css/ca_styleguide_stars_rate.css') }}" /> <script src="{{ static("js/ca_styleguide_stars_rate.js") }}"></script>

All elements with selector .js-stars-rate will be initialised.

  1. [optional] Now window.starsVote is class object to create new specific stars selectors
Options to specific init
Init all by selector (auto default in ca_styleguide_stars_rate.js)

let starsVote = new window.starsVote('.js-stars-rate')
will return list object of all selector objects

Init with element

let starsVote = new window.starsVote( DOMelement )
will return object to manipulate


Input manipulations

To simplify integration plugin stores value inside input field.

It will change value and fire native change event on stars selected.

It also will listen to the native change event of input to update selected stars


Helpful methods

  • _setValue(value) - setting value from 0 to 5
  • selectedValue - internal value (should be exactly same as input value)

Version 2

Version 2 was created for PDQ-122 with the goal of minimize the amount of DOM elements for the star ratings. Version 1 can be deleted as soon as the new stars are implemented on the main site and Matching tool.

Non interactive stars

Implementation

Make sure to include the CSS into your page or project:

<link rel="stylesheet" type="text/css" media="all" href="{{ static('css/ca_styleguide_stars_rate_v2.css') }}" />

Rating display

To include integer star rating, you can add the star rating icons as img, in the other cases you can use it as SVG.

Star rating icons are in the folder /media/img/stars/ of the mainsite.

Not rated <img src="{{ static('/media/img/icons/stars/stars-0.svg') }}" alt="Not rated" class="stars-rtg" />
Rated with 1 star <img src="{{ static('/media/img/icons/stars/stars-1.svg') }}" alt="Rated with 1 star" class="stars-rtg" />
Rated with 2 stars <img src="{{ static('/media/img/icons/stars/stars-2.svg') }}" alt="Rated with 2 stars" class="stars-rtg" />
Rated with 3 stars <img src="{{ static('/media/img/icons/stars/stars-3.svg') }}" alt="Rated with 3 stars" class="stars-rtg" />
Rated with 4 stars <img src="{{ static('/media/img/icons/stars/stars-4.svg') }}" alt="Rated with 4 stars" class="stars-rtg" />
Rated with 5 stars <img src="{{ static('/media/img/icons/stars/stars-5.svg') }}" alt="Rated with 5 stars" class="stars-rtg" />

Smaller stars

For a smaller version of the stars, you have to add a stars-rtg--sm modifier class to the stars-rtg element (img or svg).

Rated with 3 stars

Image example:

<img src="{{ static('/media/img/stars/stars-3.svg') }}" alt="Rated with 3 stars" class="stars-rtg stars-rtg--sm" />

SVG example:

<div class="stars-rtg stars-rtg--sm"> {% with class="stars-rtg__svg--full" %} {% include "base/common/icons/star.html" %} {% endwith %} {% with class="stars-rtg__svg--full" %} {% include "base/common/icons/star.html" %} {% endwith %} {% with class="stars-rtg__svg--full" %} {% include "base/common/icons/star.html" %} {% endwith %} {% include "base/common/icons/star.html" %} {% include "base/common/icons/star.html" %} </div>

Medium size stars

For a slighty bigger version of the stars, you have to add a stars-rtg--md modifier class to the stars-rtg element (currently only svg is supported).

SVG example:

<div class="stars-rtg stars-rtg--md"> {% with class="stars-rtg__svg--full" %} {% include "base/common/icons/star.html" %} {% endwith %} {% with class="stars-rtg__svg--full" %} {% include "base/common/icons/star.html" %} {% endwith %} {% with class="stars-rtg__svg--full" %} {% include "base/common/icons/star.html" %} {% endwith %} {% include "base/common/icons/star.html" %} {% include "base/common/icons/star.html" %} </div>

Increased star

To increase a specific star you need to add star SVG with stars-rtg__svg--inc class to the context variable of the SVG include.

<div class="stars-rtg"> {% with class="stars-rtg__svg--full" %} {% include "base/common/icons/star.html" %} {% endwith %} {% with class="stars-rtg__svg--full" %} {% include "base/common/icons/star.html" %} {% endwith %} {% with class="stars-rtg__svg--full stars-rtg__svg--inc" %} {% include "base/common/icons/star.html" %} {% endwith %} {% with class="stars-rtg__svg--full stars-rtg__svg--inc" %} {% include "base/common/icons/star.html" %} {% endwith %} {% include "base/common/icons/star.html" %} </div>

Partial fill

To fill the stars partially, you need to use the code snippet as shown below (wrapping the star you want to be partially filled), and include the SVG with the percentage as a context variable.


<div class="stars-rtg"> {% with class="stars-rtg__svg--full" %} {% include "base/common/icons/star.html" %} {% endwith %} {% with class="stars-rtg__svg--full" %} {% include "base/common/icons/star.html" %} {% endwith %} {% with class="stars-rtg__svg--full" %} {% include "base/common/icons/star.html" %} {% endwith %} <div class="stars-rtg__star"> <div class="stars-rtg__prtl"> {% with percentage=25 class="stars-rtg__svg--full" %} {% include "base/common/icons/star.html" %} {% endwith %} </div> {% include "base/common/icons/star.html" %} </div> {% include "base/common/icons/star.html" %} </div>

Interactive stars

To implement the interactive stars please add the stars-rtg--intv class modifier to the stars-rtg element. This will add the styles required for the interactive stars. If you want to have the messages displayed in the bottom part, then you need to add the stars-rtg--msg class to the parent element too.

With messages:
Very dissatisfied with the experience Dissatisfied with the experience Satisfied with the experience Happy with the experience Would recommend to a friend

Without messages:

The result of selection is provided inside input element.

<div class="stars-rtg stars-rtg--msg stars-rtg--intv js-stars-rating"> {% with class="js-stars-rating__star" %} {% include "base/common/icons/star.html" %} {% endwith %} <span class="stars-rtg__msg">Very dissatisfied with the experience</span> {% with class="js-stars-rating__star" %} {% include "base/common/icons/star.html" %} {% endwith %} <span class="stars-rtg__msg">Dissatisfied with the experience</span> {% with class="js-stars-rating__star" %} {% include "base/common/icons/star.html" %} {% endwith %} <span class="stars-rtg__msg">Satisfied with the experience</span> {% with class="js-stars-rating__star" %} {% include "base/common/icons/star.html" %} {% endwith %} <span class="stars-rtg__msg">Happy with the experience</span> {% with class="js-stars-rating__star" %} {% include "base/common/icons/star.html" %} {% endwith %} <span class="stars-rtg__msg">Would recommend to a friend</span> <input type="hidden" value="3" /> </div>

Minimal value

To set up minimal required number of stars, add data-min-stars="N" attribute to the div element.

With messages, min is 2:
Very dissatisfied with the experience Dissatisfied with the experience Satisfied with the experience Happy with the experience Would recommend to a friend

Without messages, min is 2:
<div class="stars-rtg stars-rtg--empty stars-rtg--msg stars-rtg--intv js-stars-rating" data-min-stars="2"> … <div>

How to init

Make sure to include the CSS and JS into your page or project:

<link rel="stylesheet" type="text/css" media="all" href="{{ static('css/ca_styleguide_stars_rate_v2.css') }}" /> <script src="{{ static("js/ca_styleguide_stars_rate_v2.js") }}"></script>

All elements with selector .js-stars-rating will be initialised.

Input manipulations

To simplify integration the plugin stores the value inside an input field. This input will change the value and fire the native change event on stars selection. It also will listen to the native change input event to update selected stars

Helpful methods

  • _setValue(value) - setting value from 0 to 5
  • selectedValue - internal value (should be exactly same as input value)