Build the frosted card a notification arrives in.

A notification interrupts a page from above it, which is the case glass is for: the card is a glass-panel, so it blurs and tints whatever it covers, and it wears a slightly more opaque tint than the framework’s own so it holds its own over any page.

The title and the body are empty in the markup: the script fills them from the query string with textContent, so a title cannot smuggle markup into the page. The two placeholders it looks for are notification-title and notification-body.

The card arrives and then holds still. It is deliberately quiet – no bounce, no pulse, nothing that keeps moving once it has landed – because a notification is information, and motion at the edge of the eye competes with the page the reader was already looking at. The only thing that changes is whether it is there.

Its silhouette is quiet too: the same hairline border as every other pane of glass rather than a heavy outline, and padding sized so the card is a note passed to the reader rather than a second page competing with theirs.

header-classes

The title’s own classes, on its <h4>.

close-icon-on-click

The script run when the dismiss icon is clicked.

close-icon-classes

The classes of the dismiss icon, which needs its Phosphor icon names.

title-container-classes

The classes of the row holding the title and the dismiss icon.

card-classes

Extra classes for the card itself, appended to the panel’s own.

(notification-card #:header-classes "text-lg font-bold")

((div (@@ (id notification-tray) (role status) (aria-live polite) (aria-atomic "true") (class "fixed right-8 top-8 z-32")) ""))