Basic example

This basic example shows two notifications when the page loads.



  • Load notification with message "One" when page loads
  • Load notification with message "Two" when page loads

Reload the page to see the notifications appear in the top right corner.


<!-- Display first notification -->

<!-- Display second notification -->

The styling of the notifications is completely controlled in CSS.

The CSS used in these example pages to render notifications in the top right of the page looks like this:

growl-notifications {
    position: fixed;
    top: 150px;
    right: 10px;
    z-index: 1000;

growl-notifications growl-notification {
    background: rgba(0,0,0,0.6);
    color: white;
    padding: 15px 30px;
    width: 200px;
    display: block;
    border-radius: 5px;
    margin-top: 15px;
comments powered by Disqus