Open demo

CSS code

HTML 
<div><span class="lbl">Summary with a link per star</span>
<section class="su su-card" aria-labelledby="su-kettle">
  <div class="su-split">
    <div>
      <h2 id="su-kettle">Customer reviews</h2>
      <div class="su-avg"><b><span class="sr-only">Rated </span>4.6<span class="sr-only"> out of 5</span></b>
        <div><span class="su-stars" style="--r:4.6" aria-hidden="true"></span><small>Based on 2,318 reviews</small></div></div>
      <p class="su-rec"><svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="10" cy="10" r="8"/><path d="M6.5 10.2l2.4 2.3 4.6-4.8"/></svg><span><b>94%</b> would recommend it to a friend</span></p>
      <div class="su-cta"><p>Own the Larkspur Pour-Over Kettle? Tell other buyers what it is like.</p>
        <a class="su-btn" href="#write-review">Write a review</a></div>
    </div>
    <div>
      <ul class="su-dist" aria-label="Filter reviews by rating">
        <li><a href="#reviews-5"><span class="su-name"><span class="sr-only">Show </span>5 stars</span><span class="su-bar" aria-hidden="true"><i style="--w:71%"></i></span><span class="su-num">1,642<span class="sr-only"> reviews</span></span></a></li>
        <li><a href="#reviews-4"><span class="su-name"><span class="sr-only">Show </span>4 stars</span><span class="su-bar" aria-hidden="true"><i style="--w:18%"></i></span><span class="su-num">418<span class="sr-only"> reviews</span></span></a></li>
        <li><a href="#reviews-3"><span class="su-name"><span class="sr-only">Show </span>3 stars</span><span class="su-bar" aria-hidden="true"><i style="--w:6%"></i></span><span class="su-num">139<span class="sr-only"> reviews</span></span></a></li>
        <li><a href="#reviews-2"><span class="su-name"><span class="sr-only">Show </span>2 stars</span><span class="su-bar" aria-hidden="true"><i style="--w:3%"></i></span><span class="su-num">71<span class="sr-only"> reviews</span></span></a></li>
        <li><a href="#reviews-1"><span class="su-name"><span class="sr-only">Show </span>1 star</span><span class="su-bar" aria-hidden="true"><i style="--w:2%"></i></span><span class="su-num">48<span class="sr-only"> reviews</span></span></a></li>
      </ul>
      <p class="su-hint">Select a row to see only those reviews.</p>
    </div>
  </div>
</section></div>

<div><span class="lbl">Scores by category</span>
<section class="su su-card" aria-labelledby="su-course">
  <div class="su-head">
    <div class="su-overall"><b aria-hidden="true">4.8</b>
      <div><h2 id="su-course">Course rating</h2><p><span class="sr-only">Rated 4.8 out of 5 overall, </span><span class="su-stars" style="--r:4.8;--s:16px;vertical-align:-2px" aria-hidden="true"></span> 642 learners</p></div></div>
    <a class="su-btn su-ghost" href="#rate-course">Rate this course</a>
  </div>
  <ul class="su-cats" role="list">
    <li class="su-cat"><span>Content quality</span><b>4.9<span class="sr-only"> out of 5</span></b><span class="su-bar" aria-hidden="true"><i style="--w:98%"></i></span></li>
    <li class="su-cat"><span>Instructor</span><b>4.9<span class="sr-only"> out of 5</span></b><span class="su-bar" aria-hidden="true"><i style="--w:98%"></i></span></li>
    <li class="su-cat"><span>Exercises</span><b>4.6<span class="sr-only"> out of 5</span></b><span class="su-bar" aria-hidden="true"><i style="--w:92%"></i></span></li>
    <li class="su-cat"><span>Pace</span><b>4.4<span class="sr-only"> out of 5</span></b><span class="su-bar" aria-hidden="true"><i style="--w:88%"></i></span></li>
    <li class="su-cat"><span>Value for money</span><b>4.5<span class="sr-only"> out of 5</span></b><span class="su-bar" aria-hidden="true"><i style="--w:90%"></i></span></li>
    <li class="su-cat"><span>Certificate</span><b>4.7<span class="sr-only"> out of 5</span></b><span class="su-bar" aria-hidden="true"><i style="--w:94%"></i></span></li>
  </ul>
</section></div>

<div><span class="lbl">Compact strip with a histogram</span>
<section class="su su-card su-strip" aria-label="Ratings for the Fieldnote app">
  <b><span class="sr-only">Rated </span>4.2<span class="sr-only"> out of 5</span></b>
  <div><span class="su-stars" style="--r:4.2;--s:18px" aria-hidden="true"></span><small>386 reviews</small></div>
  <div class="su-hist" aria-hidden="true"><span><i style="--h:100%"></i>5</span><span><i style="--h:42%"></i>4</span><span><i style="--h:16%"></i>3</span><span><i style="--h:8%"></i>2</span><span><i style="--h:12%"></i>1</span></div>
  <p class="sr-only">5 stars: 212 reviews. 4 stars: 89. 3 stars: 34. 2 stars: 17. 1 star: 26.</p>
  <a class="su-btn" href="#write-review">Write a review</a>
