Hiring Split Team Block for React

Edit ROLES at the top of the file: a title, a department and a location for each, with a stable id. Keep the location specific ("Leeds, hybrid"), never just "Remote". The list shows five; OPEN_ROLES is the total behind the button, and PEOPLE and COUNTRIES feed the first figure. The list is a real list named "Open roles", each title an h3 under the section's h2.

All of them are links (href="#"): point each role at its posting or your applicant tracking system, and the button at your careers page. A role's whole row is the click target: the title's link stretches over the row with an ::after layer, so the row has one name, one tab stop and a focus ring around the whole row. The Shine Button renders the link it's given with render, with nativeButton={false}.

The block has one main action, seeing every role, so it is the one filled control and gets the Shine Button: a band of light sweeps across it once on hover and keyboard focus (with reduced motion it fades in instead). The roles are links, not buttons, so they never compete with it.

Yes. The split, the list and the dividers follow the reading direction, and the arrow at the end of each row mirrors, so it points the way the row leads. The figures are wrapped so a number stays whole.

Below the lg breakpoint the pitch comes first, with the figures in two cells under the title and the button under them, then the roles, rail to rail under a rule with + marks. A title that doesn't fit wraps, and its chip and location wrap with it; nothing scrolls sideways at 320 pixels. The block ends on the last row, with no closing rule.

The pitch and the list fade up once when the page loads, with CSS transitions, and an arrow slides a little on hover. With reduced motion the entrances and the slide are off and the Shine Button fades its light in instead of sweeping.