Home
Components
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`	#D9DEDE	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

4.0 stars

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>

Dot Rating

You can change the default rating into a dot rating using the attribute data-rating="dot". 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`	#D9DEDE	The color of empty dots
`--icon-color`	#36C5BA	The color of dots
`--mask-color`	#FFFFFF	The color of the background
`--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

HTML

<div class="pv-flex" style="--flex-gap: 2px">
  <p class="pv-text-title-xs" id="rating-value-dot-1">4 <span class="pv-visually-hidden">of 5</span></p>
  <div class="pv-rating" data-rating="dot">
    <meter id="rating" min="0" max="5" value="4" aria-described-by="rating-value-dot-1">4</meter>
  </div>
</div>
<div class="pv-flex" style="--flex-gap: 2px">
  <div class="pv-rating" data-rating="dot">
    <meter id="rating" min="0" max="5" value="2" aria-described-by="rating-value-dot-2">2 <span class="pv-visually-hidden">of 5</span></meter>
  </div>
  <p class="pv-text-title-xs" id="rating-value-dot-2">2</p>
</div>

Hovering on a Dot Rating

Because the rating element uses and SVG pattern to mask the meter element, in the rare instance where the dot rating is inside of an element that has a hover/focus state, you need to add the custom property --hover-mask-color to the rating’s parent (the thing being hovered) so that the mask can match the background color when its parent is hovered/focused on.

Example
A dot rating inside of an element with a hover/focus state.

Claims Reported: $24,992.22

Rate Score

HTML

<label class="pv-label-selectable-small pv-surface-accent" for="1" style="--hover-mask-color: #E8F2F4">
  <input type="checkbox" class="pv-hide" name="type" id="1">
  <div class="pv-flex">
    <svg aria-hidden="true" class="pv-icon">
      <title>file-badge</title>
      <use xlink:href="#file-badge"></use>
    </svg>
    <div class="pv-text-body-md">
      <p><strong>Claims Reported:</strong> <span class="pv-text-tertiary">$24,992.22</span></p>
      <div class="pv-flex" style="--flex-gap: 2px">
        <div class="pv-rating" data-rating="dot" style="--mask-color: #F7F8F8">
          <meter id="rating" min="0" max="5" value="2" aria-described-by="rating-value-dot-2">2 <span class="pv-visually-hidden">of 5</span></meter>
        </div>
        <span class="pv-text-tertiary pv-text-body-sm">Rate Score</span>
        <svg aria-hidden="true" class="pv-icon-12 pv-text-tertiary">
      <title>info-circle</title>
      <use xlink:href="#info-circle"></use>
    </svg>
      </div>
    </div>
  </div>
</label>

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.