Star rating display

4.5 out of 5 (128 reviews)

How to use it

Use to show an existing average rating next to a product, course or place. Change the visible number and review count, and redraw the stars to match (full, half or outline). Do not use it to collect a rating -- that needs a group of radio buttons labelled 1 to 5 -- and link the review count to the reviews section if there is one.

Accessibility

The five SVG stars sit in one aria-hidden wrapper, and the rating is real text -- "4.5 out of 5" followed by "(128 reviews)" -- so screen readers read the score once, in words, instead of five unnamed images. It is display only: nothing is focusable and nothing pretends to be an input. The text #0f172a on white is 17.9:1 and the review count #475569 is 7.6:1; the amber stars (#b45309) have 5.0:1 against white, above the 3:1 needed for graphics.

Source (copy-ready)

Copy code

<p class="dcl-stars">
  <span class="dcl-stars__icons" aria-hidden="true"><svg class="dcl-stars__star" viewBox="0 0 24 24" focusable="false"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01z" fill="#b45309"/></svg><svg class="dcl-stars__star" viewBox="0 0 24 24" focusable="false"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01z" fill="#b45309"/></svg><svg class="dcl-stars__star" viewBox="0 0 24 24" focusable="false"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01z" fill="#b45309"/></svg><svg class="dcl-stars__star" viewBox="0 0 24 24" focusable="false"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01z" fill="#b45309"/></svg><svg class="dcl-stars__star" viewBox="0 0 24 24" focusable="false"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01z" fill="#ffffff" stroke="#b45309" stroke-width="1.5"/><path d="M12 2L8.91 8.26 2 9.27l5 4.87-1.18 6.88L12 17.77z" fill="#b45309"/></svg></span>
  <span class="dcl-stars__score">4.5 out of 5</span>
  <span class="dcl-stars__count">(128 reviews)</span>
</p>
<style>
.dcl-stars { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; margin: 0; font: inherit; color: #0f172a; background-color: #ffffff; }
.dcl-stars__icons { display: inline-flex; gap: 0.125rem; }
.dcl-stars__star { width: 1.25rem; height: 1.25rem; flex: none; }
.dcl-stars__score { font-weight: 600; color: #0f172a; background-color: #ffffff; }
.dcl-stars__count { font-size: 0.875rem; color: #475569; background-color: #ffffff; }
</style>