Top Bar Banner Block for React

Edit RELEASE at the top of the file: the product and version in medium weight (name), the news after it (news), the link's words (link) and where it goes (href). Keep the whole line to about 50 characters (this one is 47): it then stays on one line on a desktop and wraps to two at most on a 320-pixel phone, where the centred text has about 190 pixels. The link never breaks inside itself, so its arrow stays with its words, and the link text says where it goes rather than "Learn more". The sentence sits in a bdi, so in a right-to-left page its full stop stays at its end.

The strip sits in a one-row CSS grid. Dismissing it eases the row from 1fr to 0fr and the opacity to 0 over 300 ms, so the page below rises smoothly instead of jumping, and no height is measured in script. The strip's padding lives inside that row, so it folds to nothing; its top rule then lies on the next block's top rule and disappears into it. The bar stays in the page but becomes inert, out of the tab order and hidden from screen readers, and the section drops its "Announcement" label so no empty landmark is left behind. With reduced motion turned on, it closes at once.

Where Tab would have taken it: to the first link, button or field after the bar on the page, such as your navbar's first link or the hero's first link, instead of being lost with the button. A polite status line says "Announcement dismissed." for screen readers. When nothing on the page comes after the bar, as in this preview, focus rests on the page and the status line still speaks.

Remember the dismissal under a key for this announcement, such as dismissed-quillmoor-3, so the next announcement shows again. A cookie is the right store for a top bar: the server reads it and leaves the bar out of the page, so it never flashes. Reading localStorage after the first render would show the bar and then fold it away on every visit, moving the whole page under it. The block keeps the choice for the current page only.

The section is full width, with the tint on it, and the strip's content sits in the same max-w-6xl page column as every block. Its Guides layer draws that column's two rails and one rule along its top edge that runs to the page's edges, with a plus on each crossing. It draws no bottom rule: the block below draws that line, so the boundary under the strip has exactly one. Put it first on the page, or between your navbar and your hero; every rail stays at the same x from block to block.

The line stays centred and wraps to two lines at most, the link on the second with its arrow. The dismiss button keeps its place at the end of the first line, the top end corner, and a matching empty column at the start keeps the text truly centred. In right-to-left layouts the button and the empty column swap sides and the arrow turns around; nothing scrolls sideways at 320 pixels.