Scroll Marquee Banner Block for React

The button before the row toggles the Marquee's paused state, and its visible word changes between "Pause" and "Play"; its accessible name is that word, so a screen reader hears what pressing it will do. Separately, hovering the row or focusing a headline holds it for as long as the pointer or focus stays. Below the small breakpoint the word is visually hidden and the pause icon remains, which keeps the strip on one line.

Edit HEADLINES at the top of the file: each has a bold lead and a muted rest, and every headline links to # for you to replace. Keep them undated: "this week" and "now" go stale only when you leave the banner up, but a calendar date is wrong the day after. Eight headlines fill any desktop width; the row repeats itself if yours is shorter.

They can: hovering the row stops it. Keyboard users get the same, since focusing a link holds the row and the focus ring is drawn inside the strip, not clipped by it. The repeated copy that makes the loop is inert, so Tab goes through each headline exactly once.

The animation is removed, the repeated copy is hidden, the edge fade goes, and the row becomes a sideways scroller that starts at the first headline. The Pause button is hidden because there is nothing to pause.

A ticker is a different kind of line from a notice: the faint tint of the theme's muted colour (on the full-width section, not only on the column) marks it as the page's news band. There is no primary colour in the strip; the status dot and the weight carry it.