</section></div>
CSS 
/* Rating summaries. Every number is text: the average reads "Rated 4.6 out of 5", each bar row states its count,
   and the bars and stars are aria-hidden drawings of numbers that are already written out. */
.su{--su-on:#f59e0b;--su-off:#ddd7ce;--su-track:#efebe4;--su-bar:#f59e0b;--su-ink:#1f2328;--su-muted:#5b616e;--su-line:#e8e3da;--su-focus:#1d4ed8;
  --su-btn:#1f2328;--su-star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M9.05 2.93c.3-.92 1.6-.92 1.9 0l1.07 3.29a1 1 0 0 0 .95.69h3.46c.97 0 1.37 1.24.59 1.81l-2.8 2.03a1 1 0 0 0-.36 1.12l1.07 3.3c.3.91-.76 1.68-1.54 1.11l-2.8-2.03a1 1 0 0 0-1.18 0l-2.8 2.03c-.78.57-1.84-.2-1.54-1.11l1.07-3.3a1 1 0 0 0-.36-1.12L2.98 8.72c-.78-.57-.38-1.81.59-1.81h3.46a1 1 0 0 0 .95-.69z'/%3E%3C/svg%3E");
  color:var(--su-ink)}
.su .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.su-stars{--r:0;--s:20px;--fill:calc(var(--r) * 20%);flex:none;display:inline-block;width:calc(var(--s) * 5);height:var(--s);
  background:linear-gradient(90deg,var(--su-on) var(--fill),var(--su-off) 0);
  -webkit-mask:var(--su-star) 0 0/var(--s) var(--s) repeat-x;mask:var(--su-star) 0 0/var(--s) var(--s) repeat-x}
@supports (width:round(down,4.3px,1px)) and (width:mod(4.3px,1px)){.su-stars{--fill:calc((round(down,var(--r),1) + .12 + mod(var(--r),1) * .76) * 20%)}}
.su-card{padding:28px;background:#fff;border:1px solid var(--su-line);border-radius:22px}
.su h2{margin:0;font-size:1.15rem;font-weight:800}
.su-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;border-radius:12px;background:var(--su-btn);color:#fff;
  font-weight:700;font-size:.95rem;text-decoration:none;transition:background .15s}
