Notification Center

What it does

A bell that opens a panel of updates — three entries, each with a title, a description, a date, an image and a link.

It's the pattern people know from apps, used here to surface what's changed on your site without giving it a whole page.

Where you would use it

Perfect for SaaS dashboards, product changelogs, "what's new" announcements, web apps, and any site that needs a lightweight, native-feeling notification hub.

Controls

26 controls.

Working through the panel

Filling it in

Each of the three slots takes the same five fields: an Update title, a description, a link, a date and an image.

Write the titles as things that happened, not as categories. New feature tells the visitor nothing; Dark mode is here tells them everything, and it's the same number of words.

Set the dates properly. They're what make the panel read as maintained rather than as a static block someone wrote once.

And set the links. An update that mentions something new but doesn't take you to it is a small frustration repeated three times.

States and events

Variant switches between the closed and opened states, which is how you design the panel on the canvas — the same problem every popover component has.

Set it to the opened state while you're styling, and back to default before you publish.

There's also a Tap event handler on the component, plus change handlers on each field, so something else on the page can respond when a visitor opens the panel or interacts with an entry.