Notice
ready

Introduction

Used to provide helpful information to users. Can point upwards or downwards for extra contextual help.

To dynamically show a notice that slides in at the top of the page, you need to make use of the $.pfNotice scripts.

Examples

Default notice

This is a default notice. 
<div class="notice" >
      This is a default notice.
    </div>

Default notice with close

Default notice with close action. x 
<div class="notice notice--close" data-js="notice">
      Default notice with close action.
      <a href="#" class="link--silent icon icon--16x16 icon--box notice__close notice__close--default" data-js="notice-close">x</a>
    </div>

Default notice pointing upward

Default notice pointing upward. 
<div class="notice notice--pointer-up" >
      Default notice pointing upward.
    </div>

Default notice pointing downward

Default notice pointing downward. 
<div class="notice notice--pointer-down" >
      Default notice pointing downward.
    </div>

Info notice

This is an info notice. 
<div class="notice notice--info" >
      This is an info notice.
    </div>

Info notice with close

Info notice with close action. x 
<div class="notice notice--info notice--close" data-js="notice">
      Info notice with close action.
      <a href="#" class="link--silent icon icon--16x16 icon--box notice__close notice__close--info" data-js="notice-close">x</a>
    </div>

Info notice pointing upward

Info notice pointing upward. 
<div class="notice notice--info notice--pointer-up" >
      Info notice pointing upward.
    </div>

Info notice pointing downward

Info notice pointing downward. 
<div class="notice notice--info notice--pointer-down" >
      Info notice pointing downward.
    </div>

Success notice

This is a success notice. 
<div class="notice notice--success" >
      This is a success notice.
    </div>

Success notice with close

Success notice with close action. x 
<div class="notice notice--success notice--close" data-js="notice">
      Success notice with close action.
      <a href="#" class="link--silent icon icon--16x16 icon--box notice__close notice__close--success" data-js="notice-close">x</a>
    </div>

Success notice pointing upward

Success notice pointing upward. 
<div class="notice notice--success notice--pointer-up" >
      Success notice pointing upward.
    </div>

Success notice pointing downward

Success notice pointing downward. 
<div class="notice notice--success notice--pointer-down" >
      Success notice pointing downward.
    </div>

Error notice

This is an error notice. 
<div class="notice notice--error" >
      This is an error notice.
    </div>

Error notice with close

Error notice with close action. x 
<div class="notice notice--error notice--close" data-js="notice">
      Error notice with close action.
      <a href="#" class="link--silent icon icon--16x16 icon--box notice__close notice__close--error" data-js="notice-close">x</a>
    </div>

Error notice pointing upward

Error notice pointing upward. 
<div class="notice notice--error notice--pointer-up" >
      Error notice pointing upward.
    </div>

Error notice pointing downward

Error notice pointing downward. 
<div class="notice notice--error notice--pointer-down" >
      Error notice pointing downward.
    </div>

JS Notice alert

<button class='btn btn--primary debug--show-notice' data-notice-content='You can only get rid of me by closing me... muahahahaha!' data-notice-dismissible='true' data-notice-type='success'>Show dismissible notice</button>

JS Dismissable Notice alert

<button class='btn btn--primary debug--show-notice' data-notice-content='An error occurred' data-notice-type='error'>Show auto-dismiss notice</button>

Dependencies

  • src/styles/base/*.scss
  • src/styles/components/elements/_icon.scss
  • src/styles/components/blocks/_notice.scss
  • src/scripts/modules/jquery.pfNotice.js

Usage

Class/JavaScript Hook Description Required?
.notice Creates a notice element that can have a wide range of children as content. Required
.notice--pointer-up Creates an upward pointer above the notice block. Optional
.notice--pointer-up Creates a downward pointer below the notice block. Optional
.notice--info Creates an info styled version Optional
.notice--success Creates a success styled version Optional
.notice--error Creates an error styled version Optional
.notice--close Adds necessary styling for a notice with a close action. Optional
.notice__close Added to the close link to apply its correct styling and positioning. If used, the following classes are also required on the element: .icon and .link--silent, which is less expensive than recreating or extending these styles in the CSS. Required
[data-js=notice] Add to any notice that has JavaScript events bound to it. Currently, this only applies to notices with close actions. Optional
[data-js=notice-close] Added to close link to bind necessary JavScript event. Required
$.pfNotice.open({content: 'Hello'}) String. Content displayed in the notice. Can contain HTML. Required when using the JS API
$.pfNotice.open({type: 'success'}) String. The style of the notice, like 'success', 'error', etc. Optional. 'Default' by default.
$.pfNotice.open({dismissable: true}) Boolean. true to be a dismissible notice, false to dismiss automatically Optional. False by default.
$.pfNotice.open({closeDelay: 7000}) Integer. Number of milliseconds before the notice closes Optional. Default is 7000ms