Open demo

CSS code

HTML 
<div class="cr"><span class="lbl">Four sizes</span>
<ul class="cr-sizes">
  <li><code>12px</code><span class="cr-rating"><span class="cr-stars cr-xs" style="--r:4.6" aria-hidden="true"></span><b><span class="sr-only">Rated </span>4.6<span class="sr-only"> out of 5</span></b><small>(1,208)<span class="sr-only"> reviews</span></small></span></li>
  <li><code>16px</code><span class="cr-rating"><span class="cr-stars cr-sm" style="--r:4.6" aria-hidden="true"></span><b><span class="sr-only">Rated </span>4.6<span class="sr-only"> out of 5</span></b><small>(1,208)<span class="sr-only"> reviews</span></small></span></li>
  <li><code>20px</code><span class="cr-rating"><span class="cr-stars cr-md" style="--r:4.6" aria-hidden="true"></span><b><span class="sr-only">Rated </span>4.6<span class="sr-only"> out of 5</span></b><small>(1,208)<span class="sr-only"> reviews</span></small></span></li>
  <li><code>28px</code><span class="cr-rating"><span class="cr-stars cr-lg" style="--r:4.6" aria-hidden="true"></span><b><span class="sr-only">Rated </span>4.6<span class="sr-only"> out of 5</span></b><small>(1,208)<span class="sr-only"> reviews</span></small></span></li>
</ul></div>

<div class="cr"><span class="lbl">Product cards</span>
<ul class="cr-grid" role="list">
  <li class="cr-card"><div class="cr-img" style="--bg:#efe6d8" aria-hidden="true"><svg viewBox="0 0 48 48"><path d="M16 6h16l2 8H14z"/><path d="M14 14c-4 4-6 10-4 16l4 12h20l4-12c2-6 0-12-4-16"/><path d="M19 24h10"/></svg></div>
    <div class="cr-body"><h3><a href="#linen-apron">Linen Work Apron</a></h3>
      <span class="cr-rating"><span class="cr-stars" style="--r:4.4;--s:14px" aria-hidden="true"></span><b><span class="sr-only">Rated </span>4.4<span class="sr-only"> out of 5</span></b><small>(312)<span class="sr-only"> reviews</span></small></span>
      <p class="cr-price">£38</p></div></li>
  <li class="cr-card"><div class="cr-img" style="--bg:#dfe7e2" aria-hidden="true"><svg viewBox="0 0 48 48"><path d="M10 14h24v18a8 8 0 0 1-8 8h-8a8 8 0 0 1-8-8z"/><path d="M34 18h3a5 5 0 0 1 0 10h-3"/><path d="M16 8v3M22 6v5M28 8v3"/></svg></div>
    <div class="cr-body"><h3><a href="#stoneware-mugs">Stoneware Mug Set of 4</a></h3>
      <span class="cr-rating"><span class="cr-stars" style="--r:4.8;--s:14px" aria-hidden="true"></span><b><span class="sr-only">Rated </span>4.8<span class="sr-only"> out of 5</span></b><small>(1,046)<span class="sr-only"> reviews</span></small></span>
      <p class="cr-price">£46</p></div></li>
  <li class="cr-card"><div class="cr-img" style="--bg:#eadfd3" aria-hidden="true"><svg viewBox="0 0 48 48"><rect x="6" y="14" width="30" height="20" rx="4"/><path d="M36 22h4a3 3 0 0 1 0 6h-4"/><path d="M12 21h15M12 27h10"/></svg></div>
    <div class="cr-body"><h3><a href="#walnut-board">Walnut Serving Board</a></h3>
      <span class="cr-rating"><span class="cr-stars" style="--r:3.7;--s:14px" aria-hidden="true"></span><b><span class="sr-only">Rated </span>3.7<span class="sr-only"> out of 5</span></b><small>(58)<span class="sr-only"> reviews</span></small></span>
      <p class="cr-price">£64</p></div></li>
</ul></div>

