Vistaprint
styleKeyratingsStars

Ratings Stars

Ratings Stars show the current rating for a product, on a scale of 1 to 5. The rating itself can have one decimal place, e.g. a rating of 3.4.

Share
Share
jsx
<div class="ratings-stars" role="img" aria-label="3.5 out of 5 stars">
  <span
    class="ratings-stars-star ratings-stars-star-filled"
    role="presentation"
  ></span>
  <span
    class="ratings-stars-star ratings-stars-star-filled"
    role="presentation"
  ></span>
  <span
    class="ratings-stars-star ratings-stars-star-filled"
    role="presentation"
  ></span>
  <span
    class="
      ratings-stars-star ratings-stars-star-filled ratings-stars-star-filled-p5
    "
    role="presentation"
  ></span>
  <span class="ratings-stars-star" role="presentation"></span>
</div>

Stars to Show

If you only want to show a single star, you can adjust the number of stars to show to 1. This allows you to show a filled star using a rating of 1, and an empty star using a rating of 0.

3 reviews
Share
Share
jsx
<div aria-label="Rating star" class="ratings-stars">
  <span class="ratings-stars-star ratings-stars-star-filled"></span>
</div>

"monochromatic" skin

The "monochromatic" skin turns the stars black -- or white when using dark mode. This is intended for use only when the stars are shown on top of a light-colored background such as a hero or banner.

Share
Share
jsx
<div class="ratings-stars ratings-stars-skin-monochromatic">
  <span class="ratings-stars-star ratings-stars-star-filled"></span>
  <span class="ratings-stars-star ratings-stars-star-filled"></span>
  <span class="ratings-stars-star ratings-stars-star-filled"></span>
  <span class="ratings-stars-star"></span>
  <span class="ratings-stars-star"></span>
</div>

Guidelines

Accessibility Guidelines

  • The contents of the Ratings Stars component are not visible to assistive technologies, so the component needs an aria-label attribute that describes its contents, such as "Rating: 3.5 out of 5 stars". (Compare this to alt text on an image.)