Review Sources Footer Block for React

Edit the SOURCES array at the top of the file: each entry has a name, a score, a count string, the number of stars (the score rounded to the nearest half) and a glyph, a stroked path in a 24 by 24 box drawn in the tile. The names, scores and counts are example data. Replace them with your own and link each "Read reviews" to the real page.

No. They use the catalog Rating in read-only mode, in the foreground tone, and draw the score only: the stars are inert and hidden from assistive technology, and the score is in text ("4.8 out of 5") beside them, so the number is the source of truth. Half stars show a score like 4.6 as four and a half.

Below md the cells sit in a row you scroll sideways with your thumb, each snapping into place with the next card peeking in. Each card holds a link, so keyboard users reach every card by tab and the carousel scrolls to show the one in focus. From md the three cells sit in a grid with overshoot lines instead.

The block is a footer element. The band has an h2 ("Reviewed by customers on three sites") and the sites are a list of three, each with an h3 for the site, the score, the count and a link that reads "Read reviews on Peerboard". The link groups sit in one nav labelled Footer.

No. Each site mark is a small generic drawing (two circles, three bars, a speech bubble) in the foreground tone, and the sites do not exist. To show real review sites, replace the glyphs with the sites' own marks, follow their brand rules and keep the names in text.