Feature Card Trio CTA Block for React

Edit ALERTS at the top of the file: each has an id, a title, a one-line description and a Lucide icon. INITIAL lists the ids that start switched on (Security by default). The rows are a plain list, so two or five alerts work without changing the layout.

It is a real button, not a link. At zero alerts it is aria-disabled and points at the hint with aria-describedby, so a screen reader hears why it is off. With one or more it saves: here that only sets a "Saved" message in the polite hint line, and in your app save is where the request goes. Flipping any switch afterwards clears the message.

SlidingNumber renders the real count as text for screen readers and rolls the visible digits with a CSS transition when it changes. The word after it switches between "alert" and "alerts". The rolling stops with reduced motion, so the digit just changes.

Each switch is labelled with its row's title ("Security alerts") and has a larger invisible hit area for touch. They are controlled by one list of ids, so the count, the icon and the button label always agree. The switches are neutral (data-checked:bg-foreground), so the Shine Button stays the only primary element. Keyboard users move through the switches with Tab and flip them with Space.

The page column's rails and top rule come from Guides and join the block above and below. The divider is a border-s on the second column from lg, with a + mark where it meets the top rule. The rows' two ruled lines get their marks from a second Guides with rules="none". Below lg the columns stack and a rule with marks separates them.

The columns stack: the headline, then the rows, then the button, which stays on the first screen. The row descriptions stay available to screen readers but are hidden visually so the three rows stay short, and the hint reserves three lines so a longer message never moves the page.