Review Stars Strip

An aggregate rating strip: stars, score, review count, and where the reviews live. Real numbers only.

Copied 0 times.

★★★★★4.8312 reviews from our customers

Members only

This design needs a membership.
Today's price: $1/month, locked forever once you join.

Get it for $1/month Log in

Build an aggregate review rating strip for my website. Match my existing design system, colors, and fonts.

STRUCTURE
- A horizontal strip: a row of 5 star icons, the numeric score ("4.8"), the review count ("312 reviews"), and the source label, all on one line (wrapping to two on narrow screens).
- Size: compact, body-text scale (stars about 16px), suitable for headers, heroes, and product cards.
- Stars are inline SVG. The fill reflects the real score fractionally: a 4.6 shows four full stars and one 60%-filled star (SVG clip or gradient), never rounded up to 5.

DATA AND HONESTY
- Score, count, and source URL live in one config constant with a clearly marked TODO to fill them from my real review platform data. If the score or count is unset, the strip does not render. Never invent a rating, never inflate the count, never show stars with no reviews behind them.
- The source label reads "from our customers": use this only if the reviews are collected and verifiable on my own site; the config comment says so.
- Add a comment: if I later automate this, the value must come from the platform's API, and displaying a number that no longer matches the platform is a credibility and legal risk.

BEHAVIOR
- If a source URL is configured, the whole strip is one link opening the review page in a new tab (rel="noopener"); otherwise it is static text.
- No animation needed; optionally a subtle hover underline on the source label when linked.

QUALITY
- The strip has an aria-label stating the full fact ("Rated 4.8 out of 5 from 312 reviews on Trustpilot"); the star icons are aria-hidden.
- WCAG AA contrast; star fill color distinct from the empty star outline in a way that survives grayscale.
- No layout shift: the strip's height is fixed by its line-height.

QUESTIONS
- Before you build, find or ask for: my real score, review count, and the platform page where both can be checked. Check my project and site first; whatever you cannot find there, ask me for. Never invent these or ship placeholders.
- If anything else about my brand or content is unclear, ask me before inventing.

Members only

What it does

The review stars strip is the one-line trust signal people scan for before reading a word: stars, a score, how many reviews, and where they live. Small, familiar, and quietly persuasive. It's the first thing comparison shoppers look for.

The star fill is fractional and honest: a 4.6 shows a 60-percent-filled fifth star, never rounded up to five.
Score and count come from one place you fill with real platform numbers; unset means no strip.
Inventing a rating or inflating the count is banned outright, and a note in the code warns that numbers drifting from the platform are a credibility and legal risk.
Name a platform only if those exact numbers can be checked there.
Screen readers hear the whole fact in one line, like rated 4.8 from 312 reviews on Trustpilot.
With a link set, the whole strip opens your review page; on narrow screens it wraps to two tidy lines, never squeezes.

How it works

1Pick the source label, from our customers, or a named platform like Trustpilot.
2Pick the size, compact for headers and cards, or large as its own trust row.
3Copy the prompt, the strip's build instructions in one go, into whichever AI you use.
4Fill in your real score, count, and review-page link in the marked spot; unset numbers keep the strip hidden.
5Compare against the platform once a month: the numbers on your site should always match the numbers anyone can check there.

What you can customize

Source label: our customers only if reviews are collected and checkable on your own site; the named platform points at proof.
Size: compact tucks in anywhere; large stands alone between sections and demands a glance.
Star color and type adapt to your site automatically, because your AI builds the strip right inside your own design, stars and all.

You'll also like

Get 10% off your first order

Drop your email and the code lands in your inbox.

you@email.com

Send me the code

No thanks

Email Capture Popup

A conversion popup that captures emails without annoying your visitors. Pick when it shows and what it offers, then copy the prompt.

you@email.comSubscribe

One email a week. Unsubscribe anytime.

Newsletter Section

A full-width inline email capture section that earns the signup with a clear promise, not a popup.

We use cookies for basic stats. Privacy

Cookie Consent Banner

A compliant consent bar that blocks nothing, remembers the choice, and defaults to declining non-essential.