Notice

Notification boxes for displaying informational, error, warning, or success messages.

Top

Usage

A notice provides contextual messages for specific types of actions — usually as a flash message. Notices work best when paired with the global info, success, warning, and error state classes.

<div class="notice">
    <b>Hey!</b> You should check this out.
</div>

<div class="notice is-info">
    <b>Take Note!</b> This is informational, but not critically important.
</div>

<div class="notice is-success">
    <b>Congrats!</b> You successfully did something.
</div>

<div class="notice is-warning">
    <b>Warning!</b> Somethings gone wrong, you should check it out.
</div>

<div class="notice is-error">
    <b>Oh No!</b> Things are broken, we don't know why.
</div>
All state classes will require styling. The classes simply exist for semantic and structuring reasons.

Custom Markup

Notices are designed to gracefully handle links, paragraphs, lists, hrs, and blockquotes.

<div class="notice">
    <p>This message is so long, that it had to be split into 2 paragraphs.</p>
    <hr>
    <p>Sorry about that, won't happen again. <a href="">Learn why</a>.</p>
</div>

They also support titles with .notice-title. We suggest pairing with h1-h6 tags.

<div class="notice">
    <h2 class="notice-title">Pay Attention</h2>
    <p>We have something important to tell you.</p>
</div>

Closing Notices

Make a notice dismissable by placing a close button.

<div class="notice">
    <button type="button" class="notice-close"><span class="x"></span></button>
    <p>This message isn't that important, so we made it dismissable.</p>
</div>
The JavaScript for closing notices will need to be custom written. Toolkit does not provide any functionality for this.
Top

ARIA

The alert or status role is required when supporting ARIA. Learn more about this role.

<div class="notice is-info" role="status">...</div>
<div class="notice is-success" role="status">...</div>
<div class="notice is-warning" role="alert">...</div>
<div class="notice is-error" role="alert">...</div>
Top

Variables

Variable Default Description
$notice-class .notice CSS class name for the notice wrapper.
$notice-class-close .notice-close CSS class name for the notice close button.
$notice-class-title .notice-title CSS class name for the notice title.