TheaterMania Component Library

Rating 

<div class="star-rating js-star-rating" aria-labelledby="show_rating">
    <div class="star-container">
        <span class="star-mask">
      <span class="star"><svg class="icon icon--star">
  <use xlink:href="/assets/icons/sprite-sheet.svg#star"></use>
</svg></span>
        </span>
        <span class="star star--gray"><svg class="icon icon--star">
  <use xlink:href="/assets/icons/sprite-sheet.svg#star"></use>
</svg></span>
    </div>
    <div class="star-container">
        <span class="star-mask">
      <span class="star"><svg class="icon icon--star">
  <use xlink:href="/assets/icons/sprite-sheet.svg#star"></use>
</svg></span>
        </span>
        <span class="star star--gray"><svg class="icon icon--star">
  <use xlink:href="/assets/icons/sprite-sheet.svg#star"></use>
</svg></span>
    </div>
    <div class="star-container">
        <span class="star-mask">
      <span class="star"><svg class="icon icon--star">
  <use xlink:href="/assets/icons/sprite-sheet.svg#star"></use>
</svg></span>
        </span>
        <span class="star star--gray"><svg class="icon icon--star">
  <use xlink:href="/assets/icons/sprite-sheet.svg#star"></use>
</svg></span>
    </div>
    <div class="star-container">
        <span class="star-mask">
      <span class="star star"><svg class="icon icon--star">
  <use xlink:href="/assets/icons/sprite-sheet.svg#star"></use>
</svg></span>
        </span>
        <span class="star star--gray"><svg class="icon icon--star">
  <use xlink:href="/assets/icons/sprite-sheet.svg#star"></use>
</svg></span>
    </div>
    <div class="star-container">
        <span class="star star--gray"><svg class="icon icon--star">
  <use xlink:href="/assets/icons/sprite-sheet.svg#star"></use>
</svg></span>
    </div>
    <span id="show_rating" class="visually-hidden">4 out of 5 stars</span>
</div>
 
<div class="star-rating{{#if modifier}} star-rating--{{modifier}}{{/if}} js-star-rating" aria-labelledby="show_rating">
  <div class="star-container">
    <span class="star-mask">
      <span class="star">{{render '@icons--star'}}</span>
    </span>
    <span class="star star--gray">{{render '@icons--star'}}</span>
  </div>
  <div class="star-container">
    <span class="star-mask">
      <span class="star">{{render '@icons--star'}}</span>
    </span>
    <span class="star star--gray">{{render '@icons--star'}}</span>
  </div>
  <div class="star-container">
    <span class="star-mask">
      <span class="star">{{render '@icons--star'}}</span>
    </span>
    <span class="star star--gray">{{render '@icons--star'}}</span>
  </div>
  <div class="star-container">
    <span class="star-mask">
      <span class="star star">{{render '@icons--star'}}</span>
    </span>
    <span class="star star--gray">{{render '@icons--star'}}</span>
  </div>
  <div class="star-container">
    <span class="star star--gray">{{render '@icons--star'}}</span>
  </div>
  <span id="show_rating" class="visually-hidden">{{rating}}</span>
</div>
 
{
  "rating": "4 out of 5 stars"
}
  • Content: 
    .star-rating {
  padding: 0.5rem 0.75rem;
  background: $color-gray-lightest;
  border-radius: $border-radius;
  cursor: default;
}

.star-rating--plain {
  padding: 0;
  background: none;
}

.star-container {
  position: relative;
  display: inline-block;
}

.star-mask {
  display: block;
  position: absolute;
  width: 1.3rem;
  height: 1.3rem;
  overflow: hidden;

  .star-rating--large & {
    @include breakpoint($break-large) {
      width: 1.8rem;
      height: 1.8rem;
    }
  }
}

.star {
  display: inline-block;
  margin-right: -1px;
}

.star--half {
  position: relative;
  z-index: 1;
  overflow: hidden;
  width: 50%;
}

.icon--star {
  .star & {
    width: 1.3rem;
    height: 1.3rem;

    .star-rating--large & {
      @include breakpoint($break-large) {
        width: 1.8rem;
        height: 1.8rem;
      }
    }
  }

  .star--gray & {
    fill: $color-gray-lighter;
  }
}
  • URL: /components/raw/rating/Rating.scss
  • Filesystem Path: src/components/01-Units/Rating/Rating.scss
  • Size: 893 Bytes

Ratings are only currently employed on WOS variants. As of now, WOS only supports full star ratings.

However, adding the class of .star--half to a gold star masks the width to reveal the gray star underneath, which can be used to display granular ratings if needed.

It is suggested to use JS to control the width of individual ratings if needed. There is also visually hidden text to provide the rating as text for accessibility, which will have to be handled by JS.