Ratings

<span class="stars" role="img" aria-label="4 out of 5"><svg class="icon on" viewBox="0 0 24 24" aria-hidden="true">…</svg><svg class="icon on" viewBox="0 0 24 24" aria-hidden="true">…</svg><svg class="icon on" viewBox="0 0 24 24" aria-hidden="true">…</svg><svg class="icon on" viewBox="0 0 24 24" aria-hidden="true">…</svg><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></span>
<span class="stars stars-lg" role="img" aria-label="5 out of 5"><svg class="icon on" viewBox="0 0 24 24" aria-hidden="true">…</svg><svg class="icon on" viewBox="0 0 24 24" aria-hidden="true">…</svg><svg class="icon on" viewBox="0 0 24 24" aria-hidden="true">…</svg><svg class="icon on" viewBox="0 0 24 24" aria-hidden="true">…</svg><svg class="icon on" viewBox="0 0 24 24" aria-hidden="true">…</svg></span>
<span class="fs-sm muted">4.6 from 901 reviews</span>

<div class="rating-field">
  <div class="rating-input" role="radiogroup" aria-label="Your rating" data-value="3">
    <button type="button" role="radio" aria-checked="false" aria-label="1 star" data-on="true" data-value="1"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></button><button type="button" role="radio" aria-checked="false" aria-label="2 stars" data-on="true" data-value="2"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></button><button type="button" role="radio" aria-checked="true" aria-label="3 stars" data-on="true" data-value="3"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></button><button type="button" role="radio" aria-checked="false" aria-label="4 stars" data-on="false" data-value="4"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></button><button type="button" role="radio" aria-checked="false" aria-label="5 stars" data-on="false" data-value="5"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></button>
  </div>
  <span class="rating-caption" aria-live="polite" data-max="5">3 of 5</span>
</div>