Inset Star Rating Big CTA Block for React

Edit COUNTS at the top of the file: the number of reviews at five, four, three, two and one star, in that order. Everything else is derived: the total, the average (to one decimal, by integer maths), how much of the fifth star is filled, each row's percentage and the headline's figures. Only put real review numbers here, and change "Brightloom" in the headline to your product.

Rounding each row separately can total 99 or 101. The block gives every row its rounded-down share, then hands the leftover points to the rows with the biggest remainders, so the bars and labels always add up to exactly 100.

Each star is an empty star in the border colour with a filled copy clipped on top, whose width is the share of that star the score covers: 4.9 fills 90 percent of the fifth. The clip grows from the inline start, so in right-to-left languages it fills from the right. The stars are decorative; a hidden "Rated 4.9 out of 5" says it in words.

Each row is a list item with one hidden sentence, such as "5 stars: 2,880 reviews, 90%". The bars and the visible labels are hidden from assistive technology, so nothing is read twice. The list itself is named "Reviews by star rating", and the section's h2 is the headline in the top band.

A rating you show must be one you can point to. The block shows your own review counts without a site's name or badge; add a line such as "Collected from verified customers" under the count only if it is true for your data.

The headline and the button come first, then the score with its stars, then the histogram in one column, the bars shrinking to fit while the star labels and percentages keep their widths. From md up the score sits at the start of the lower band, with the bars beside it.

It's a link (href="#"): point it at your trial page. The Shine Button renders the link it's given with render, with nativeButton={false}.