Notices are messages that either inform you about the result of an action or the state of something.
An element can be turned into a notice, by giving it the class .notice. There are five types of notices, though:
| type of notice | which class to apply | use for ... |
|---|---|---|
| Muted (default) | — | ... all notices, where no other type applies or which should have low visibility. |
| Danger | .is-danger |
... notices, that denote a dangerous, negative or deleted state or indicate that an action failed. |
| Warning | .is-warning |
... notices, that denote a critical or possibly dangerous state in need of your attention, or indicate an action with possibly unexpected outcome. |
| Success | .is-success |
... notices, that denote a positive state or indicate that an action succeeded. |
| Info | .is-info |
... notices, that inform neutrally about a state or the result of an action. |
<div class="notice">Muted notice</div>
<div class="notice is-danger">Danger notice</div>
<div class="notice is-warning">Warning notice</div>
<div class="notice is-success">Success notice</div>
<div class="notice is-info">Info notice</div>Sometimes a notice needs additional weight, possibly, because an action is critical. In these cases, it is in order, to apply the class .is-filled, to make the notices even more noticeable.
<div class="notice is-filled">Muted notice</div>
<div class="notice is-filled is-danger">Danger notice</div>
<div class="notice is-filled is-warning">Warning notice</div>
<div class="notice is-filled is-success">Success notice</div>
<div class="notice is-filled is-info">Info notice</div>Sometimes the notice applies to the whole page/site/instance. In these cases, the notice should be put either directly above or below the header. Also you should give it the class .is-banner which changes some styles to make it better fit into the position. And don't forget, to center the content in a wrapper with the .container class.
<header class="header">
<div class="container header--container">
<div class="header--brand">
<a class="header--site-name" href="#!">Your site</a>
</div>
<div class="header--menu">
<a class="header--item" href="#!">Link</a>
<a class="header--item" href="#!">Link</a>
<div class="header--separator"></div>
<a class="header--item" href="#!">Link</a>
</div>
</div>
</header>
<div class="notice is-banner is-warning">
<div class="container">
Warning banner
</div>
</div>