<div class="cr"><span class="lbl">Single-star badges in a list</span>
<ul class="cr-list">
  <li><span class="cr-badge great"><svg viewBox="0 0 20 20" aria-hidden="true"><path 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"/></svg><span class="sr-only">Rated </span>4.8<span class="sr-only"> out of 5</span></span>
    <div><a href="#osteria-nove">Osteria Nove</a><p>Italian · 0.4 km · open until 23:00</p></div><span class="cr-count">2.1k reviews</span></li>
  <li><span class="cr-badge good"><svg viewBox="0 0 20 20" aria-hidden="true"><path 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"/></svg><span class="sr-only">Rated </span>4.1<span class="sr-only"> out of 5</span></span>
    <div><a href="#lantern-noodle-bar">Lantern Noodle Bar</a><p>Ramen · 1.2 km · open until 22:00</p></div><span class="cr-count">864 reviews</span></li>
  <li><span class="cr-badge"><svg viewBox="0 0 20 20" aria-hidden="true"><path 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"/></svg><span class="sr-only">Rated </span>3.2<span class="sr-only"> out of 5</span></span>
    <div><a href="#harbour-chippy">The Harbour Chippy</a><p>Fish and chips · 2.0 km · closes at 21:00</p></div><span class="cr-count">97 reviews</span></li>
</ul></div>

<div class="cr"><span class="lbl">Inline in a sentence</span>
<p class="cr-inline"><span class="cr-stars" style="--r:4.3;--s:15px" aria-hidden="true"></span><span>Rated <b>4.3</b> out of 5 by 87 customers</span><a href="#reviews">Read the reviews</a></p></div>
CSS 
/* Compact ratings: stars plus a number and a count, sized for product cards, search results and dense lists.
   The stars are one masked element filled to --r and hidden from screen readers; the rating is always text. */
.cr{--cr-on:#f59e0b;--cr-off:#ddd7ce;--cr-ink:#1f2328;--cr-muted:#5b616e;--cr-line:#e8e3da;--cr-focus:#1d4ed8;
  --cr-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(--cr-ink)}
.cr .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}
.cr-stars{--r:0;--s:16px;--fill:calc(var(--r) * 20%);flex:none;display:inline-block;width:calc(var(--s) * 5);height:var(--s);
  background:linear-gradient(90deg,var(--cr-on) var(--fill),var(--cr-off) 0);
  -webkit-mask:var(--cr-star) 0 0/var(--s) var(--s) repeat-x;mask:var(--cr-star) 0 0/var(--s) var(--s) repeat-x}
@supports (width:round(down,4.3px,1px)) and (width:mod(4.3px,1px)){.cr-stars{--fill:calc((round(down,var(--r),1) + .12 + mod(var(--r),1) * .76) * 20%)}}
.cr-rating{display:inline-flex;align-items:center;gap:6px;font-size:.88rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.cr-rating b{font-weight:700}
.cr-rating small{font-size:inherit;color:var(--cr-muted)}
.cr a{color:inherit}
.cr a:focus-visible{outline:3px solid var(--cr-focus);outline-offset:3px;border-radius:4px}

/* 1 — four sizes */
.cr-sizes{list-style:none;margin:0;padding:8px 24px;background:#fff;border:1px solid var(--cr-line);border-radius:18px}
.cr-sizes li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;padding:14px 0}
.cr-sizes li+li{border-top:1px solid var(--cr-line)}
.cr-sizes code{font:600 .78rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--cr-muted)}
.cr-xs{--s:12px}.cr-xs~*{font-size:.75rem}
.cr-sm{--s:16px}
.cr-md{--s:20px}.cr-md~*{font-size:1rem}
.cr-lg{--s:28px}.cr-lg~*{font-size:1.25rem}
.cr-lg{margin-right:4px}

