Social Links Banner Block for React

Edit CHANNELS at the top of the file: each entry is a name and an href. Five short names fit one line on a 320-pixel phone under the label; a longer list wraps to a second row, and the dot after the last link of a row simply stays where it is. The label is FOLLOW.

A text "·" between links would be read aloud by some screen readers and copied with the text. Here each dot is a three-pixel round box on the list item's ::after with no content, so it is only paint. It is hidden after the last item with last:after:hidden.

Not in the demo, because its links go to #. The arrow is there to say "this leaves the page" for links to other sites, so for those add target="_blank" and rel="noopener" and a visually hidden "(opens in a new tab)" after the name. For links inside your own site, remove the arrow.

Hover doesn't exist on touch, so the arrow is hidden below the small breakpoint and the dots tighten, which keeps the five links on one line at 320 pixels. Keyboard focus on a wide screen still shows the arrow and a focus ring. Each link is 24 pixels tall or more, and the dots keep them apart.

The section is full width and the line sits in the same max-w-6xl page column as every block. Its Guides layer draws the column's rails and one rule along the top with a plus on each crossing, and no bottom rule: the block below draws that line, so a stack never doubles it.