# Rating line under the CTA (`rating-badge`)

"★★★★★ 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.

| | |
|---|---|
| Tag | Showcase |
| Size | 0.8 KB gzipped own code (JS 0.0 KB + CSS 0.8 KB; 1.6 KB raw) |
| Dependency | none (vanilla + native APIs) |
| Best for | Every business with a real Google rating of 4.3+ from 10+ reviews |
| Demo | `index.html` in this folder (live: https://wbl-code-lib.pages.dev/modules/rating-badge/) |

## 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.

## Relation to the effects libraries
Batch 2 star-fill animates the stars on view; this is the static zero-JS line. Pick one per page.

## Use it
Copy this folder to the site as `/wbl/rating-badge/` (keep `vendor/` if there is one), then:

```html
<!-- 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>
```

Colours come from CSS variables with safe defaults: `--wbl-accent`, `--wbl-on-accent`, `--wbl-ink`, `--wbl-paper`,
`--wbl-card`, `--wbl-line`, `--wbl-muted`, `--wbl-band`, `--wbl-radius`, `--wbl-head` (see the library README for the
one-line bridge to the preview builder's `--a / --ink / --bg …`).

## License
Our code: WBL-owned, original. No third-party code.