Skip to content

Rating

Examples for the ss-c-rating module.

Default

HTML
<div class="ss-c-rating" role="radiogroup" aria-label="Rating">
            <input type="radio" name="r1" value="5" aria-label="5 stars"><input type="radio" name="r1" value="4" aria-label="4 stars">
            <input type="radio" name="r1" value="3" aria-label="3 stars" checked><input type="radio" name="r1" value="2" aria-label="2 stars"><input type="radio" name="r1" value="1" aria-label="1 star">
        </div>

Sizes

HTML
<div class="ss-c-rating ss-c-rating--xs" role="radiogroup" aria-label="Rating (xs)"><input type="radio" name="rs-xs" value="3" aria-label="3 stars" checked><input type="radio" name="rs-xs" value="2" aria-label="2 stars"><input type="radio" name="rs-xs" value="1" aria-label="1 star"></div>
        <div class="ss-c-rating ss-c-rating--sm" role="radiogroup" aria-label="Rating (sm)"><input type="radio" name="rs-sm" value="3" aria-label="3 stars" checked><input type="radio" name="rs-sm" value="2" aria-label="2 stars"><input type="radio" name="rs-sm" value="1" aria-label="1 star"></div>
        <div class="ss-c-rating ss-c-rating--lg" role="radiogroup" aria-label="Rating (lg)"><input type="radio" name="rs-lg" value="3" aria-label="3 stars" checked><input type="radio" name="rs-lg" value="2" aria-label="2 stars"><input type="radio" name="rs-lg" value="1" aria-label="1 star"></div>
        <div class="ss-c-rating ss-c-rating--xl" role="radiogroup" aria-label="Rating (xl)"><input type="radio" name="rs-xl" value="3" aria-label="3 stars" checked><input type="radio" name="rs-xl" value="2" aria-label="2 stars"><input type="radio" name="rs-xl" value="1" aria-label="1 star"></div>