Support Hub Footer Block for React

The channel's title is the link, and its box is stretched over the cell with an ::after pseudo-element, so a click or tap anywhere in the cell follows it while a screen reader meets one link per channel, named by its title ("Live chat", "Email", "Phone"). The keyboard focus ring is drawn on that stretched box, inside the cell. The links point to #, a mailto: and a tel:.

No. It's a typed value in CHANNELS: the dot is a plain status indicator and the word beside it is the real information. To make it live, set online and detail from your own data, and keep the wording next to the dot so the state is never colour alone. The dot uses the foreground tone, not green.

No. help@larkin.example uses the .example domain, which is reserved for examples, and +1 (415) 555-0136 is in the 555-0100 to 555-0199 range set aside for fiction. Replace them in CHANNELS. The phone number keeps its order in a right-to-left layout.

Each cell draws its own overshoot lines, which run slightly past its corners with a + on the top corner. With a gap of 1.5 rem (2 rem from md) the neighbouring lines never touch, and the grid is inset from the page rails so the overshoot does not reach them.

The header stacks, with the links under the question, then the three cells stack one per row, then the legal band. Nothing scrolls sideways at 320 pixels.