Stacked Rows With Category Labels Logos Block for React

Edit CATEGORIES at the top of the file: each has a label, a count, whether the band is tinted, and its customers. A customer is an icon, its lettering, how the icon sits beside the name, and the name. The header's total is the sum of the counts, so it stays true when you edit them.

The chip counts the industry's customers; the logos are a selection. A phone shows four per band and the wider layouts six. If you would rather the chip match what is on screen, replace count with the length of customers.

Each tinted band carries a decorative layer that extends a viewport's width past both sides of the column, and the section clips it, so there's no horizontal scroll. The rules and rails are drawn on top of it, so the lines stay crisp on the tint in light and dark.

Each band is a labelled region with an h3 for the industry and a list of its customers, so a screen reader can move between industries by heading. The count in the chip is wrapped in a bdi element to keep its separator in order in a right-to-left layout, and the wordmarks keep their own left-to-right direction.

Yes. The tint is the theme's muted colour at 60 percent, wordmarks are muted-foreground and turn to the foreground on hover, and nothing is a fixed colour. It reads the same in light and dark, square or rounded.