1.2 #permalink Elements
The elements a css star rating component consists of. Her you can see the html structure and the combination of elements. The star rating component consists of:
- A star element to display the star state
- A star-container element to handle multiple stars as a rating
- A label element to display the additional test next to the rating
sg-wrapper:
Example
Star:
Star Container:
Label:
good
Markup
<b>Star:</b>
<div class="star half large positive direction-ltr">
<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-fille ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-filled"></use>
</svg>
</div>
<b>Star Container:</b>
<div class="star-container direction-rtl">
<div class="star icon filled positive large">
<i class="star-empty fa-circle-o"></i>
<i class="star-half fa fa-check-circle-o"></i>
<i class="star-filled fa fa-check-circle"></i>
</div>
<div class="star icon filled positive large">
<i class="star-empty fa-circle-o"></i>
<i class="star-half fa fa-check-circle-o"></i>
<i class="star-filled fa fa-check-circle"></i>
</div>
<div class="star icon empty positive large">
<i class="star-empty fa-circle-o"></i>
<i class="star-half fa fa-check-circle-o"></i>
<i class="star-filled fa fa-check-circle"></i>
</div>
</div>
<b>Label:</b>
<div class="label-value ">good</div>
Source:
src/kss-documentation/elements.kss.scss, line 1