Rating
Rating
Use the rating for displaying a star rating value from 1 to 5. The rating component uses the meter element, enclosed in a div that has a mask applied, turning the default colored bar into stars. The value attribute can be in increments of 0.5. You can override the default colors and size using custom properties. The aspect ratio will scale based on the height value.
| Custom Property | Default Value | Description |
|---|---|---|
--background-color |
#DCDFE4 | The color of empty stars |
--icon-color |
#36C5BA | The color of stars |
--height |
40px | The height of the rating component |
Example
A star rating.
Quality Rating
4.0
HTML
<p class="pv-heading-5 pv-stack-12" id="rating-title">Quality Rating</p>
<p class="pv-heading-1 pv-stack-8" id="rating-value">4.0</p>
<div class="pv-rating">
<meter id="rating" min="0" max="5" value="4.0" aria-labelled-by="rating-title" aria-described-by="rating-value">4.0 stars</meter>
</div>Bar Rating
You can change the default rating into a bar rating using the attribute data-rating="bar". The meter supports a max value of either 5 or 10, and the width of the meter will adjust accordingly based on the value. You should flex the numerical value to the left or right of the meter and use the attribute aria-described-by to link the value to the meter for accessibility.
| Custom Property | Default Value | Description |
|---|---|---|
--background-color |
#DCDFE4 | The color of empty bars |
--icon-color |
#176F6F | The color of bars |
--height |
10px | The height of the rating component |
Example
Two bar ratings of different sizes with labels on the left or right.
4 of 5
6
HTML
<div class="pv-flex" style="--flex-gap: 5px">
<p class="pv-text-title-xs" id="rating-value-bar-5">4 <span class="pv-visually-hidden">of 5</span></p>
<div class="pv-rating" data-rating="bar">
<meter id="rating" min="0" max="5" value="4" aria-described-by="rating-value-bar-5">4</meter>
</div>
</div>
<div class="pv-flex" style="--flex-gap: 5px">
<div class="pv-rating" data-rating="bar">
<meter id="rating" min="0" max="10" value="6" aria-described-by="rating-value-bar-10">6 <span class="pv-visually-hidden">of 10</span></meter>
</div>
<p class="pv-text-title-xs" id="rating-value-bar-10">6</p>
</div>Accessibility
Use aria-labelled-by to associate the meter element with the text that indicates what the rating is for and aria-described-by with the text that includes the rating value. You can use .pv-visually-hidden to include more information for assistive devices without needing to show it on screen.