Numbered Top Testimonials Block for React

Edit REASONS and RESPONDENTS at the top of the file. Keep the list in order, most votes first: the numerals are drawn from each band's position, so the list order is the ranking. The percentage and the bar's width are worked out from the votes and the number of respondents, so you only type the two raw numbers.

No. The 640 respondents and the vote counts are sample data. Replace them with your own survey results, and keep the sentence under the heading true: it says respondents could pick several reasons, which is why the percentages do not add up to 100.

The ranking is already in the list: the bands are an ordered list, so a screen reader announces "1 of 3", and the big numerals are hidden so they are not read twice. The vote count and share are real text, and the bar is decoration.

The stars are decoration, filled in the text colour and empty in the border colour, and a screen reader reads a sentence instead, such as "Rated 5 out of 5". Set each reason's rating from what the customer gave, and remove the stars if you did not collect one.

Each band is one column on phones: the numeral, then the quote and author, then the votes. At the medium breakpoint the numeral sits in a narrow column beside the quote, with the votes in a row below, and from the large one the votes get a column of their own. The counts sit in a bdi, so they never wrap awkwardly, even at 320 pixels.

Yes. The numeral stays at the start of its band and the votes at the end, the dividers follow the reading direction, the bar fills from the start, and the vote text and each quote sit in a bdi so numbers and quotation marks keep their place.