Split Layout Team Block for React

Edit PEOPLE (a name, a role and a city each) and FIGURES at the top of the file. The people and cities figures are counted from PEOPLE; "small businesses" is typed, because the file doesn't know it. Ten people is the length the sticky column was designed against; with far fewer rows the copy has nothing to stay beside.

Only from lg: the copy block is sticky inside a column that is as tall as the list, so it stays in view while the rows move and leaves with them at the end. It takes no JavaScript. The page header or navigation bar must not be taller than the 4rem the copy leaves above it; change lg:top-16 if yours is.

Below lg there is no sticky column: the copy comes first, then a rule drawn across the block, then the people. A phone shows the first six rows and a Show all 10 button, a disclosure that reports whether it is expanded and which list it controls; its label never changes. The remaining rows are hidden with CSS, not removed.

The column has no padding of its own; each part pads itself, so the divider between the copy and the rows reaches the top rule, where Guides draws a + mark. The rows draw a bottom border each, except the last, so the rows end the block and the next block's top rule closes it.

As three terms and descriptions: "10" with "people", "9" with "cities", "11,200" with "small businesses". They are shown value first by reordering the two with CSS, so a screen reader hears the label first, then the number. The numbers are wrapped so they keep their order on a right-to-left page.

To # as a placeholder: point it at your page about how the team works. It is a ghost button rendered as a link, so it has a visible focus ring and follows the framework's link component if you swap it in.