Co-built Rows About Block for React

The partners are PARTNERS at the top of the file. Each has a name, a lettering string (the partner's type style, not a class on the row), a kind, a built sentence and a customers count. The header's partnership count is the length of the array, and the customer total is the sum of customers. Joinmoor's name is written on every row. The link's address is # in this demo.

The heading is the section's only h2. Each row is an h3. The multiplication sign is hidden, and a visually hidden "with" makes the heading read "Joinmoor with Brinepost". The sentence, the badge, the customer count and the link "Read the note" follow. The lines are drawn by a layer hidden from assistive technology.

Each partner's lettering is its own type: a serif italic, a monospace, a bold lowercase, a light wide setting. Reedpath is drawn in lowercase; the text is still "Reedpath", so that is what is read. The lockup is pinned so the two names stay in that order when the page is right to left.

The two wordmarks stack, with the multiplication sign between them, and the badge, the customer count and the link wrap under the sentence. From lg the lockup and the rest of the row share one line. Nothing scrolls sideways at 320 pixels.

Every block draws only its top rule: the next block's top rule is this one's bottom edge. A rule under the last row, with empty space beneath it, would read as a second rule just above the next block. The last row keeps its padding and draws no line under itself.

The header fades up once on load. With reduced motion it simply appears. Nothing else moves on its own. The link's arrow turns around in a right-to-left layout, and its small nudge on hover is off under reduced motion. The block has no state, so it can render on the server.