rating

Rating is a visual indicator of the average user ratings based on submitted ratings.

Always consists of five stars. The stars can be completely colored, half colored or displayed as an outline only.

Those stars are radio buttons which can be selected in order to pass the selected value.

The rating can be used in two sizes: small and large and can also be supplemented by a label in each case.

Use cases

rating as a link (when clicking or tapping, the user can be redirected to a detailed assessment)
rating as selection (individual stars can be selected in order to give a rating)

table of content

description
component variations
style scss

component variations

Rating small

Open on blank page

<div class="a-rating a-rating--small a-rating--link">
  <a href="/#" aria-label="Link for rating" target="_blank">
    <div class="a-rating__star-container">
      <i class="a-icon ui-ic-nosafe-star-fill"></i>
      <i class="a-icon ui-ic-nosafe-star-fill"></i>
      <i class="a-icon ui-ic-nosafe-star-fill"></i>
      <i class="a-icon ui-ic-nosafe-star-half"></i>
      <i class="a-icon ui-ic-nosafe-star"></i>
    </div>
  </a>
</div>

Rating large

Open on blank page

<div class="a-rating a-rating--large a-rating--link">
  <a href="/#" aria-label="Link for rating" target="_blank">
    <div class="a-rating__star-container">
      <i class="a-icon ui-ic-nosafe-star-fill"></i>
      <i class="a-icon ui-ic-nosafe-star-fill"></i>
      <i class="a-icon ui-ic-nosafe-star-fill"></i>
      <i class="a-icon ui-ic-nosafe-star-half"></i>
      <i class="a-icon ui-ic-nosafe-star"></i>
    </div>
  </a>
</div>

Rating with label, small

Open on blank page

3.5(45)

<div class="a-rating a-rating--small a-rating--link">
  <a href="/#" aria-label="Link for rating" target="_blank">
    <div class="a-rating__star-container">
      <i class="a-icon ui-ic-nosafe-star-fill"></i>
      <i class="a-icon ui-ic-nosafe-star-fill"></i>
      <i class="a-icon ui-ic-nosafe-star-fill"></i>
      <i class="a-icon ui-ic-nosafe-star-half"></i>
      <i class="a-icon ui-ic-nosafe-star"></i>
    </div>
    <div class="a-rating__label-container">
      <span class="a-rating__label">3.5</span>
      <span class="a-rating__label a-rating__label--complete">(45)</span>
    </div>
  </a>
</div>

Rating with label, large

Open on blank page

3.5(45)

<div class="a-rating a-rating--large a-rating--link">
  <a href="/#" aria-label="Link for rating" target="_blank">
    <div class="a-rating__star-container">
      <i class="a-icon ui-ic-nosafe-star-fill"></i>
      <i class="a-icon ui-ic-nosafe-star-fill"></i>
      <i class="a-icon ui-ic-nosafe-star-fill"></i>
      <i class="a-icon ui-ic-nosafe-star-half"></i>
      <i class="a-icon ui-ic-nosafe-star"></i>
    </div>
    <div class="a-rating__label-container">
      <span class="a-rating__label">3.5</span>
      <span class="a-rating__label a-rating__label--complete">(45)</span>
    </div>
  </a>
</div>

Rating selection

Open on blank page

<div class="a-rating a-rating--large a-rating--selection">
  <div class="a-rating__star-container">
    <label>
      <input type="radio" name="rating" value="1" />
      <i class="a-icon ui-ic-nosafe-star"></i>
    </label>
    <label>
      <input type="radio" name="rating" value="2" />
      <i class="a-icon ui-ic-nosafe-star"></i>
    </label>
    <label>
      <input type="radio" name="rating" value="3" />
      <i class="a-icon ui-ic-nosafe-star"></i>
    </label>
    <label>
      <input type="radio" name="rating" value="4" />
      <i class="a-icon ui-ic-nosafe-star"></i>
    </label>
    <label>
      <input type="radio" name="rating" value="5" />
      <i class="a-icon ui-ic-nosafe-star"></i>
    </label>
  </div>
  <div class="a-rating__label-container">
    <span class="a-rating__label a-rating__label--complete">(0/5)</span>
  </div>
</div>

Rating small disabled

Open on blank page

<div class="a-rating a-rating--small a-rating--link a-rating--disabled">
  <a href="/#" aria-label="Link for rating" target="_blank">
    <div class="a-rating__star-container">
      <i class="a-icon ui-ic-nosafe-star-fill"></i>
      <i class="a-icon ui-ic-nosafe-star-fill"></i>
      <i class="a-icon ui-ic-nosafe-star-fill"></i>
      <i class="a-icon ui-ic-nosafe-star-half"></i>
      <i class="a-icon ui-ic-nosafe-star"></i>
    </div>
  </a>
