Rating

Beta Added in 2.0.0

Display a star rating.

Usage

To apply this component, add the .gls-rating class to a block element.

<div class="gls-rating" style="--rating: 4.5" aria-label="Rating: 4.5 out of 5">
    <span aria-hidden="true">★★★★★</span>
</div>

<div class="gls-rating" style="--rating: 4.5" aria-label="Rating: 4.5 out of 5">
    <span aria-hidden="true">★★★★★</span>
</div>

Guidelines

When To Use

To give users a quick evaluation

Size modifiers

You can apply different size modifiers to ratings that will decrease or increase their font size.

Class	Description
`.gls-rating-small`	Add this class to apply a smaller font size.
`.gls-rating-large`	Add this class to apply a larger font size.

<div class="gls-rating gls-rating-small"></div>

<div class="gls-rating gls-rating-large"></div>

<div class="gls-child-width-1-2@s" gls-grid>
    <div>
        <div class="gls-rating gls-rating-small" style="--rating: 4" aria-label="Rating: 4.0 out of 5">
            <span aria-hidden="true">★★★★★</span>
        </div>
    </div>
    <div>
        <div class="gls-rating gls-rating-large" style="--rating: 2" aria-label="Rating: 2.0 out of 5">
            <span aria-hidden="true">★★★★★</span>
        </div>
    </div>
</div>

Custom shapes

To use another shape, just fill the span with the unicode character of your choice.

<div class="gls-rating" style="--rating: 3.2" aria-label="Rating: 3.2 out of 5">
    <span aria-hidden="true">❤❤❤❤❤</span>
</div>