Full-Bleed Border Accent Banner Block for React

Edit UPDATE at the top of the file: the chip (chip), the sentence (news), the link's words (link) and its destination (href). The chip, the sentence and the link flow as one piece of text, so on a 320-pixel phone they wrap onto a second line rather than overflowing; keep the sentence to about 35 characters so two lines are enough.

It is border-s-2 border-foreground on the box that holds the text. Make it border-s-4 for a heavier bar, or swap border-foreground for another theme token such as border-info. It's a start border, so it follows the reading direction, and because the padding is inside that box the bar runs the strip's full height at every width.

The top bar is centred, one line of text with a dismiss button. This one is start-aligned, has a chip and no button, and its emphasis is the structural bar along the start edge. Both use the same tint, the same height and the same drafting lines, so they stack and swap without a visible seam.

Yes. The tint is bg-muted/50, the bar and the link use the foreground colour and the chip is an outline Badge, so every colour is a token and it reads the same in light and dark. There's no bg-foreground panel.

The tint is on the full-width section; the message sits in the same max-w-6xl page column as every block. The Guides layer draws the 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.