Notifications

The notification component provides basic feedback messages

Usage

Usually a notification is used as an alert, a warning, or a form feedback, according to the style applied. Apart from the default notification style, Garden provides two variations for this component, as described below.

For the default style you don’t need to add any additional class, just .notification.

Copy<div class="notification">Default notification</div>

For the primary style, which uses our $color-primary color, you have to add the notification-primary class.

Copy<div class="notification notification-primary">Primary notification</div>

For a warning style, which uses our $color-warning-light color, you have to add the notification-warning.

Copy<div class="notification notification-warning">Warning notification</div>

As an alternative, you can create the style for a dismissable notification by adding a glyph to it.

Copy<div class="notification notification-primary">
  Dismissable notification
  <i class="notification-close glyph glyph-x"></i>
</div>

By default, a notification does not have any sizes or display. The notification atom only add some padding, border, border-radius and color properties to the element, so you are free to use it as you want.

If you want a notification with some interactivity, check out the JavaScript section for the notification component.