Inset Announcement Badge CTA Block for React

The pill is one link: edit its text, and point its href at your changelog or release post. The New badge and the green dot are decoration for the eye; the link's name is what screen readers read, so keep the text in the pill saying where it goes, such as "Read the release notes", rather than repeating the headline. Keep it short: a long label is cut with an ellipsis instead of wrapping, so the pill stays one line down to 320px. It sits above the button in the end column, and on a phone it follows the headline and the sentence. The pill is an Announcement with asChild around your link on every target, so it can be your router's link, and no role="status" is added: the link keeps its own role.

The panel is light on a light page and dark on a dark page: it uses bg-card and text-foreground, with no forced scope, so a different preset repaints it. It stands out by structure, a raised card in a muted shell with + marks on its corners, a shadow-lg and a ring-1 ring-foreground/15 hairline. For more emphasis, strengthen the ring or the shadow rather than painting the panel a fixed colour.

The Shine Button is a link: point its href at the feature or the sign-up page. A band of light sweeps across it once when the pointer arrives or it takes keyboard focus; with reduced motion the light fades in where it stands instead. It is the only primary control in the block. If you add a second action, make it an outline Button and keep the pill as the news line. The button renders the link it's given with render, with nativeButton={false}.

The headline is an h2, so it sits under the page's h1. The pill and the button are the section's two tab stops, in reading order, each with a visible focus ring. The shell, the panel and the Guides lines are plain divs with no roles (the lines are aria-hidden), so nothing is announced twice.

The panel's padding steps down from md:p-12 to p-6 and the two columns stack, headline first, so the button is on the first screen and it reads at 320px with no horizontal scroll. In a right-to-left layout the columns swap sides and the pill's arrow mirrors.

Use the card in card mid-page, between sections of copy: the muted shell sets the call to action apart without a full-bleed colour change. Near the footer, where it should read as the final, unmissable step, a plain band across the column feels more decisive.