Metric Cards Bento Logos Block for React

Edit RESULTS at the top of the file. Each entry has a customer, a value, a label for what it counts, a change for the chip and falls for the arrow. Three fields place the cell's divider and + marks (lines, rowEnd): if you change how many cells there are, update them so the dividers and marks match the new rows.

A figure with a sign, a unit or a symbol ("98.4%", "$48M", "3 hrs") is wrapped in a bdi element so a right-to-left layout keeps it in reading order instead of moving the sign to the wrong side. The change chip is wrapped the same way.

Each cell is a list item with the customer's name as real text, then a term and its description: the label is read first, then the number, then "Since last year" and the change. Trend arrows are decorative and are not mirrored in right-to-left layouts.

The six cells become three bands of two: the same cells, with their dividers and + marks moved to match, so nothing is hidden and nothing scrolls sideways. Figures step down from text-5xl to text-4xl and the wordmarks are sized to fit a 320 pixel screen.

Yes. Cells are the page background between hairlines, chips are an outline badge, and the arrows are the foreground colour, not green or red. Primary isn't used at all because the block has no button. It follows your preset in light and dark, square or rounded.