The notification component provides basic feedback messages
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
<div class="notification">Default notification</div>
For the primary style, which uses our
$color-primary color, you have to add the
<div class="notification notification-primary">Primary notification</div>
For a warning style, which uses our
$color-warning-light color, you have to add the
<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.
<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.