/* 2 — product cards */
.cr-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px}
.cr-card{position:relative;overflow:hidden;background:#fff;border:1px solid var(--cr-line);border-radius:18px;transition:box-shadow .2s,transform .2s}
.cr-card:hover{box-shadow:0 14px 30px -18px rgba(31,35,40,.35);transform:translateY(-2px)}
.cr-img{display:grid;place-items:center;aspect-ratio:4/3;background:var(--bg)}
.cr-img svg{width:44%;height:auto;fill:none;stroke:rgba(31,35,40,.55);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.cr-body{padding:14px 16px 16px}
.cr-body h3{margin:0;font-size:.98rem;font-weight:700;line-height:1.3}
.cr-body h3 a{text-decoration:none}
.cr-body h3 a::after{content:"";position:absolute;inset:0}
.cr-body h3 a:hover{text-decoration:underline}
.cr-body .cr-rating{margin-top:6px}
.cr-price{margin:10px 0 0;font-weight:800;font-size:1.05rem}

/* 3 — single-star score badges in a list */
.cr-list{list-style:none;margin:0;padding:0;background:#fff;border:1px solid var(--cr-line);border-radius:18px}
.cr-list li{display:flex;align-items:center;gap:14px;padding:14px 20px}
.cr-list li+li{border-top:1px solid var(--cr-line)}
.cr-list div{flex:1;min-width:0}
.cr-list a{font-weight:700;text-decoration:none}
.cr-list a:hover{text-decoration:underline}
.cr-list p{margin:2px 0 0;font-size:.85rem;color:var(--cr-muted)}
.cr-badge{flex:none;display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:999px;font-weight:800;font-size:.9rem;
  background:var(--b-bg,#f1efeb);color:var(--b-ink,#3f444c);font-variant-numeric:tabular-nums}
.cr-badge svg{width:14px;height:14px;fill:currentColor}
.cr-badge.great{--b-bg:#dcfce7;--b-ink:#166534}
.cr-badge.good{--b-bg:#fef3c7;--b-ink:#854d0e}
.cr-count{flex:none;font-size:.82rem;color:var(--cr-muted);text-align:right;min-width:6.5ch}

/* 4 — inline in a sentence */
.cr-inline{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:16px 20px;background:#fff;border:1px solid var(--cr-line);border-radius:14px;font-size:.92rem}
.cr-inline a{font-weight:700;color:#9a3412;text-underline-offset:3px}
.cr-inline a:hover{color:#7c2d12}
@media (max-width:520px){.cr-card{display:grid;grid-template-columns:104px minmax(0,1fr)}.cr-img{aspect-ratio:auto}.cr-img svg{width:56%}}
@media (prefers-reduced-motion:reduce){.cr-card{transition:none}.cr-card:hover{transform:none}}

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS

HTML 
<div class="cr"><span class="lbl">Four sizes</span>
<ul class="cr-sizes list-group">
  <li class="list-group-item d-flex flex-wrap align-items-center justify-content-between column-gap-3 row-gap-2"><code>12px</code><span class="cr-rating"><span class="cr-stars cr-xs" style="--r:4.6" aria-hidden="true"></span><b><span class="visually-hidden">Rated </span>4.6<span class="visually-hidden"> out of 5</span></b><small>(1,208)<span class="visually-hidden"> reviews</span></small></span></li>
  <li class="list-group-item d-flex flex-wrap align-items-center justify-content-between column-gap-3 row-gap-2"><code>16px</code><span class="cr-rating"><span class="cr-stars cr-sm" style="--r:4.6" aria-hidden="true"></span><b><span class="visually-hidden">Rated </span>4.6<span class="visually-hidden"> out of 5</span></b><small>(1,208)<span class="visually-hidden"> reviews</span></small></span></li>
  <li class="list-group-item d-flex flex-wrap align-items-center justify-content-between column-gap-3 row-gap-2"><code>20px</code><span class="cr-rating"><span class="cr-stars cr-md" style="--r:4.6" aria-hidden="true"></span><b><span class="visually-hidden">Rated </span>4.6<span class="visually-hidden"> out of 5</span></b><small>(1,208)<span class="visually-hidden"> reviews</span></small></span></li>
  <li class="list-group-item d-flex flex-wrap align-items-center justify-content-between column-gap-3 row-gap-2"><code>28px</code><span class="cr-rating"><span class="cr-stars cr-lg" style="--r:4.6" aria-hidden="true"></span><b><span class="visually-hidden">Rated </span>4.6<span class="visually-hidden"> out of 5</span></b><small>(1,208)<span class="visually-hidden"> reviews</span></small></span></li>
</ul></div>

<div class="cr"><span class="lbl">Product cards</span>
<ul class="cr-grid row row-cols-1 row-cols-sm-2 row-cols-md-3 list-unstyled mb-0" role="list">
  <li class="col"><div class="cr-card card h-100"><div class="cr-img" style="--bg:#efe6d8" aria-hidden="true"><svg viewBox="0 0 48 48"><path d="M16 6h16l2 8H14z"/><path d="M14 14c-4 4-6 10-4 16l4 12h20l4-12c2-6 0-12-4-16"/><path d="M19 24h10"/></svg></div>
    <div class="cr-body card-body"><h3><a href="#linen-apron">Linen Work Apron</a></h3>
      <span class="cr-rating"><span class="cr-stars" style="--r:4.4;--s:14px" aria-hidden="true"></span><b><span class="visually-hidden">Rated </span>4.4<span class="visually-hidden"> out of 5</span></b><small>(312)<span class="visually-hidden"> reviews</span></small></span>
      <p class="cr-price">£38</p></div></div></li>
  <li class="col"><div class="cr-card card h-100"><div class="cr-img" style="--bg:#dfe7e2" aria-hidden="true"><svg viewBox="0 0 48 48"><path d="M10 14h24v18a8 8 0 0 1-8 8h-8a8 8 0 0 1-8-8z"/><path d="M34 18h3a5 5 0 0 1 0 10h-3"/><path d="M16 8v3M22 6v5M28 8v3"/></svg></div>
    <div class="cr-body card-body"><h3><a href="#stoneware-mugs">Stoneware Mug Set of 4</a></h3>
      <span class="cr-rating"><span class="cr-stars" style="--r:4.8;--s:14px" aria-hidden="true"></span><b><span class="visually-hidden">Rated </span>4.8<span class="visually-hidden"> out of 5</span></b><small>(1,046)<span class="visually-hidden"> reviews</span></small></span>
      <p class="cr-price">£46</p></div></div></li>
  <li class="col"><div class="cr-card card h-100"><div class="cr-img" style="--bg:#eadfd3" aria-hidden="true"><svg viewBox="0 0 48 48"><rect x="6" y="14" width="30" height="20" rx="4"/><path d="M36 22h4a3 3 0 0 1 0 6h-4"/><path d="M12 21h15M12 27h10"/></svg></div>
    <div class="cr-body card-body"><h3><a href="#walnut-board">Walnut Serving Board</a></h3>
      <span class="cr-rating"><span class="cr-stars" style="--r:3.7;--s:14px" aria-hidden="true"></span><b><span class="visually-hidden">Rated </span>3.7<span class="visually-hidden"> out of 5</span></b><small>(58)<span class="visually-hidden"> reviews</span></small></span>
      <p class="cr-price">£64</p></div></div></li>
</ul></div>

<div class="cr"><span class="lbl">Single-star badges in a list</span>
<ul class="cr-list list-group">
  <li class="list-group-item d-flex align-items-center"><span class="cr-badge badge rounded-pill great"><svg viewBox="0 0 20 20" aria-hidden="true"><path 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"/></svg><span class="visually-hidden">Rated </span>4.8<span class="visually-hidden"> out of 5</span></span>
    <div><a href="#osteria-nove">Osteria Nove</a><p>Italian · 0.4 km · open until 23:00</p></div><span class="cr-count">2.1k reviews</span></li>
  <li class="list-group-item d-flex align-items-center"><span class="cr-badge badge rounded-pill good"><svg viewBox="0 0 20 20" aria-hidden="true"><path 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"/></svg><span class="visually-hidden">Rated </span>4.1<span class="visually-hidden"> out of 5</span></span>
    <div><a href="#lantern-noodle-bar">Lantern Noodle Bar</a><p>Ramen · 1.2 km · open until 22:00</p></div><span class="cr-count">864 reviews</span></li>
  <li class="list-group-item d-flex align-items-center"><span class="cr-badge badge rounded-pill"><svg viewBox="0 0 20 20" aria-hidden="true"><path 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"/></svg><span class="visually-hidden">Rated </span>3.2<span class="visually-hidden"> out of 5</span></span>
    <div><a href="#harbour-chippy">The Harbour Chippy</a><p>Fish and chips · 2.0 km · closes at 21:00</p></div><span class="cr-count">97 reviews</span></li>
</ul></div>

<div class="cr"><span class="lbl">Inline in a sentence</span>
<p class="cr-inline card flex-row flex-wrap align-items-center column-gap-2 row-gap-1"><span class="cr-stars" style="--r:4.3;--s:15px" aria-hidden="true"></span><span>Rated <b>4.3</b> out of 5 by 87 customers</span><a href="#reviews">Read the reviews</a></p></div>
CSS 
/* Compact ratings on Bootstrap: .list-group, .card in .row-cols-*, and .badge for the score pills.
   Compact ratings: stars plus a number and a count, sized for product cards, search results and dense lists.
   The stars are one masked element filled to --r and hidden from screen readers; the rating is always text. */
.cr{--cr-on:#f59e0b;--cr-off:#ddd7ce;--cr-ink:#1f2328;--cr-muted:#5b616e;--cr-line:#e8e3da;--cr-focus:#1d4ed8;
  --cr-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-border-color:var(--cr-line);color:var(--cr-ink)}
.cr p{margin-bottom:0}
.cr .list-group{--bs-list-group-border-color:var(--cr-line);--bs-list-group-border-radius:18px;--bs-list-group-color:var(--cr-ink)}
.cr-stars{--r:0;--s:16px;--fill:calc(var(--r) * 20%);flex:none;display:inline-block;width:calc(var(--s) * 5);height:var(--s);
  background:linear-gradient(90deg,var(--cr-on) var(--fill),var(--cr-off) 0);
  -webkit-mask:var(--cr-star) 0 0/var(--s) var(--s) repeat-x;mask:var(--cr-star) 0 0/var(--s) var(--s) repeat-x}
@supports (width:round(down,4.3px,1px)) and (width:mod(4.3px,1px)){.cr-stars{--fill:calc((round(down,var(--r),1) + .12 + mod(var(--r),1) * .76) * 20%)}}
.cr-rating{display:inline-flex;align-items:center;gap:6px;font-size:.88rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.cr-rating b{font-weight:700}
.cr-rating small{font-size:inherit;color:var(--cr-muted)}
.cr a{color:inherit}
.cr a:focus-visible{outline:3px solid var(--cr-focus);outline-offset:3px;border-radius:4px}

/* 1 — four sizes */
.cr-sizes{--bs-list-group-item-padding-x:24px;--bs-list-group-item-padding-y:14px}
.cr-sizes code{font:600 .78rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--cr-muted)}
.cr-xs{--s:12px}.cr-xs~*{font-size:.75rem}
.cr-sm{--s:16px}
.cr-md{--s:20px}.cr-md~*{font-size:1rem}
.cr-lg{--s:28px}.cr-lg~*{font-size:1.25rem}
.cr-lg{margin-right:4px}

/* 2 — product cards */
.cr-grid{--bs-gutter-x:18px;--bs-gutter-y:18px}
.cr-card{--bs-card-border-color:var(--cr-line);--bs-card-border-radius:18px;--bs-card-inner-border-radius:17px;overflow:hidden;transition:box-shadow .2s,transform .2s}
.cr-card:hover{box-shadow:0 14px 30px -18px rgba(31,35,40,.35);transform:translateY(-2px)}
.cr-img{display:grid;place-items:center;aspect-ratio:4/3;background:var(--bg)}
.cr-img svg{width:44%;height:auto;fill:none;stroke:rgba(31,35,40,.55);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.cr-body{--bs-card-spacer-x:16px;--bs-card-spacer-y:14px;padding-bottom:16px}
.cr-body h3{margin:0;font-size:.98rem;font-weight:700;line-height:1.3}
.cr-body h3 a{text-decoration:none}
.cr-body h3 a::after{content:"";position:absolute;inset:0}
.cr-body h3 a:hover{text-decoration:underline}
.cr-body .cr-rating{margin-top:6px}
.cr-price{margin:10px 0 0;font-weight:800;font-size:1.05rem}

/* 3 — single-star score badges in a list */
.cr-list{--bs-list-group-item-padding-x:20px;--bs-list-group-item-padding-y:14px}
.cr-list li{gap:14px}
.cr-list div{flex:1;min-width:0}
.cr-list a{font-weight:700;text-decoration:none}
.cr-list a:hover{text-decoration:underline}
.cr-list p{margin:2px 0 0;font-size:.85rem;color:var(--cr-muted)}
.cr-badge{--bs-badge-padding-x:10px;--bs-badge-padding-y:5px;--bs-badge-font-size:.9rem;--bs-badge-font-weight:800;--bs-badge-color:var(--b-ink,#3f444c);
  flex:none;display:inline-flex;align-items:center;gap:5px;line-height:normal;background:var(--b-bg,#f1efeb);font-variant-numeric:tabular-nums}
.cr-badge svg{width:14px;height:14px;fill:currentColor}
.cr-badge.great{--b-bg:#dcfce7;--b-ink:#166534}
.cr-badge.good{--b-bg:#fef3c7;--b-ink:#854d0e}
.cr-count{flex:none;font-size:.82rem;color:var(--cr-muted);text-align:right;min-width:6.5ch}

/* 4 — inline in a sentence */
.cr-inline{--bs-card-border-color:var(--cr-line);--bs-card-border-radius:14px;padding:16px 20px;font-size:.92rem}
.cr-inline a{font-weight:700;color:#9a3412;text-underline-offset:3px}
.cr-inline a:hover{color:#7c2d12}
@media (max-width:520px){.cr-card{display:grid;grid-template-columns:104px minmax(0,1fr)}.cr-img{aspect-ratio:auto}.cr-img svg{width:56%}}
@media (prefers-reduced-motion:reduce){.cr-card{transition:none}.cr-card:hover{transform:none}}

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#5d6573] uppercase">Four sizes</span>
<ul class="divide-y divide-cr-line rounded-[18px] border border-cr-line bg-white px-6 py-2">
  <li class="flex flex-wrap items-center justify-between gap-x-4 gap-y-2 py-3.5"><code class="font-mono text-[.78rem] leading-none font-semibold text-cr-muted">12px</code><span class="inline-flex items-center gap-1.5 text-[.88rem] whitespace-nowrap tabular-nums "><span class="stars " style="--r:4.6;--s:12px" aria-hidden="true"></span><b class="font-bold text-[.75rem]"><span class="sr-only">Rated </span>4.6<span class="sr-only"> out of 5</span></b><small class="text-[length:inherit] text-cr-muted text-[.75rem]">(1,208)<span class="sr-only"> reviews</span></small></span></li>
  <li class="flex flex-wrap items-center justify-between gap-x-4 gap-y-2 py-3.5"><code class="font-mono text-[.78rem] leading-none font-semibold text-cr-muted">16px</code><span class="inline-flex items-center gap-1.5 text-[.88rem] whitespace-nowrap tabular-nums "><span class="stars " style="--r:4.6;--s:16px" aria-hidden="true"></span><b class="font-bold "><span class="sr-only">Rated </span>4.6<span class="sr-only"> out of 5</span></b><small class="text-[length:inherit] text-cr-muted ">(1,208)<span class="sr-only"> reviews</span></small></span></li>
  <li class="flex flex-wrap items-center justify-between gap-x-4 gap-y-2 py-3.5"><code class="font-mono text-[.78rem] leading-none font-semibold text-cr-muted">20px</code><span class="inline-flex items-center gap-1.5 text-[.88rem] whitespace-nowrap tabular-nums "><span class="stars " style="--r:4.6;--s:20px" aria-hidden="true"></span><b class="font-bold text-base"><span class="sr-only">Rated </span>4.6<span class="sr-only"> out of 5</span></b><small class="text-[length:inherit] text-cr-muted text-base">(1,208)<span class="sr-only"> reviews</span></small></span></li>
  <li class="flex flex-wrap items-center justify-between gap-x-4 gap-y-2 py-3.5"><code class="font-mono text-[.78rem] leading-none font-semibold text-cr-muted">28px</code><span class="inline-flex items-center gap-1.5 text-[.88rem] whitespace-nowrap tabular-nums "><span class="stars mr-1" style="--r:4.6;--s:28px" aria-hidden="true"></span><b class="font-bold text-[1.25rem]"><span class="sr-only">Rated </span>4.6<span class="sr-only"> out of 5</span></b><small class="text-[length:inherit] text-cr-muted text-[1.25rem]">(1,208)<span class="sr-only"> reviews</span></small></span></li>
</ul></div>

<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#5d6573] uppercase">Product cards</span>
<ul class="grid grid-cols-[repeat(auto-fit,minmax(200px,1fr))] gap-[18px]" role="list">
  <li class="relative overflow-hidden rounded-[18px] border border-cr-line bg-white transition hover:-translate-y-0.5 hover:shadow-[0_14px_30px_-18px_rgba(31,35,40,.35)] motion-reduce:transition-none motion-reduce:hover:translate-y-0 max-[520px]:grid max-[520px]:grid-cols-[104px_minmax(0,1fr)]"><div class="grid aspect-[4/3] place-items-center max-[520px]:aspect-auto max-[520px]:[&>svg]:w-[56%] bg-[#efe6d8]" aria-hidden="true"><svg class="h-auto w-[44%] fill-none stroke-[#1f2328]/55 stroke-[1.2] [stroke-linecap:round] [stroke-linejoin:round]" viewBox="0 0 48 48"><path d="M16 6h16l2 8H14z"/><path d="M14 14c-4 4-6 10-4 16l4 12h20l4-12c2-6 0-12-4-16"/><path d="M19 24h10"/></svg></div>
    <div class="px-4 pt-3.5 pb-4"><h3 class="text-[.98rem] leading-[1.3] font-bold"><a class="no-underline after:absolute after:inset-0 hover:underline focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-cr-focus focus-visible:rounded" href="#linen-apron">Linen Work Apron</a></h3>
      <span class="inline-flex items-center gap-1.5 text-[.88rem] whitespace-nowrap tabular-nums mt-1.5"><span class="stars " style="--r:4.4;--s:14px" aria-hidden="true"></span><b class="font-bold "><span class="sr-only">Rated </span>4.4<span class="sr-only"> out of 5</span></b><small class="text-[length:inherit] text-cr-muted ">(312)<span class="sr-only"> reviews</span></small></span>
      <p class="mt-2.5 text-[1.05rem] font-extrabold">£38</p></div></li>
  <li class="relative overflow-hidden rounded-[18px] border border-cr-line bg-white transition hover:-translate-y-0.5 hover:shadow-[0_14px_30px_-18px_rgba(31,35,40,.35)] motion-reduce:transition-none motion-reduce:hover:translate-y-0 max-[520px]:grid max-[520px]:grid-cols-[104px_minmax(0,1fr)]"><div class="grid aspect-[4/3] place-items-center max-[520px]:aspect-auto max-[520px]:[&>svg]:w-[56%] bg-[#dfe7e2]" aria-hidden="true"><svg class="h-auto w-[44%] fill-none stroke-[#1f2328]/55 stroke-[1.2] [stroke-linecap:round] [stroke-linejoin:round]" viewBox="0 0 48 48"><path d="M10 14h24v18a8 8 0 0 1-8 8h-8a8 8 0 0 1-8-8z"/><path d="M34 18h3a5 5 0 0 1 0 10h-3"/><path d="M16 8v3M22 6v5M28 8v3"/></svg></div>
    <div class="px-4 pt-3.5 pb-4"><h3 class="text-[.98rem] leading-[1.3] font-bold"><a class="no-underline after:absolute after:inset-0 hover:underline focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-cr-focus focus-visible:rounded" href="#stoneware-mugs">Stoneware Mug Set of 4</a></h3>
      <span class="inline-flex items-center gap-1.5 text-[.88rem] whitespace-nowrap tabular-nums mt-1.5"><span class="stars " style="--r:4.8;--s:14px" aria-hidden="true"></span><b class="font-bold "><span class="sr-only">Rated </span>4.8<span class="sr-only"> out of 5</span></b><small class="text-[length:inherit] text-cr-muted ">(1,046)<span class="sr-only"> reviews</span></small></span>
      <p class="mt-2.5 text-[1.05rem] font-extrabold">£46</p></div></li>
  <li class="relative overflow-hidden rounded-[18px] border border-cr-line bg-white transition hover:-translate-y-0.5 hover:shadow-[0_14px_30px_-18px_rgba(31,35,40,.35)] motion-reduce:transition-none motion-reduce:hover:translate-y-0 max-[520px]:grid max-[520px]:grid-cols-[104px_minmax(0,1fr)]"><div class="grid aspect-[4/3] place-items-center max-[520px]:aspect-auto max-[520px]:[&>svg]:w-[56%] bg-[#eadfd3]" aria-hidden="true"><svg class="h-auto w-[44%] fill-none stroke-[#1f2328]/55 stroke-[1.2] [stroke-linecap:round] [stroke-linejoin:round]" viewBox="0 0 48 48"><rect x="6" y="14" width="30" height="20" rx="4"/><path d="M36 22h4a3 3 0 0 1 0 6h-4"/><path d="M12 21h15M12 27h10"/></svg></div>
    <div class="px-4 pt-3.5 pb-4"><h3 class="text-[.98rem] leading-[1.3] font-bold"><a class="no-underline after:absolute after:inset-0 hover:underline focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-cr-focus focus-visible:rounded" href="#walnut-board">Walnut Serving Board</a></h3>
      <span class="inline-flex items-center gap-1.5 text-[.88rem] whitespace-nowrap tabular-nums mt-1.5"><span class="stars " style="--r:3.7;--s:14px" aria-hidden="true"></span><b class="font-bold "><span class="sr-only">Rated </span>3.7<span class="sr-only"> out of 5</span></b><small class="text-[length:inherit] text-cr-muted ">(58)<span class="sr-only"> reviews</span></small></span>
      <p class="mt-2.5 text-[1.05rem] font-extrabold">£64</p></div></li>
</ul></div>

<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#5d6573] uppercase">Single-star badges in a list</span>
<ul class="divide-y divide-cr-line rounded-[18px] border border-cr-line bg-white">
  <li class="flex items-center gap-3.5 px-5 py-3.5"><span class="inline-flex flex-none items-center gap-[5px] rounded-full px-2.5 py-[5px] text-[.9rem] font-extrabold tabular-nums bg-[#dcfce7] text-[#166534]"><svg class="size-3.5 fill-current" viewBox="0 0 20 20" aria-hidden="true"><path 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"/></svg><span class="sr-only">Rated </span>4.8<span class="sr-only"> out of 5</span></span>
    <div class="min-w-0 flex-1"><a class="font-bold no-underline hover:underline focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-cr-focus focus-visible:rounded" href="#osteria-nove">Osteria Nove</a><p class="mt-0.5 text-[.85rem] text-cr-muted">Italian · 0.4 km · open until 23:00</p></div><span class="min-w-[6.5ch] flex-none text-right text-[.82rem] text-cr-muted">2.1k reviews</span></li>
  <li class="flex items-center gap-3.5 px-5 py-3.5"><span class="inline-flex flex-none items-center gap-[5px] rounded-full px-2.5 py-[5px] text-[.9rem] font-extrabold tabular-nums bg-[#fef3c7] text-[#854d0e]"><svg class="size-3.5 fill-current" viewBox="0 0 20 20" aria-hidden="true"><path 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"/></svg><span class="sr-only">Rated </span>4.1<span class="sr-only"> out of 5</span></span>
    <div class="min-w-0 flex-1"><a class="font-bold no-underline hover:underline focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-cr-focus focus-visible:rounded" href="#lantern-noodle-bar">Lantern Noodle Bar</a><p class="mt-0.5 text-[.85rem] text-cr-muted">Ramen · 1.2 km · open until 22:00</p></div><span class="min-w-[6.5ch] flex-none text-right text-[.82rem] text-cr-muted">864 reviews</span></li>
  <li class="flex items-center gap-3.5 px-5 py-3.5"><span class="inline-flex flex-none items-center gap-[5px] rounded-full px-2.5 py-[5px] text-[.9rem] font-extrabold tabular-nums bg-[#f1efeb] text-[#3f444c]"><svg class="size-3.5 fill-current" viewBox="0 0 20 20" aria-hidden="true"><path 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"/></svg><span class="sr-only">Rated </span>3.2<span class="sr-only"> out of 5</span></span>
    <div class="min-w-0 flex-1"><a class="font-bold no-underline hover:underline focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-cr-focus focus-visible:rounded" href="#harbour-chippy">The Harbour Chippy</a><p class="mt-0.5 text-[.85rem] text-cr-muted">Fish and chips · 2.0 km · closes at 21:00</p></div><span class="min-w-[6.5ch] flex-none text-right text-[.82rem] text-cr-muted">97 reviews</span></li>
</ul></div>

<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#5d6573] uppercase">Inline in a sentence</span>
<p class="flex flex-wrap items-center gap-x-2.5 gap-y-1.5 rounded-[14px] border border-cr-line bg-white px-5 py-4 text-[.92rem]"><span class="stars" style="--r:4.3;--s:15px" aria-hidden="true"></span><span>Rated <b>4.3</b> out of 5 by 87 customers</span><a class="font-bold text-[#9a3412] underline underline-offset-3 hover:text-[#7c2d12] focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-cr-focus focus-visible:rounded" href="#reviews">Read the reviews</a></p></div>
CSS 
@theme {
  --color-cr-on: #f59e0b;
  --color-cr-off: #ddd7ce;
  --color-cr-ink: #1f2328;
  --color-cr-muted: #5b616e;
  --color-cr-line: #e8e3da;
  --color-cr-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: 16px;
  --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-cr-on) var(--fill), var(--color-cr-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

Small ratings for places where space is short. Four sizes shows the same 4.6 rating with 1,208 reviews at 12, 16, 20 and 28 pixels, with the number and count scaling alongside the stars. Product cards puts a 14 pixel rating, a review count and a price under each of three shop items, and the whole card is clickable through its title link; on phones the cards switch to a row with the image on the left. Single-star badges in a list is a restaurant list where each place gets one star and its score in a pill tinted by score band, plus a review count. Inline in a sentence shows stars beside the words Rated 4.3 out of 5 by 87 customers and a Read the reviews link. Every rating is one masked element filled to its –r value, so changing the score is one number in the markup, and the score is always text next to it.

What’s included

  • Four ready sizes from 12 to 28 pixels
  • Product cards with a stretched title link
  • Single-star score badges tinted by band
  • Inline rating for product pages and search results
  • No JavaScript

Accessibility

Every rating reads as Rated 4.6 out of 5 and 1,208 reviews, with the stars aria-hidden. Score badges carry the number as text, so the tint is never the only signal. Card and list links show a 3px focus outline, and the card hover lift stops under prefers-reduced-motion.

Customise it

Set --cr-on, --cr-off and --cr-focus on .cr for colours and --s on a star element for its size. The badge tints are --b-bg and --b-ink on .cr-badge. Bootstrap builds on .list-group, .card and .badge with the same variables; in Tailwind edit the cr colours in @theme.