Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
110 lines (86 sloc) 3.01 KB

Notice

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

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.

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>

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.
You can’t perform that action at this time.