.su-btn:hover{background:#3a4049}
.su-btn:focus-visible,.su a:focus-visible{outline:3px solid var(--su-focus);outline-offset:3px}
.su-bar{display:block;height:10px;border-radius:99px;background:var(--su-track);overflow:hidden}
.su-bar i{display:block;height:100%;width:var(--w);border-radius:inherit;background:var(--su-bar)}

/* 1 — summary with a bar per star that links to those reviews */
.su-split{display:grid;gap:28px;grid-template-columns:minmax(0,1fr)}
@media (min-width:720px){.su-split{grid-template-columns:260px minmax(0,1fr);gap:40px}}
.su-avg{display:flex;align-items:center;gap:14px;margin-top:16px}
.su-avg b{font-size:3.2rem;line-height:1;font-weight:800;letter-spacing:-.04em}
.su-avg small{display:block;margin-top:6px;font-size:.88rem;color:var(--su-muted)}
.su-rec{display:flex;align-items:center;gap:8px;margin-top:18px;font-size:.92rem}
.su-rec svg{flex:none;width:20px;height:20px;color:#15803d}
.su-cta{margin-top:22px;padding-top:22px;border-top:1px solid var(--su-line)}
.su-cta p{margin:0 0 14px;font-size:.92rem;color:var(--su-muted)}
.su-cta .su-btn{width:100%}
.su-dist{list-style:none;margin:0;padding:0;display:grid;gap:4px;align-content:center}
.su-dist a{display:grid;grid-template-columns:4.4em minmax(0,1fr) 5ch;align-items:center;gap:14px;padding:9px 12px;border-radius:10px;
  color:var(--su-ink);text-decoration:none;font-size:.92rem;font-variant-numeric:tabular-nums;transition:background .15s}
.su-dist a:hover{background:#f6f3ee}
.su-dist a:hover .su-name{text-decoration:underline;text-underline-offset:3px}
.su-dist .su-num{text-align:right;color:var(--su-muted)}
.su-hint{margin:10px 12px 0;font-size:.84rem;color:var(--su-muted)}

/* 2 — scores by category */
.su-cats{list-style:none;padding:0;display:grid;gap:18px 36px;grid-template-columns:minmax(0,1fr);margin-top:24px}
@media (min-width:640px){.su-cats{grid-template-columns:1fr 1fr}}
.su-cat{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;align-items:center;font-size:.92rem}
.su-cat .su-bar{grid-column:1/-1;height:8px}
.su-cat b{font-variant-numeric:tabular-nums}
.su-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px}
.su-overall{display:flex;align-items:center;gap:14px}
.su-overall>b{display:grid;place-items:center;width:64px;height:64px;border-radius:16px;background:var(--su-btn);color:#fff;font-size:1.6rem;font-weight:800}
.su-overall p{margin:4px 0 0;font-size:.88rem;color:var(--su-muted)}
.su-ghost{background:#fff;color:var(--su-ink);box-shadow:inset 0 0 0 1.5px var(--su-ink)}
.su-ghost:hover{background:#f6f3ee}

/* 3 — compact strip with a mini histogram */
.su-strip{display:flex;flex-wrap:wrap;align-items:center;gap:18px 26px;padding:20px 24px}
.su-strip>b{font-size:2.6rem;line-height:1;font-weight:800;letter-spacing:-.04em}
.su-strip small{display:block;margin-top:5px;font-size:.86rem;color:var(--su-muted)}
.su-hist{display:flex;align-items:flex-end;gap:6px;height:56px;padding-left:22px;border-left:1px solid var(--su-line)}
.su-hist span{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;height:100%;font-size:.72rem;color:var(--su-muted)}
.su-hist i{display:block;width:14px;height:var(--h);min-height:3px;border-radius:4px 4px 2px 2px;background:var(--su-bar)}
.su-strip .su-btn{margin-left:auto}
@media (max-width:560px){.su-card{padding:22px 18px}.su-strip .su-btn{margin-left:0;width:100%}.su-hist{padding-left:0;border-left:0}}
@media (prefers-reduced-motion:reduce){.su-btn,.su-dist a{transition:none}}

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS

HTML 
<div><span class="lbl">Summary with a link per star</span>
<section class="su su-card card" aria-labelledby="su-kettle">
  <div class="row gx-5 gy-4">
    <div class="col-md-4">
      <h2 id="su-kettle">Customer reviews</h2>
      <div class="su-avg"><b><span class="visually-hidden">Rated </span>4.6<span class="visually-hidden"> out of 5</span></b>
        <div><span class="su-stars" style="--r:4.6" aria-hidden="true"></span><small>Based on 2,318 reviews</small></div></div>
      <p class="su-rec"><svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="10" cy="10" r="8"/><path d="M6.5 10.2l2.4 2.3 4.6-4.8"/></svg><span><b>94%</b> would recommend it to a friend</span></p>
      <div class="su-cta"><p>Own the Larkspur Pour-Over Kettle? Tell other buyers what it is like.</p>
        <a class="btn btn-dark w-100" href="#write-review">Write a review</a></div>
    </div>
    <div class="col-md-8 d-flex flex-column justify-content-center">
      <ul class="su-dist list-unstyled m-0" aria-label="Filter reviews by rating">
        <li><a href="#reviews-5"><span class="su-name"><span class="visually-hidden">Show </span>5 stars</span><span class="progress" aria-hidden="true"><span class="progress-bar" style="width:71%"></span></span><span class="su-num">1,642<span class="visually-hidden"> reviews</span></span></a></li>
        <li><a href="#reviews-4"><span class="su-name"><span class="visually-hidden">Show </span>4 stars</span><span class="progress" aria-hidden="true"><span class="progress-bar" style="width:18%"></span></span><span class="su-num">418<span class="visually-hidden"> reviews</span></span></a></li>
        <li><a href="#reviews-3"><span class="su-name"><span class="visually-hidden">Show </span>3 stars</span><span class="progress" aria-hidden="true"><span class="progress-bar" style="width:6%"></span></span><span class="su-num">139<span class="visually-hidden"> reviews</span></span></a></li>
        <li><a href="#reviews-2"><span class="su-name"><span class="visually-hidden">Show </span>2 stars</span><span class="progress" aria-hidden="true"><span class="progress-bar" style="width:3%"></span></span><span class="su-num">71<span class="visually-hidden"> reviews</span></span></a></li>
        <li><a href="#reviews-1"><span class="su-name"><span class="visually-hidden">Show </span>1 star</span><span class="progress" aria-hidden="true"><span class="progress-bar" style="width:2%"></span></span><span class="su-num">48<span class="visually-hidden"> reviews</span></span></a></li>
      </ul>
      <p class="su-hint">Select a row to see only those reviews.</p>
    </div>
  </div>
</section></div>

<div><span class="lbl">Scores by category</span>
<section class="su su-card card" aria-labelledby="su-course">
  <div class="d-flex flex-wrap align-items-center justify-content-between gap-3">
    <div class="su-overall"><b aria-hidden="true">4.8</b>
      <div><h2 id="su-course">Course rating</h2><p><span class="visually-hidden">Rated 4.8 out of 5 overall, </span><span class="su-stars" style="--r:4.8;--s:16px;vertical-align:-2px" aria-hidden="true"></span> 642 learners</p></div></div>
    <a class="btn btn-outline-dark" href="#rate-course">Rate this course</a>
  </div>
  <ul class="su-cats row row-cols-1 row-cols-sm-2 list-unstyled mb-0" role="list">
    <li class="col"><div class="su-cat"><span>Content quality</span><b>4.9<span class="visually-hidden"> out of 5</span></b><span class="progress" aria-hidden="true"><span class="progress-bar" style="width:98%"></span></span></div></li>
    <li class="col"><div class="su-cat"><span>Instructor</span><b>4.9<span class="visually-hidden"> out of 5</span></b><span class="progress" aria-hidden="true"><span class="progress-bar" style="width:98%"></span></span></div></li>
    <li class="col"><div class="su-cat"><span>Exercises</span><b>4.6<span class="visually-hidden"> out of 5</span></b><span class="progress" aria-hidden="true"><span class="progress-bar" style="width:92%"></span></span></div></li>
    <li class="col"><div class="su-cat"><span>Pace</span><b>4.4<span class="visually-hidden"> out of 5</span></b><span class="progress" aria-hidden="true"><span class="progress-bar" style="width:88%"></span></span></div></li>
    <li class="col"><div class="su-cat"><span>Value for money</span><b>4.5<span class="visually-hidden"> out of 5</span></b><span class="progress" aria-hidden="true"><span class="progress-bar" style="width:90%"></span></span></div></li>
    <li class="col"><div class="su-cat"><span>Certificate</span><b>4.7<span class="visually-hidden"> out of 5</span></b><span class="progress" aria-hidden="true"><span class="progress-bar" style="width:94%"></span></span></div></li>
  </ul>
</section></div>

<div><span class="lbl">Compact strip with a histogram</span>
<section class="su su-card su-strip card flex-row" aria-label="Ratings for the Fieldnote app">
  <b><span class="visually-hidden">Rated </span>4.2<span class="visually-hidden"> out of 5</span></b>
  <div><span class="su-stars" style="--r:4.2;--s:18px" aria-hidden="true"></span><small>386 reviews</small></div>
  <div class="su-hist" aria-hidden="true"><span><i style="--h:100%"></i>5</span><span><i style="--h:42%"></i>4</span><span><i style="--h:16%"></i>3</span><span><i style="--h:8%"></i>2</span><span><i style="--h:12%"></i>1</span></div>
  <p class="visually-hidden">5 stars: 212 reviews. 4 stars: 89. 3 stars: 34. 2 stars: 17. 1 star: 26.</p>
  <a class="btn btn-dark" href="#write-review">Write a review</a>
</section></div>
CSS 
/* Rating summaries on Bootstrap: .card, the grid, .progress for the bars and .btn for the calls to action. Every number is text: the average reads "Rated 4.6 out of 5", each bar row states its count,
   and the bars and stars are aria-hidden drawings of numbers that are already written out. */
.su{--su-on:#f59e0b;--su-off:#ddd7ce;--su-track:#efebe4;--su-bar:#f59e0b;--su-ink:#1f2328;--su-muted:#5b616e;--su-line:#e8e3da;--su-focus:#1d4ed8;
  --su-btn:#1f2328;--su-star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M9.05 2.93c.3-.92 1.6-.92 1.9 0l1.07 3.29a1 1 0 0 0 .95.69h3.46c.97 0 1.37 1.24.59 1.81l-2.8 2.03a1 1 0 0 0-.36 1.12l1.07 3.3c.3.91-.76 1.68-1.54 1.11l-2.8-2.03a1 1 0 0 0-1.18 0l-2.8 2.03c-.78.57-1.84-.2-1.54-1.11l1.07-3.3a1 1 0 0 0-.36-1.12L2.98 8.72c-.78-.57-.38-1.81.59-1.81h3.46a1 1 0 0 0 .95-.69z'/%3E%3C/svg%3E");
  --bs-card-border-color:var(--su-line);--bs-card-border-radius:22px;--bs-card-color:var(--su-ink);color:var(--su-ink)}
.su p{margin-bottom:0}
.su-stars{--r:0;--s:20px;--fill:calc(var(--r) * 20%);flex:none;display:inline-block;width:calc(var(--s) * 5);height:var(--s);
  background:linear-gradient(90deg,var(--su-on) var(--fill),var(--su-off) 0);
  -webkit-mask:var(--su-star) 0 0/var(--s) var(--s) repeat-x;mask:var(--su-star) 0 0/var(--s) var(--s) repeat-x}
@supports (width:round(down,4.3px,1px)) and (width:mod(4.3px,1px)){.su-stars{--fill:calc((round(down,var(--r),1) + .12 + mod(var(--r),1) * .76) * 20%)}}
.su-card{padding:28px}
.su h2{margin:0;font-size:1.15rem;font-weight:800}
.su .btn{--bs-btn-padding-x:20px;--bs-btn-padding-y:12px;--bs-btn-font-size:.95rem;--bs-btn-font-weight:700;--bs-btn-line-height:normal;--bs-btn-border-radius:12px;--bs-btn-border-width:1.5px;
  --bs-btn-focus-box-shadow:none;transition:background-color .15s}
.su .btn-dark{--bs-btn-bg:var(--su-btn);--bs-btn-border-color:var(--su-btn);--bs-btn-hover-bg:#3a4049;--bs-btn-hover-border-color:#3a4049;--bs-btn-active-bg:#3a4049}
.su .btn-outline-dark{--bs-btn-color:var(--su-ink);--bs-btn-border-color:var(--su-ink);--bs-btn-hover-color:var(--su-ink);--bs-btn-hover-bg:#f6f3ee;--bs-btn-hover-border-color:var(--su-ink);--bs-btn-active-color:var(--su-ink);--bs-btn-active-bg:#efebe4}
.su .btn:focus-visible,.su a:focus-visible{outline:3px solid var(--su-focus);outline-offset:3px;box-shadow:none}
.su .progress{--bs-progress-height:10px;--bs-progress-bg:var(--su-track);--bs-progress-border-radius:99px;--bs-progress-bar-bg:var(--su-bar)}
.su .progress-bar{border-radius:inherit}

/* 1 — summary with a bar per star that links to those reviews */
.su-avg{display:flex;align-items:center;gap:14px;margin-top:16px}
.su-avg b{font-size:3.2rem;line-height:1;font-weight:800;letter-spacing:-.04em}
.su-avg small{display:block;margin-top:6px;font-size:.88rem;color:var(--su-muted)}
.su-rec{display:flex;align-items:center;gap:8px;margin-top:18px;font-size:.92rem}
.su-rec svg{flex:none;width:20px;height:20px;color:#15803d}
.su-cta{margin-top:22px;padding-top:22px;border-top:1px solid var(--su-line)}
.su-cta p{margin:0 0 14px;font-size:.92rem;color:var(--su-muted)}
.su-dist{display:grid;gap:4px}
.su-dist a{display:grid;grid-template-columns:4.4em minmax(0,1fr) 5ch;align-items:center;gap:14px;padding:9px 12px;border-radius:10px;
  color:var(--su-ink);text-decoration:none;font-size:.92rem;font-variant-numeric:tabular-nums;transition:background .15s}
.su-dist a:hover{background:#f6f3ee}
.su-dist a:hover .su-name{text-decoration:underline;text-underline-offset:3px}
.su-dist .su-num{text-align:right;color:var(--su-muted)}
.su-hint{margin:10px 12px 0;font-size:.84rem;color:var(--su-muted)}

/* 2 — scores by category */
.su-cats{--bs-gutter-x:36px;--bs-gutter-y:18px;margin-top:6px}
.su-cat{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;align-items:center;font-size:.92rem}
.su-cat .progress{grid-column:1/-1;--bs-progress-height:8px}
.su-cat b{font-variant-numeric:tabular-nums}
.su-overall{display:flex;align-items:center;gap:14px}
.su-overall>b{display:grid;place-items:center;width:64px;height:64px;border-radius:16px;background:var(--su-btn);color:#fff;font-size:1.6rem;font-weight:800}
.su-overall p{margin:4px 0 0;font-size:.88rem;color:var(--su-muted)}

/* 3 — compact strip with a mini histogram */
.su-strip{display:flex;flex-wrap:wrap;align-items:center;gap:18px 26px;padding:20px 24px}
.su-strip>b{font-size:2.6rem;line-height:1;font-weight:800;letter-spacing:-.04em}
.su-strip small{display:block;margin-top:5px;font-size:.86rem;color:var(--su-muted)}
.su-hist{display:flex;align-items:flex-end;gap:6px;height:56px;padding-left:22px;border-left:1px solid var(--su-line)}
.su-hist span{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;height:100%;font-size:.72rem;color:var(--su-muted)}
.su-hist i{display:block;width:14px;height:var(--h);min-height:3px;border-radius:4px 4px 2px 2px;background:var(--su-bar)}
.su-strip .btn{margin-left:auto}
@media (max-width:560px){.su-card{padding:22px 18px}.su-strip .btn{margin-left:0;width:100%}.su-hist{padding-left:0;border-left:0}}
@media (prefers-reduced-motion:reduce){.su .btn,.su-dist a{transition:none}}

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#5d6573] uppercase">Summary with a link per star</span>
<section class="rounded-[22px] border border-su-line bg-white p-[22px_18px] min-[561px]:p-7 text-su-ink" aria-labelledby="su-kettle">
  <div class="grid grid-cols-[minmax(0,1fr)] gap-7 min-[720px]:grid-cols-[260px_minmax(0,1fr)] min-[720px]:gap-10">
    <div>
      <h2 id="su-kettle" class="text-[1.15rem] font-extrabold">Customer reviews</h2>
      <div class="mt-4 flex items-center gap-3.5"><b class="text-[3.2rem] leading-none font-extrabold tracking-[-.04em]"><span class="sr-only">Rated </span>4.6<span class="sr-only"> out of 5</span></b>
        <div><span class="stars" style="--r:4.6" aria-hidden="true"></span><small class="mt-1.5 block text-[.88rem] text-su-muted">Based on 2,318 reviews</small></div></div>
      <p class="mt-[18px] flex items-center gap-2 text-[.92rem]"><svg class="size-5 flex-none text-[#15803d]" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="10" cy="10" r="8"/><path d="M6.5 10.2l2.4 2.3 4.6-4.8"/></svg><span><b>94%</b> would recommend it to a friend</span></p>
      <div class="mt-[22px] border-t border-su-line pt-[22px]"><p class="mb-3.5 text-[.92rem] text-su-muted">Own the Larkspur Pour-Over Kettle? Tell other buyers what it is like.</p>
        <a class="inline-flex items-center justify-center gap-2 rounded-xl bg-su-ink px-5 py-3 text-[.95rem] font-bold text-white no-underline transition-colors hover:bg-[#3a4049] motion-reduce:transition-none focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-su-focus w-full" href="#write-review">Write a review</a></div>
    </div>
    <div class="flex flex-col justify-center">
      <ul class="grid gap-1" aria-label="Filter reviews by rating">
        <li><a class="group grid grid-cols-[4.4em_minmax(0,1fr)_5ch] items-center gap-3.5 rounded-[10px] px-3 py-[9px] text-[.92rem] text-su-ink tabular-nums no-underline transition-colors hover:bg-[#f6f3ee] motion-reduce:transition-none focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-su-focus" href="#reviews-5"><span class="group-hover:underline group-hover:underline-offset-3"><span class="sr-only">Show </span>5 stars</span><span class="block h-2.5 overflow-hidden rounded-full bg-su-track" aria-hidden="true"><span class="block h-full rounded-full bg-su-on" style="width:71%"></span></span><span class="text-right text-su-muted">1,642<span class="sr-only"> reviews</span></span></a></li>
        <li><a class="group grid grid-cols-[4.4em_minmax(0,1fr)_5ch] items-center gap-3.5 rounded-[10px] px-3 py-[9px] text-[.92rem] text-su-ink tabular-nums no-underline transition-colors hover:bg-[#f6f3ee] motion-reduce:transition-none focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-su-focus" href="#reviews-4"><span class="group-hover:underline group-hover:underline-offset-3"><span class="sr-only">Show </span>4 stars</span><span class="block h-2.5 overflow-hidden rounded-full bg-su-track" aria-hidden="true"><span class="block h-full rounded-full bg-su-on" style="width:18%"></span></span><span class="text-right text-su-muted">418<span class="sr-only"> reviews</span></span></a></li>
        <li><a class="group grid grid-cols-[4.4em_minmax(0,1fr)_5ch] items-center gap-3.5 rounded-[10px] px-3 py-[9px] text-[.92rem] text-su-ink tabular-nums no-underline transition-colors hover:bg-[#f6f3ee] motion-reduce:transition-none focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-su-focus" href="#reviews-3"><span class="group-hover:underline group-hover:underline-offset-3"><span class="sr-only">Show </span>3 stars</span><span class="block h-2.5 overflow-hidden rounded-full bg-su-track" aria-hidden="true"><span class="block h-full rounded-full bg-su-on" style="width:6%"></span></span><span class="text-right text-su-muted">139<span class="sr-only"> reviews</span></span></a></li>
        <li><a class="group grid grid-cols-[4.4em_minmax(0,1fr)_5ch] items-center gap-3.5 rounded-[10px] px-3 py-[9px] text-[.92rem] text-su-ink tabular-nums no-underline transition-colors hover:bg-[#f6f3ee] motion-reduce:transition-none focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-su-focus" href="#reviews-2"><span class="group-hover:underline group-hover:underline-offset-3"><span class="sr-only">Show </span>2 stars</span><span class="block h-2.5 overflow-hidden rounded-full bg-su-track" aria-hidden="true"><span class="block h-full rounded-full bg-su-on" style="width:3%"></span></span><span class="text-right text-su-muted">71<span class="sr-only"> reviews</span></span></a></li>
        <li><a class="group grid grid-cols-[4.4em_minmax(0,1fr)_5ch] items-center gap-3.5 rounded-[10px] px-3 py-[9px] text-[.92rem] text-su-ink tabular-nums no-underline transition-colors hover:bg-[#f6f3ee] motion-reduce:transition-none focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-su-focus" href="#reviews-1"><span class="group-hover:underline group-hover:underline-offset-3"><span class="sr-only">Show </span>1 star</span><span class="block h-2.5 overflow-hidden rounded-full bg-su-track" aria-hidden="true"><span class="block h-full rounded-full bg-su-on" style="width:2%"></span></span><span class="text-right text-su-muted">48<span class="sr-only"> reviews</span></span></a></li>
      </ul>
      <p class="mx-3 mt-2.5 text-[.84rem] text-su-muted">Select a row to see only those reviews.</p>
    </div>
  </div>
</section></div>

<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#5d6573] uppercase">Scores by category</span>
<section class="rounded-[22px] border border-su-line bg-white p-[22px_18px] min-[561px]:p-7 text-su-ink" aria-labelledby="su-course">
  <div class="flex flex-wrap items-center justify-between gap-[18px]">
    <div class="flex items-center gap-3.5"><b class="grid size-16 place-items-center rounded-2xl bg-su-ink text-[1.6rem] font-extrabold text-white" aria-hidden="true">4.8</b>
      <div><h2 id="su-course" class="text-[1.15rem] font-extrabold">Course rating</h2><p class="mt-1 text-[.88rem] text-su-muted"><span class="sr-only">Rated 4.8 out of 5 overall, </span><span class="stars align-[-2px]" style="--r:4.8;--s:16px" aria-hidden="true"></span> 642 learners</p></div></div>
    <a class="inline-flex items-center justify-center gap-2 rounded-xl bg-white px-5 py-3 text-[.95rem] font-bold text-su-ink no-underline shadow-[inset_0_0_0_1.5px_#1f2328] transition-colors hover:bg-[#f6f3ee] motion-reduce:transition-none focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-su-focus" href="#rate-course">Rate this course</a>
  </div>
  <ul class="mt-6 grid grid-cols-1 gap-x-9 gap-y-[18px] sm:grid-cols-2" role="list">
    <li class="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-x-3 gap-y-2 text-[.92rem]"><span>Content quality</span><b class="tabular-nums">4.9<span class="sr-only"> out of 5</span></b><span class="col-span-full"><span class="block h-2 overflow-hidden rounded-full bg-su-track" aria-hidden="true"><span class="block h-full rounded-full bg-su-on" style="width:98%"></span></span></span></li>
    <li class="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-x-3 gap-y-2 text-[.92rem]"><span>Instructor</span><b class="tabular-nums">4.9<span class="sr-only"> out of 5</span></b><span class="col-span-full"><span class="block h-2 overflow-hidden rounded-full bg-su-track" aria-hidden="true"><span class="block h-full rounded-full bg-su-on" style="width:98%"></span></span></span></li>
    <li class="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-x-3 gap-y-2 text-[.92rem]"><span>Exercises</span><b class="tabular-nums">4.6<span class="sr-only"> out of 5</span></b><span class="col-span-full"><span class="block h-2 overflow-hidden rounded-full bg-su-track" aria-hidden="true"><span class="block h-full rounded-full bg-su-on" style="width:92%"></span></span></span></li>
    <li class="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-x-3 gap-y-2 text-[.92rem]"><span>Pace</span><b class="tabular-nums">4.4<span class="sr-only"> out of 5</span></b><span class="col-span-full"><span class="block h-2 overflow-hidden rounded-full bg-su-track" aria-hidden="true"><span class="block h-full rounded-full bg-su-on" style="width:88%"></span></span></span></li>
    <li class="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-x-3 gap-y-2 text-[.92rem]"><span>Value for money</span><b class="tabular-nums">4.5<span class="sr-only"> out of 5</span></b><span class="col-span-full"><span class="block h-2 overflow-hidden rounded-full bg-su-track" aria-hidden="true"><span class="block h-full rounded-full bg-su-on" style="width:90%"></span></span></span></li>
    <li class="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-x-3 gap-y-2 text-[.92rem]"><span>Certificate</span><b class="tabular-nums">4.7<span class="sr-only"> out of 5</span></b><span class="col-span-full"><span class="block h-2 overflow-hidden rounded-full bg-su-track" aria-hidden="true"><span class="block h-full rounded-full bg-su-on" style="width:94%"></span></span></span></li>
  </ul>
</section></div>

<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#5d6573] uppercase">Compact strip with a histogram</span>
<section class="flex flex-wrap items-center gap-x-[26px] gap-y-[18px] rounded-[22px] border border-su-line bg-white px-[18px] py-[22px] min-[561px]:px-6 min-[561px]:py-5 text-su-ink" aria-label="Ratings for the Fieldnote app">
  <b class="text-[2.6rem] leading-none font-extrabold tracking-[-.04em]"><span class="sr-only">Rated </span>4.2<span class="sr-only"> out of 5</span></b>
  <div><span class="stars" style="--r:4.2;--s:18px" aria-hidden="true"></span><small class="mt-[5px] block text-[.86rem] text-su-muted">386 reviews</small></div>
  <div class="flex h-14 items-end gap-1.5 min-[561px]:border-l min-[561px]:border-su-line min-[561px]:pl-[22px]" aria-hidden="true"><span class="flex h-full flex-col items-center justify-end gap-1 text-[.72rem] text-su-muted"><i class="block w-3.5 min-h-[3px] rounded-[4px_4px_2px_2px] bg-su-on" style="height:100%"></i>5</span><span class="flex h-full flex-col items-center justify-end gap-1 text-[.72rem] text-su-muted"><i class="block w-3.5 min-h-[3px] rounded-[4px_4px_2px_2px] bg-su-on" style="height:42%"></i>4</span><span class="flex h-full flex-col items-center justify-end gap-1 text-[.72rem] text-su-muted"><i class="block w-3.5 min-h-[3px] rounded-[4px_4px_2px_2px] bg-su-on" style="height:16%"></i>3</span><span class="flex h-full flex-col items-center justify-end gap-1 text-[.72rem] text-su-muted"><i class="block w-3.5 min-h-[3px] rounded-[4px_4px_2px_2px] bg-su-on" style="height:8%"></i>2</span><span class="flex h-full flex-col items-center justify-end gap-1 text-[.72rem] text-su-muted"><i class="block w-3.5 min-h-[3px] rounded-[4px_4px_2px_2px] bg-su-on" style="height:12%"></i>1</span></div>
  <p class="sr-only">5 stars: 212 reviews. 4 stars: 89. 3 stars: 34. 2 stars: 17. 1 star: 26.</p>
  <a class="inline-flex items-center justify-center gap-2 rounded-xl bg-su-ink px-5 py-3 text-[.95rem] font-bold text-white no-underline transition-colors hover:bg-[#3a4049] motion-reduce:transition-none focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-su-focus w-full min-[561px]:ml-auto min-[561px]:w-auto" href="#write-review">Write a review</a>
</section></div>
CSS 
@theme {
  --color-su-on: #f59e0b;
  --color-su-off: #ddd7ce;
  --color-su-track: #efebe4;
  --color-su-ink: #1f2328;
  --color-su-muted: #5b616e;
  --color-su-line: #e8e3da;
  --color-su-focus: #1d4ed8;
}
/* Read-only stars: a gradient filled to --r (0–5) under a repeating star mask. Set --s for the size. */
@utility stars {
  --r: 0;
  --s: 20px;
  --fill: calc(var(--r) * 20%);
  --star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M9.05 2.93c.3-.92 1.6-.92 1.9 0l1.07 3.29a1 1 0 0 0 .95.69h3.46c.97 0 1.37 1.24.59 1.81l-2.8 2.03a1 1 0 0 0-.36 1.12l1.07 3.3c.3.91-.76 1.68-1.54 1.11l-2.8-2.03a1 1 0 0 0-1.18 0l-2.8 2.03c-.78.57-1.84-.2-1.54-1.11l1.07-3.3a1 1 0 0 0-.36-1.12L2.98 8.72c-.78-.57-.38-1.81.59-1.81h3.46a1 1 0 0 0 .95-.69z'/%3E%3C/svg%3E");
  flex: none;
  display: inline-block;
  width: calc(var(--s) * 5);
  height: var(--s);
  background: linear-gradient(90deg, var(--color-su-on) var(--fill), var(--color-su-off) 0);
  -webkit-mask: var(--star) 0 0 / var(--s) var(--s) repeat-x;
  mask: var(--star) 0 0 / var(--s) var(--s) repeat-x;
  @supports (width: round(down, 4.3px, 1px)) and (width: mod(4.3px, 1px)) {
    --fill: calc((round(down, var(--r), 1) + .12 + mod(var(--r), 1) * .76) * 20%);
  }
}

About this set

Rating summaries that sit at the top of a reviews section, without the review cards. Summary with a link per star shows a kettle’s 4.6 average from 2,318 reviews, the share of buyers who would recommend it, and a Write a review button, next to five distribution rows where each row is a link that filters the reviews to that star rating. Scores by category is a course rating with an overall 4.8 tile and six category scores, such as Content quality and Pace, each with its number and a bar, plus a Rate this course button. Compact strip with a histogram fits an app’s 4.2 average, its stars, a five-column mini histogram and a Write a review button into one row that stacks on phones. Every number is written as text and the bars are drawings of those numbers, so the summary reads the same without the graphics. The plain version uses CSS Grid, the Bootstrap version uses the grid, .progress and .btn, and nothing needs JavaScript.

What’s included

  • Average score, review count and recommend percentage
  • Distribution rows that link to filtered reviews
  • Category scores with bars
  • Compact strip with a mini histogram
  • Write a review call to action in every layout

Accessibility

Each summary is a section named by its heading. Averages read as Rated 4.6 out of 5, distribution links read as Show 5 stars, 1,642 reviews, and the histogram has a visually hidden sentence with every count. Bars and stars are aria-hidden. Links and buttons show a 3px focus outline and their colour transitions stop under prefers-reduced-motion.

Customise it

Change --su-on, --su-bar, --su-track, --su-btn and --su-focus on .su for colours. In Bootstrap the bars read --bs-progress-bg and --bs-progress-bar-bg from the same variables; in Tailwind edit the su colours in @theme.