Announcement Notification Block for React

Edit UPDATES. Each has an id, a title, a sentence in text (keep it to about three lines, since the slide holds that much room) and a picture that picks one of three drawings; add your own drawing component for more. COUNT and the place line follow the list, so the pager and the status say the right numbers.

Dismiss folds the card into a note: "The updates are hidden", and whether you chose to see them again or not ("You chose not to see them again" or "They will show again next time"), with a Bring it back button. Nothing is stored in this demo, so a reload shows the card again. In your app, save the checkbox's answer (with the version of the news it applies to) in your own storage and skip rendering the card when it is set.

No. The slides and the folded note share one grid cell, and the one that isn't showing is unseen and inert, so the card keeps the height of the slides and the page under it never moves. Focus moves to Bring it back when the card folds and back to Dismiss when it returns.

The card is a carousel with a name, each slide is named with its title and where it is in the set, and the pager says the same ("Update 2 of 3: Funnels remember their filters") in a polite status message when you change slide. Previous and Next are real buttons, the checkbox has a visible label, and the drawings are hidden from screen readers since the sentences say the same. With reduced motion nothing slides but the slide change itself.

The card takes the width of the page and the drawing, title and sentence stack as they do on a desktop; Previous, the place and Next stay on one row, and the checkbox and Dismiss stack, with Dismiss full width.