<ul class="rating">
    <li class="rating__star rating__star--star-full">
        <svg class="icon icon--star-full">
  <use xlink:href="/assets/icons/icons.svg#star-full"></use>
</svg>

    </li>
    <li class="rating__star rating__star--star-full">
        <svg class="icon icon--star-full">
  <use xlink:href="/assets/icons/icons.svg#star-full"></use>
</svg>

    </li>
    <li class="rating__star rating__star--star-full">
        <svg class="icon icon--star-full">
  <use xlink:href="/assets/icons/icons.svg#star-full"></use>
</svg>

    </li>
    <li class="rating__star rating__star--star-full">
        <svg class="icon icon--star-full">
  <use xlink:href="/assets/icons/icons.svg#star-full"></use>
</svg>

    </li>
    <li class="rating__star rating__star--star-empty">
        <svg class="icon icon--star-empty">
  <use xlink:href="/assets/icons/icons.svg#star-empty"></use>
</svg>

    </li>
</ul>
<ul class="rating">
  {{#each rating}}
  <li class="rating__star rating__star--{{this}}">
    {{render (dynamicVariant 'icons' this)}}
  </li>
  {{/each}}
</ul>
{
  "rating": [
    "star-full",
    "star-full",
    "star-full",
    "star-full",
    "star-empty"
  ]
}
  • Content:
    // Note:
    //
    // `.card__rating` and `.card__rating-star` styles should not be removed
    // without verifying that these classes are no longer in use on Prod in the
    // @card component.
    .card__rating-star,
    .rating__star {
      display: inline-block;
      margin: 0 5px;
    }
    
    .card__rating,
    .rating {
      @include reset-list;
      text-align: center;
    }
    
  • URL: /components/raw/rating/rating.scss
  • Filesystem Path: src/components/01-elements/rating/rating.scss
  • Size: 334 Bytes

There are no notes for this item.