EN FR
← jizy-messenger

Messenger example

Stackable toast notifications. Theming via :root, responsive via @container.

Default theming — viewport-pinned

Click a button to push a toaster onto the page's main .app-messages (top-pinned).

With :root overrides

This section overrides three bg colors. Trigger from here to see the new palette on the same top-pinned toaster bar.

Container-query behavior

Embedded .app-messages inside narrow / wide containers — drag the dashed corner to see the layout swap at 768px.

narrow container — mobile layout (font 1em, full width)
wide container — desktop layout (font 1.2em, 600px max)