Components
Google rating
Google rating
The clickable “Rated 5.0 on Google” review block on the brochure sites — five amber stars over the multicolour Google “G” + bold headline, wrapped in an anchor that opens the firm's Google reviews in a new tab. The amber (#F4A823) and the four-colour “G” are intentional brand assets, baked in literally — not design tokens. Per-site centring/focus layout is passed via class.
Canonical
<koala-google-rating class="flex flex-col items-center gap-2.5" />
Used once on the Legal home hero and the Portal client quote type picker. The consumer passes its own
centring stack and focus-visible ring via class.
Props
2 inputs| Attribute | Values | Notes |
|---|---|---|
| rating | string = "5.0" | The rating shown in the headline — renders Rated {rating} on Google. |
| href | string? | The Google reviews share link the block opens. Defaults to Koala's (share.google/…). |
| class | string? | Per-site layout merged onto the anchor (e.g. flex flex-col items-center gap-2.5 + a focus-visible ring). The helper always adds group. |
Do & don't
Do
Use the shared helper so the amber stars + Google “G” brand assets stay identical across every site.
Don't
Don't hand-roll the stars + “G” SVGs, and don't swap the amber for a design token — the brand colours are intentional and must not drift.