Components
Star Rating
A rating display with partial fill — stars, hearts, circles or bars.
Live demo
See it in action
Stars — 4.5 / 5, with a label and review count
Hearts — 5 / 5
Bar — 3.5 / 5
The markup
Clean, lean code
This is the exact HTML the element outputs, straight from the page builder. No wrapper soup, no inline-style bloat.
<section>
<div class="fw-container">
<div class="fw-row">
<div class="fw-col-12">
<div class="sc-sr-showcase">
<p class="sc-spec-label">Stars — 4.5 / 5, with a label and review count</p>
<div class="star-rating sr-58a28e03 fw-sr fw-sr--design-star design-star fw-sr--size-lg text-center" role="img" aria-label="Rated 4.5 out of 5">
<span class="fw-sr__label">Excellent</span>
<span class="fw-sr__symbols"><span class="fw-sr__sym"><span class="fw-sr__sym-empty"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 .9l3.4 6.9 7.6 1.1-5.5 5.4 1.3 7.6L12 18.9l-6.8 3.6 1.3-7.6L1 9.9l7.6-1.1z"/></svg></span><span class="fw-sr__sym-fill" style="width:100%;"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 .9l3.4 6.9 7.6 1.1-5.5 5.4 1.3 7.6L12 18.9l-6.8 3.6 1.3-7.6L1 9.9l7.6-1.1z"/></svg></span></span><span class="fw-sr__sym"><span class="fw-sr__sym-empty"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 .9l3.4 6.9 7.6 1.1-5.5 5.4 1.3 7.6L12 18.9l-6.8 3.6 1.3-7.6L1 9.9l7.6-1.1z"/></svg></span><span class="fw-sr__sym-fill" style="width:100%;"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 .9l3.4 6.9 7.6 1.1-5.5 5.4 1.3 7.6L12 18.9l-6.8 3.6 1.3-7.6L1 9.9l7.6-1.1z"/></svg></span></span><span class="fw-sr__sym"><span class="fw-sr__sym-empty"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 .9l3.4 6.9 7.6 1.1-5.5 5.4 1.3 7.6L12 18.9l-6.8 3.6 1.3-7.6L1 9.9l7.6-1.1z"/></svg></span><span class="fw-sr__sym-fill" style="width:100%;"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 .9l3.4 6.9 7.6 1.1-5.5 5.4 1.3 7.6L12 18.9l-6.8 3.6 1.3-7.6L1 9.9l7.6-1.1z"/></svg></span></span><span class="fw-sr__sym"><span class="fw-sr__sym-empty"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 .9l3.4 6.9 7.6 1.1-5.5 5.4 1.3 7.6L12 18.9l-6.8 3.6 1.3-7.6L1 9.9l7.6-1.1z"/></svg></span><span class="fw-sr__sym-fill" style="width:100%;"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 .9l3.4 6.9 7.6 1.1-5.5 5.4 1.3 7.6L12 18.9l-6.8 3.6 1.3-7.6L1 9.9l7.6-1.1z"/></svg></span></span><span class="fw-sr__sym"><span class="fw-sr__sym-empty"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 .9l3.4 6.9 7.6 1.1-5.5 5.4 1.3 7.6L12 18.9l-6.8 3.6 1.3-7.6L1 9.9l7.6-1.1z"/></svg></span><span class="fw-sr__sym-fill" style="width:50%;"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 .9l3.4 6.9 7.6 1.1-5.5 5.4 1.3 7.6L12 18.9l-6.8 3.6 1.3-7.6L1 9.9l7.6-1.1z"/></svg></span></span></span>
<span class="fw-sr__value">4.5/5</span>
<span class="fw-sr__count">based on 220 reviews</span>
</div>
<p class="sc-spec-label">Hearts — 5 / 5</p>
<div class="star-rating sr-4c128f6b fw-sr fw-sr--design-heart design-heart fw-sr--size-lg text-center" role="img" aria-label="Rated 5 out of 5">
<span class="fw-sr__symbols"><span class="fw-sr__sym"><span class="fw-sr__sym-empty"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 21s-7.5-4.6-10-8.7C.6 9.7 2.3 6 5.7 6 8 6 9.4 7.4 12 9c2.6-1.6 4-3 6.3-3 3.4 0 5.1 3.7 3.7 6.3C19.5 16.4 12 21 12 21z"/></svg></span><span class="fw-sr__sym-fill" style="width:100%;"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 21s-7.5-4.6-10-8.7C.6 9.7 2.3 6 5.7 6 8 6 9.4 7.4 12 9c2.6-1.6 4-3 6.3-3 3.4 0 5.1 3.7 3.7 6.3C19.5 16.4 12 21 12 21z"/></svg></span></span><span class="fw-sr__sym"><span class="fw-sr__sym-empty"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 21s-7.5-4.6-10-8.7C.6 9.7 2.3 6 5.7 6 8 6 9.4 7.4 12 9c2.6-1.6 4-3 6.3-3 3.4 0 5.1 3.7 3.7 6.3C19.5 16.4 12 21 12 21z"/></svg></span><span class="fw-sr__sym-fill" style="width:100%;"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 21s-7.5-4.6-10-8.7C.6 9.7 2.3 6 5.7 6 8 6 9.4 7.4 12 9c2.6-1.6 4-3 6.3-3 3.4 0 5.1 3.7 3.7 6.3C19.5 16.4 12 21 12 21z"/></svg></span></span><span class="fw-sr__sym"><span class="fw-sr__sym-empty"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 21s-7.5-4.6-10-8.7C.6 9.7 2.3 6 5.7 6 8 6 9.4 7.4 12 9c2.6-1.6 4-3 6.3-3 3.4 0 5.1 3.7 3.7 6.3C19.5 16.4 12 21 12 21z"/></svg></span><span class="fw-sr__sym-fill" style="width:100%;"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 21s-7.5-4.6-10-8.7C.6 9.7 2.3 6 5.7 6 8 6 9.4 7.4 12 9c2.6-1.6 4-3 6.3-3 3.4 0 5.1 3.7 3.7 6.3C19.5 16.4 12 21 12 21z"/></svg></span></span><span class="fw-sr__sym"><span class="fw-sr__sym-empty"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 21s-7.5-4.6-10-8.7C.6 9.7 2.3 6 5.7 6 8 6 9.4 7.4 12 9c2.6-1.6 4-3 6.3-3 3.4 0 5.1 3.7 3.7 6.3C19.5 16.4 12 21 12 21z"/></svg></span><span class="fw-sr__sym-fill" style="width:100%;"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 21s-7.5-4.6-10-8.7C.6 9.7 2.3 6 5.7 6 8 6 9.4 7.4 12 9c2.6-1.6 4-3 6.3-3 3.4 0 5.1 3.7 3.7 6.3C19.5 16.4 12 21 12 21z"/></svg></span></span><span class="fw-sr__sym"><span class="fw-sr__sym-empty"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 21s-7.5-4.6-10-8.7C.6 9.7 2.3 6 5.7 6 8 6 9.4 7.4 12 9c2.6-1.6 4-3 6.3-3 3.4 0 5.1 3.7 3.7 6.3C19.5 16.4 12 21 12 21z"/></svg></span><span class="fw-sr__sym-fill" style="width:100%;"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 21s-7.5-4.6-10-8.7C.6 9.7 2.3 6 5.7 6 8 6 9.4 7.4 12 9c2.6-1.6 4-3 6.3-3 3.4 0 5.1 3.7 3.7 6.3C19.5 16.4 12 21 12 21z"/></svg></span></span></span>
<span class="fw-sr__value">5/5</span>
</div>
<p class="sc-spec-label">Bar — 3.5 / 5</p>
<div class="star-rating sr-abd78e71 fw-sr fw-sr--design-bar design-bar fw-sr--size-lg text-center" role="img" aria-label="Rated 3.5 out of 5">
<span class="fw-sr__symbols"><span class="fw-sr__bar" style="width:70%;"></span></span>
<span class="fw-sr__value">3.5/5</span>
</div>
</div>
</div>
</div>
</div>
</section>To learn more about the Star Rating shortcode, please check out the online manual here.
Free & open source
Build with this element, free.
Install the framework and the Bootstrap 5 theme, then drag this element into any page.