WBL Code LibraryShowcase · 0.8 KB

Rating line under the CTA

"★★★★★ 4.9 · 212 Google reviews" as one quiet linked line right under the hero button, with stars that fill exactly (4.7 = 94%). CSS only.

Colour, cuts and gray blending on Sunset

Unhurried appointments with the same stylist every time.

Book a visit

4.9212 Google reviews

Chip

4.788 Google reviews

On a dark band

4.81,204 Google reviews

Sample numbers. Stars fill exactly: 4.7 = 94%.

How to use it

Size: 0.8 KB gzipped own code (JS 0.0 KB + CSS 0.8 KB; 1.6 KB raw)
Dependency: none (vanilla + native APIs)
Tag: Showcase
Best for: Every business with a real Google rating of 4.3+ from 10+ reviews

What it does

A link to the Google listing: masked star row filled by --r, the number, and the count as the underlined link text. Default line, a chip, and a dark-band variant. No JS, no images, no font.

When to use

Directly under the primary CTA (Mobbin upgrade #4: Fresha for Business, Ramp): proof where the decision happens.
Inside a sticky bar or a footer as the chip.

Don't

Ratings below 4.3 or counts under 10.
Rounding up or a stale count: refresh with the builder's lead facts.
Adding AggregateRating schema built from Google reviews (Google's self-serving review policy).
Google's logo (trademark): the word "Google" is enough.

Reduced motion, no JS, accessibility

Nothing moves.
Stars are role=img with "Rated 4.9 out of 5"; the link has a 44 px tap height.
Works without JS by design.

Copy-ready snippet

<!-- Rating line under the CTA (WBL Code Library) -->
<!-- in <head>: -->
<script>document.documentElement.classList.add('wbl-js')</script>
<link rel="stylesheet" href="/wbl/rating-badge/module.css">

<!-- markup: -->
<a class="wbl-rb" href="https://www.google.com/maps/search/?api=1&amp;query=Juniper+Hair+Studio+Los+Angeles">
  <span class="wbl-rb-stars" style="--r:4.9" role="img" aria-label="Rated 4.9 out of 5"></span>
  <b>4.9</b><span class="wbl-rb-sep" aria-hidden="true">·</span><span class="wbl-rb-src">212 Google reviews</span>
</a>

README.md · module.js · module.css · All modules