---
name: notification
url: /notification
title: Notification
---
Notification
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:
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 Foundation Api service is pretty useful, 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:
And then send it a notification with via FoundationApi:
foundationApi.publish('main-notifications', { title: 'Test', content: 'Test2' });
You can also use the `zf-notify` directive for simpler messages and prototyping:
Launch notification
Additional Options
On top of setting a title and content, you can also set:
- image - enter the source
- position
- color
Sass Mixins
Use our mixins to create custom notification styles.
.custom-notification {
// Extend the base selector to get core styles
@extend %notification;
// Use the layout mixin to position and structure the notification
@include notification-layout(
$x: left, // Can be left, middle, or right
$y: top, // Can be top or bottom
$size: 200px, // Width of notification
$offset: 1rem // Offset from the edge of the window
);
// Use the style mixin to style the notification
@include notification-layout(
$background: #fff, // Background color
$color: #000, // Text color
$padding: 1rem,
$radius: 4px
);
.custom-notification-icon {
@include notification-icon(
$size: 50px, // Width and height of the icon
$margin: 1rem, // Right-hand margin
$align: top // Can be top, middle, or bottom
);
}
}
Sass Variables
You can customize notifications with these Sass variables:
$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;