</div>

Rating large disabled

Open on blank page

<div class="a-rating a-rating--large a-rating--link a-rating--disabled">
  <a href="/#" aria-label="Link for rating" target="_blank">
    <div class="a-rating__star-container">
      <i class="a-icon ui-ic-nosafe-star-fill"></i>
      <i class="a-icon ui-ic-nosafe-star-fill"></i>
      <i class="a-icon ui-ic-nosafe-star-fill"></i>
      <i class="a-icon ui-ic-nosafe-star-half"></i>
      <i class="a-icon ui-ic-nosafe-star"></i>
    </div>
  </a>
</div>

Rating with label, small disabled

Open on blank page

3.5(45)

<div class="a-rating a-rating--small a-rating--link a-rating--disabled">
  <a href="/#" aria-label="Link for rating" target="_blank">
    <div class="a-rating__star-container">
      <i class="a-icon ui-ic-nosafe-star-fill"></i>
      <i class="a-icon ui-ic-nosafe-star-fill"></i>
      <i class="a-icon ui-ic-nosafe-star-fill"></i>
      <i class="a-icon ui-ic-nosafe-star-half"></i>
      <i class="a-icon ui-ic-nosafe-star"></i>
    </div>
    <div class="a-rating__label-container">
      <span class="a-rating__label">3.5</span>
      <span class="a-rating__label a-rating__label--complete">(45)</span>
    </div>
  </a>
</div>

Rating with label, large disabled

Open on blank page

3.5(45)

<div class="a-rating a-rating--large a-rating--link a-rating--disabled">
  <a href="/#" aria-label="Link for rating" target="_blank">
    <div class="a-rating__star-container">
      <i class="a-icon ui-ic-nosafe-star-fill"></i>
      <i class="a-icon ui-ic-nosafe-star-fill"></i>
      <i class="a-icon ui-ic-nosafe-star-fill"></i>
      <i class="a-icon ui-ic-nosafe-star-half"></i>
      <i class="a-icon ui-ic-nosafe-star"></i>
    </div>
    <div class="a-rating__label-container">
      <span class="a-rating__label">3.5</span>
      <span class="a-rating__label a-rating__label--complete">(45)</span>
    </div>
  </a>
</div>

additional content

styles SCSS

.a-rating {
  width: auto;
  display: flex;

  .a-rating__star-container {
    display: inline-flex;
    align-items: center;
  }

  .a-rating__label-container {
    display: flex;

    span {
      text-decoration: none;
    }
  }

  // star button styling
  .a-icon {
    cursor: pointer;
    color: var(--major-highlight-blue__enabled__fill__default);
    margin-right: unset;
  }

  &:hover {
    .a-icon {
      color: var(--major-highlight-blue__enabled__fill__hovered);
    }
  }

  &:active {
    .a-icon {
      color: var(--major-highlight-blue__enabled__fill__pressed);
    }
  }

  &--selection input:focus-visible + .a-icon {
    @include focus-outside;

    border-radius: 50%;
    --focus-border-radius: 50%;
  }

  &__label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: bold;

    &--complete {
      font-weight: normal;
    }
  }

  &--large {
    .a-rating__star-container {
      gap: 0.7rem;
    }

    .a-rating__label-container {
      margin-left: .7rem;
      column-gap: .5rem;
    }

    .a-icon {
      font-size: 2rem;
    }

    .a-rating__label {
      @include size-xl;
    }
  }

  &--small {
    .a-rating__star-container {
      gap: 0.125rem;
    }

    .a-rating__label-container {
      margin-left: .25rem;
      column-gap: .25rem;
    }

    .a-icon {
      font-size: 1rem;
    }

    .a-rating__label {
      @include size-s;
    }
  }

  &--link {
    cursor: pointer;

    a {
      display: flex;
      text-decoration: none;
    }

    .a-rating__label {
      color: var(--plain__enabled__front__default);
    }

    label {
      pointer-events: none;
    }
  }

  &--disabled {
    pointer-events: none;

    .a-icon {
      color: var(--plain__disabled__front__default);
    }

    &:hover {
      .a-icon {
        color: var(--plain__disabled__front__default);
      }
    }
  }

  label {
    display: flex;
  }

  // hide input radio
  input[type='radio'] {
    position: absolute;
    z-index: -1;
    opacity: 0;
  }
}