Social Links Team Block for React

Edit PEOPLE at the top of the file. A person is a name, a role and a handles list; each handle is a network (github, x or linkedin), a label (the network's name, read before the handle) and the handle itself. The first six people fill the first column and the rest the second; keep an even count so the two columns end together.

They point to # as a placeholder: put each person's URL in place of it. A link's accessible name is the network and the handle ("GitHub: sven-aldous"), the glyph is hidden from screen readers, and the handle is set left to right on a right-to-left page because handles are identifiers.

The icon sets blocks use don't include brand logos, so each network gets a plain glyph (a fork for GitHub, an at sign for X, a briefcase for LinkedIn) and its name is in the text for screen readers. If your project has brand icons, swap the three icons at the top of the row; nothing else depends on them.

On a grid with six shared rows: each column's list lays its rows on the grid's rows, so a row that is taller because the person has three handles makes its neighbour taller too, and the rules between rows run straight across the divider. On a phone there is no grid, just the first list and, once you press Show all, the second.

Below md the columns become one list: the first six people, then a Show all 12 button in a band under them. The button is a disclosure that reports whether the rest is shown and which list it controls, and its label never changes. The links wrap onto their own lines under the role.

The grid's top rule and the divider's + mark come from Guides; each row draws only a bottom border and the last row of each column draws none, so the next block's top rule closes the block. The divider is the second column's start border, so it follows the page direction.