Skip to content

Product Rating

Styles for a product rating used in product_rating module.

Structurally .product-rating element contains following elements:

  • .product-rating__content
  • .product-rating__stars
  • .product-rating__score
  • .product-rating__number-of-votes
  • .product-rating__vote-link
  • .product-rating__no-vote

LESS

You can modify any product rating less variable in your User Less section to change product rating styles.

Product Rating variables

Variables used to style a product rating.

@productRatingFontSize: @fontSizeInPxXS;
@productRatingGap: 0.5rem;

If you want to change product rating styles, you can just change the variables. To change default font-size of the product rating just modify @productRatingFontSize variable.

@productRatingFontSize: 20;

Product Rating styles

Standard product rating styles.

.product-rating {
    &__content {
        display: flex;
        align-items: center;
        gap: @productRatingGap;
    }

    &__score {
        .weight-semibold();
    }

    &__score,
    &__number-of-votes,
    &__vote-link,
    &__no-vote {
        .font-size(@productRatingFontSize);
    }
}

Modules reference