• Basic example

• Examples

• How to add a close link to a notification
• How to fade in and out notifications
• How to dynamically add notifications

Basic example

This basic example shows two notifications when the page loads.

Scenario

• 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.

Code

<!-- Display first notification -->
<growl-notification>
    One
</growl-notification>

<!-- Display second notification -->
<growl-notification>
    Two
</growl-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;
}