1.2.1.1 #permalink Star fill states
The Star element visualizes the interactive star element it it's three fill states.
Examples
Default styling
.empty
displays the star element as empty
.half
displays the star element as half filled
.filled
displays the star element as filled
Markup
<div class="star [modifier class]">
<svg class="star-empty">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
</svg>
<svg class="star-half">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-half"></use>
</svg>
<svg class="star-filled">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-filled"></use>
</svg>
</div>
Source:
src/kss-documentation/elements.kss.scss, line 72