Quote Cards Bento Logos Block for React

Edit REVIEWS at the top of the file. Each review has a customer (an icon, its lettering, how the icon sits beside the name, and the name), a person with initials and a role, a quote and a result: a value, what it counts and whether the number falls, which picks the arrow. Keep each quote to two lines so the four cards stay level.

It shows which way the number moved, and a fall can be good news, so the arrow follows the data instead of the sign. The arrow is decorative: a screen reader hears "Result: yield, plus 9 percent" through the text next to it. Arrows that show a trend are not mirrored in right-to-left layouts.

Each card is a list item with a Guides layer around it: four solid hairlines that overshoot the corners, and a + mark at the start corner. The cards sit apart with gaps wide enough that neighbouring lines never touch. Nothing is a border, so it follows your theme's line colour.

The cards are items of one list. Each quote is a figure with a blockquote and a figcaption naming the person and role, and the customer's name is real text in the wordmark. The quote is wrapped in a bdi element so its marks stay put in a right-to-left layout.

The grid becomes one column of four cards, with the same lines around each. The wordmark and chip share a row and fit at 320 pixels. With reduced motion the entrance is off and the section simply appears.