Rating
The product rating uses the star icon as visual representation of the current vote result. The default voting only shows the result of the vote and the count of votings.
<span class="rating" tabindex="0" aria-label="Rating of 0 from 5 stars.">
<span class="rating-indicators">
<span class="rating-empty">
<span tabindex="0" class="rating-icon icon icon-2">
</span>
<span tabindex="0" class="rating-icon icon icon-2">
</span>
<span tabindex="0" class="rating-icon icon icon-2">
</span>
<span tabindex="0" class="rating-icon icon icon-2">
</span>
<span tabindex="0" class="rating-icon icon icon-2">
</span>
</span>
<span class="rating-filled" style="width:0%">
<span class="rating-icon icon icon-2">
</span>
<span class="rating-icon icon icon-2">
</span>
<span class="rating-icon icon icon-2">
</span>
<span class="rating-icon icon icon-2">
</span>
<span class="rating-icon icon icon-2">
</span>
</span>
</span>
<span class="rating-details">(XXX)</span>
</span>Interactive and hoverable rating component#
Additionally to the default static rating shown above, there are two interactive variants.
One version is hoverable and this variant can be used as link or jumpmark.
To set up your rating component as hoverable variant, simply add the rating-hoverable class to the outer rating element.
<span class="rating rating-hoverable" tabindex="0" aria-label="Rating of 2.5 from 5 stars.">
<span class="rating-indicators">
<span class="rating-empty">
<span tabindex="0" class="rating-icon icon icon-2">
</span>
<span tabindex="0" class="rating-icon icon icon-2">
</span>
<span tabindex="0" class="rating-icon icon icon-2">
</span>
<span tabindex="0" class="rating-icon icon icon-2">
</span>
<span tabindex="0" class="rating-icon icon icon-2">
</span>
</span>
<span class="rating-filled" style="width:50%">
<span class="rating-icon icon icon-2">
</span>
<span class="rating-icon icon icon-2">
</span>
<span class="rating-icon icon icon-2">
</span>
<span class="rating-icon icon icon-2">
</span>
<span class="rating-icon icon icon-2">
</span>
</span>
</span>
<span class="rating-details">(XXX)</span>
</span>With the interactive variant you can hover or focus the stars to indicate your vote.
To set up your rating component as interactive variant, simply add the rating-interactive class to the outer rating element.
<span class="rating rating-interactive" tabindex="0" aria-label="Rating of 2.5 from 5 stars.">
<span class="rating-indicators">
<span class="rating-empty">
<span tabindex="0" class="rating-icon icon icon-2">
</span>
<span tabindex="0" class="rating-icon icon icon-2">
</span>
<span tabindex="0" class="rating-icon icon icon-2">
</span>
<span tabindex="0" class="rating-icon icon icon-2">
</span>
<span tabindex="0" class="rating-icon icon icon-2">
</span>
</span>
<span class="rating-filled" style="width:50%">
<span class="rating-icon icon icon-2">
</span>
<span class="rating-icon icon icon-2">
</span>
<span class="rating-icon icon icon-2">
</span>
<span class="rating-icon icon icon-2">
</span>
<span class="rating-icon icon icon-2">
</span>
</span>
</span>
<span class="rating-details">(XXX)</span>
</span>Voting result#
The rating component has no fixed values, but can take any result between 0 and 100. To set your result, just set the style to width: 80% at the element rating-filled. You can see that the rating automatically displays the correct result.
In the examples below you can see different possible results. There are also interactive examples listed here.
<span class="rating" tabindex="0" aria-label="Rating of 5 from 5 stars.">
<span class="rating-indicators">
<span class="rating-empty">
<span tabindex="0" class="rating-icon icon icon-2">
</span>
<span tabindex="0" class="rating-icon icon icon-2">
</span>
<span tabindex="0" class="rating-icon icon icon-2">
</span>
<span tabindex="0" class="rating-icon icon icon-2">
</span>
<span tabindex="0" class="rating-icon icon icon-2">
</span>
</span>
<span class="rating-filled" style="width:100%">
<span class="rating-icon icon icon-2">
</span>
<span class="rating-icon icon icon-2">
</span>
<span class="rating-icon icon icon-2">
</span>
<span class="rating-icon icon icon-2">
</span>
<span class="rating-icon icon icon-2">
</span>
</span>
</span>
<span class="rating-details">(53)</span>
</span>
<br />
<span class="rating rating-interactive" tabindex="0" aria-label="Rating of 4 from 5 stars.">
<span class="rating-indicators">
<span class="rating-empty">
<span tabindex="0" class="rating-icon icon icon-2">
</span>
<span tabindex="0" class="rating-icon icon icon-2">
</span>
<span tabindex="0" class="rating-icon icon icon-2">
</span>
<span tabindex="0" class="rating-icon icon icon-2">
</span>
<span tabindex="0" class="rating-icon icon icon-2">
</span>
</span>
<span class="rating-filled" style="width:80%">
<span class="rating-icon icon icon-2">
</span>
<span class="rating-icon icon icon-2">
</span>
<span class="rating-icon icon icon-2">
</span>
<span class="rating-icon icon icon-2">
</span>
<span class="rating-icon icon icon-2">
</span>
</span>
</span>
<span class="rating-details">(231)</span>
</span> (interactive)<br />
<span class="rating rating-hoverable" tabindex="0" aria-label="Rating of 2.5 from 5 stars.">
<span class="rating-indicators">
<span class="rating-empty">
<span tabindex="0" class="rating-icon icon icon-2">
</span>
<span tabindex="0" class="rating-icon icon icon-2">
</span>
<span tabindex="0" class="rating-icon icon icon-2">
</span>
<span tabindex="0" class="rating-icon icon icon-2">
</span>
<span tabindex="0" class="rating-icon icon icon-2">
</span>
</span>
<span class="rating-filled" style="width:50%">
<span class="rating-icon icon icon-2">
</span>
<span class="rating-icon icon icon-2">
</span>
<span class="rating-icon icon icon-2">
</span>
<span class="rating-icon icon icon-2">
</span>
<span class="rating-icon icon icon-2">
</span>
</span>
</span>
<span class="rating-details">(812)</span>
</span> (hoverable)<br />
<span class="rating rating-interactive" tabindex="0" aria-label="Rating of 2 from 5 stars.">
<span class="rating-indicators">
<span class="rating-empty">
<span tabindex="0" class="rating-icon icon icon-2">
</span>
<span tabindex="0" class="rating-icon icon icon-2">
</span>
<span tabindex="0" class="rating-icon icon icon-2">
</span>
<span tabindex="0" class="rating-icon icon icon-2">
</span>
<span tabindex="0" class="rating-icon icon icon-2">
</span>
</span>
<span class="rating-filled" style="width:40%">
<span class="rating-icon icon icon-2">
</span>
<span class="rating-icon icon icon-2">
</span>
<span class="rating-icon icon icon-2">
</span>
<span class="rating-icon icon icon-2">
</span>
<span class="rating-icon icon icon-2">
</span>
</span>
</span>
<span class="rating-details">(1)</span>
</span> (interactive)<br />
<span class="rating" tabindex="0" aria-label="Rating of 1 from 5 stars.">
<span class="rating-indicators">
<span class="rating-empty">
<span tabindex="0" class="rating-icon icon icon-2">
</span>
<span tabindex="0" class="rating-icon icon icon-2">
</span>
<span tabindex="0" class="rating-icon icon icon-2">
</span>
<span tabindex="0" class="rating-icon icon icon-2">
</span>
<span tabindex="0" class="rating-icon icon icon-2">
</span>
</span>
<span class="rating-filled" style="width:20%">
<span class="rating-icon icon icon-2">
</span>
<span class="rating-icon icon icon-2">
</span>
<span class="rating-icon icon icon-2">
</span>
<span class="rating-icon icon icon-2">
</span>
<span class="rating-icon icon icon-2">
</span>
</span>
</span>
<span class="rating-details">(12)</span>
</span>Usage example#
In principle, the rating component can be used anywhere. The following is an example of the rating component in the product tile.
<div class="cake-example-cutted-shadow-fix" id="showbox">
<div class="row">
<div class="col-6 col-md-3 mb-2 mb-md-0">
<a href="#" class="card product-tile-card ">
<img is="rnd-img" src="../../../_assets/images/examples/Apfel-Karamell-Kuchen.jpg"
alt="placeholder" class="card-img-top" folder="../../../_assets/images/examples"
images="Apfel-Karamell-Kuchen.jpg,Apfel-Lebkuchentorte.jpg,Apfel-Quarkkuchen-mit-Sultaninen.jpg,Aprikosen-Frischkaesetorte.jpg,Aprikosengalette-mit-Rosmarin.jpg,Backen_CloseUp_v01_USAR.jpg,Backen_CloseUp_v14_USAR.jpg,Backen_Ostern_CloseUp_v02_USAR.jpg,Backen_Ostern_CloseUp_v07_USAR.jpg,Backen_Stibi_POS_WT1644_IFLA.jpg,Backen_Weihnachten_CloseUp_v02_USAR.jpg,Backen_Weihnachten_CloseUp_v14_USAR.jpg,Backen_Weihnachten_CloseUp_v16_USAR.jpg,Backen_Weihnachten_Collect_v01_USAR.jpg,Backen_Weihnachten_Recipe_Mini_Apel_Mini_Cinnamon_Cake_v02_USAR.jpg,Bellini-Torte.jpg,Birnen-Haselnuss-Streuselkuchen-mit-Cranberrys.jpg,Crepestorte.jpg,Erdbeer-Quark-Torte.jpg,Espresso-Schuettelkuchen.jpg,Espressotorte-mit-Himbeeren.jpg,Frische-Quarktorte-mit-Smoothie-Guss.jpg,Gefrorene-Brombeercharlotte.jpg,Himbeer-Eis-Guglhupf.jpg,Himbeer-Ombrecake.jpg,Japanischer-Cheesecake-mit-Erdbeeren.jpg,Johannisbeer-Pull-apart-Kuchen.jpg,Kaesekuchen-mit-Brombeeren.jpg,Kirsch-Punsch-Guglhupf.jpg,Kuhflecken-Kaesekuchen.jpg,Mangokuchen-mit-Mojito-Guss.jpg,Marzipan-Kirsch-Streifen.jpg,Orangentarte-mit-Kumquats.jpg,Pfirsichtarte-mit-Quarkcreme.jpg,Pflaumen-Pekan-Tarte.jpg,Ricottatarte-mit-Johannisbeeren.jpg,Rote-Beete-Schoko-Kuchen-mit-Schokoganache.jpg,Schoko-Espresso-Tarte.jpg,Schoko-Nougat-Guglhupf.jpg,Schokoladenkuchen-mit-Mohnsahne-und-Mango.jpg,Stollenrauten.jpg,Streusel-Kaesekuchen-mit-Blaubeeren.jpg,Walnuss-Blondies.jpg,veganer-Cheesecake-mit-Himbeeren.jpg" />
<div class="card-body product-tile-card-body">
<div class="text-right" style="margin-top:-.5rem;height:1rem">
<span class="rating" tabindex="0" aria-label="Rating of 3 from 5 stars.">
<span class="rating-indicators">
<span class="rating-empty">
<span tabindex="0" class="rating-icon icon icon-2">
</span>
<span tabindex="0" class="rating-icon icon icon-2">
</span>
<span tabindex="0" class="rating-icon icon icon-2">
</span>
<span tabindex="0" class="rating-icon icon icon-2">
</span>
<span tabindex="0" class="rating-icon icon icon-2">
</span>
</span>
<span class="rating-filled" style="width:60%">
<span class="rating-icon icon icon-2">
</span>
<span class="rating-icon icon icon-2">
</span>
<span class="rating-icon icon icon-2">
</span>
<span class="rating-icon icon icon-2">
</span>
<span class="rating-icon icon icon-2">
</span>
</span>
</span>
<span class="rating-details">(XXX)</span>
</span>
</div>
<h3 class="card-title product-tile-card-title">Product title</h3>
<p class="card-text product-tile-card-text">Product description</p>
</div>
</a>
</div>
<div class="col-6 col-md-3 mb-2 mb-md-0">
<a href="#" class="card product-tile-card ">
<img is="rnd-img" src="../../../_assets/images/examples/Apfel-Karamell-Kuchen.jpg"
alt="placeholder" class="card-img-top" folder="../../../_assets/images/examples"
images="Apfel-Karamell-Kuchen.jpg,Apfel-Lebkuchentorte.jpg,Apfel-Quarkkuchen-mit-Sultaninen.jpg,Aprikosen-Frischkaesetorte.jpg,Aprikosengalette-mit-Rosmarin.jpg,Backen_CloseUp_v01_USAR.jpg,Backen_CloseUp_v14_USAR.jpg,Backen_Ostern_CloseUp_v02_USAR.jpg,Backen_Ostern_CloseUp_v07_USAR.jpg,Backen_Stibi_POS_WT1644_IFLA.jpg,Backen_Weihnachten_CloseUp_v02_USAR.jpg,Backen_Weihnachten_CloseUp_v14_USAR.jpg,Backen_Weihnachten_CloseUp_v16_USAR.jpg,Backen_Weihnachten_Collect_v01_USAR.jpg,Backen_Weihnachten_Recipe_Mini_Apel_Mini_Cinnamon_Cake_v02_USAR.jpg,Bellini-Torte.jpg,Birnen-Haselnuss-Streuselkuchen-mit-Cranberrys.jpg,Crepestorte.jpg,Erdbeer-Quark-Torte.jpg,Espresso-Schuettelkuchen.jpg,Espressotorte-mit-Himbeeren.jpg,Frische-Quarktorte-mit-Smoothie-Guss.jpg,Gefrorene-Brombeercharlotte.jpg,Himbeer-Eis-Guglhupf.jpg,Himbeer-Ombrecake.jpg,Japanischer-Cheesecake-mit-Erdbeeren.jpg,Johannisbeer-Pull-apart-Kuchen.jpg,Kaesekuchen-mit-Brombeeren.jpg,Kirsch-Punsch-Guglhupf.jpg,Kuhflecken-Kaesekuchen.jpg,Mangokuchen-mit-Mojito-Guss.jpg,Marzipan-Kirsch-Streifen.jpg,Orangentarte-mit-Kumquats.jpg,Pfirsichtarte-mit-Quarkcreme.jpg,Pflaumen-Pekan-Tarte.jpg,Ricottatarte-mit-Johannisbeeren.jpg,Rote-Beete-Schoko-Kuchen-mit-Schokoganache.jpg,Schoko-Espresso-Tarte.jpg,Schoko-Nougat-Guglhupf.jpg,Schokoladenkuchen-mit-Mohnsahne-und-Mango.jpg,Stollenrauten.jpg,Streusel-Kaesekuchen-mit-Blaubeeren.jpg,Walnuss-Blondies.jpg,veganer-Cheesecake-mit-Himbeeren.jpg" />
<div class="card-body product-tile-card-body">
<div class="text-right mb-1" style="margin-top:-.5rem;height:1rem">
<span class="rating" tabindex="0" aria-label="Rating of 3.5 from 5 stars.">
<span class="rating-indicators">
<span class="rating-empty">
<span tabindex="0" class="rating-icon icon icon-2">
</span>
<span tabindex="0" class="rating-icon icon icon-2">
</span>
<span tabindex="0" class="rating-icon icon icon-2">
</span>
<span tabindex="0" class="rating-icon icon icon-2">
</span>
<span tabindex="0" class="rating-icon icon icon-2">
</span>
</span>
<span class="rating-filled" style="width:70%">
<span class="rating-icon icon icon-2">
</span>
<span class="rating-icon icon icon-2">
</span>
<span class="rating-icon icon icon-2">
</span>
<span class="rating-icon icon icon-2">
</span>
<span class="rating-icon icon icon-2">
</span>
</span>
</span>
<span class="rating-details">(XXX)</span>
</span>
</div>
<h3 class="card-title product-tile-card-title">Product title</h3>
<p class="card-text product-tile-card-text">Product description</p>
</div>
</a>
</div>
</div>
</div>Accessibility#
To improve the accessibility of the rating component, please always use the aria-label attribute as shown in our examples: aria-label="Rating of 3.5 from 5 stars.". This will ensure that also disabled and limited users have a change to discover the voting result.