--- name: notification url: /notification --- ## Notification

An alert that pins to the corner of the screen when triggered by JavaScript. It can be set to disappear after a certain period of time, or to stay put until the user clicks on it. A custom action can be asigned to a notification as well.

Optionally, the notifications directive can also tap into the browser's native notification support, if it exists.

Dynamic Notification Static Notification This notification is static, it works similarly to a programmatic with some subtle differences
***

There are two ways to access a notification. One via the static method and also dynamically (programmatic).

### Basic HTML The static method is best used for prototyping since it doesn't involve any programming. You can create a Static Notification with this basic HTML
```html Static Notification

This notification is static, it works similarly to a programmatic with some subtle differences.

```
Static Notification

This notification is static, it works similarly to a programmatic with some subtle differences.

### Advanced HTML The FoundationApi service is a pretty useful service, one function of it is to send information from directives, controllers, and other parts to other directives, controllers, etc. It's a messaging system for the entire application. You can create a Dynamic Notification with this basic HTML
```html Dynamic Notification ```
Dynamic Notification
And then send it a notification with via FoundationApi: ````js foundationApi.publish('main-notifications', { title: 'Test', content: 'Test2' }); ```` You can also use the `fa-notify` directive for simpler messages and prototyping: ````html Launch notification ```` #### Additional Options On top of setting a title and content, you can also set: - image - enter the source - position - color *** ### Sass Variables You can customize with... ```scss $notification-default-position: right top; $notification-width: rem-calc(400); $notification-offset: $global-padding; $notification-background: $primary-color; $notification-color: white; $notification-padding: $global-padding; $notification-radius: 4px; $notification-icon-size: 60px; $notification-icon-margin: $global-padding; $notification-icon-align: top; ```