Metric Table Logos Block for React

Edit OUTCOMES at the top of the file. Each entry is a measure, a note, a value, a change and a direction. The change is text with its sign in it ("−71%", "+24%"); the direction only picks the icon, down or up, so a fall that is good news and a rise that is bad news both read right. Keep the table at three or four rows: the logo column stretches to match its height.

Yes: column headers (Outcome, Median, Change), one row per outcome, and a caption. The caption is the table's own caption element, so it names the figures for a screen reader.

Every value and change is wrapped in a bdi, so "−71%" and "38 s" keep their sign and unit in reading order. The trend icons don't mirror: a fall is down and a rise is up in every direction of text.

Edit CUSTOMERS. Each entry is a name, an icon, a lettering and a mark. Keep five: the cells share hairlines, and five fill the column on desktop and two rows plus a double-width cell on a phone. The names are fictional placeholders for your own customers.

The table keeps all three columns: the note under each measure wraps, the median and the chip stay on one line. The five wordmark cells follow it under a rule, two across, the last one spanning both. Nothing scrolls sideways at 320 pixels.

The header and the split fade up once when the page loads, with CSS transitions, and each wordmark's colour eases on hover. With reduced motion the transitions are off: the section simply appears.