Cards Testimonials Block for React

Edit QUOTES at the top of the file and set featured: true on the card you want, and false on the others. Only one card should carry it. The badge text, "Most shared", is a label you write, not something the block works out. Each quote also carries its result, a figure and a label that follows it, so write the number the customer would point to.

Yes. It doesn't use your primary colour at all. The emphasis comes from structure: a bg-card surface with a thin foreground ring and a shadow, which lifts it in light and dark and in every preset, including themes where the card and page colours are almost the same. The one primary element in the block is the Shine Button.

Below the large breakpoint the cells stack in one column with the raised one on top, so the strongest quote is the first thing read. In the file it is first too; from the large breakpoint a grid position moves it to the middle. There are no links or buttons in the cards, so the focus order is unaffected, and the whole section stays well under three screens tall.

The stars are decoration and a screen reader reads one sentence instead, such as "Rated 4 out of 5". Each card sets its own rating, and filled and empty stars are drawn from the same data in the text and border colours. The header's average is plain text, so edit it with the numbers you have. Use a rating only if the customer gave one.

The cards are a list, and each is a figure with the quote in a blockquote and the author in its caption. The section's heading is an h2, and the cards have no headings of their own. The initials avatars and the line frames are hidden, since the name is written beside them and the lines are decoration.

Yes. The cells and the header follow the reading direction, the + marks move to the other corner, and each quote and result sits in a bdi so its quotation marks and units stay in order.