Notices

Notices are a great way to notify users about time sensitive information, such as errors or success messages. To use the notice plugin, you will need to follow these steps:

1. Add the HTML markup for the notice to the page. An example of the markup, with specific parts highlighted can be seen below. The parts include:

   notice container

   A <div> element with a class of .wdn_notice. All of the markup for the notice is contained within this container.

   (optional) notice-type class

   This class will style the notice. By default (no class provided) the notice is purely informational. Optional classes include .affirm (success), .alert (warning), and .negate (error)

   (optional) overlay location attribute

   The overlay location is defined by the data-overlay attribute. This optional attribute allows placing the notice over specific sections of the page. Possible values are header and maincontent.

   (optional) duration attribute

   The notice can be displayed for a specific amount of time and then automatically hidden. The duration can be specified by the data-duration attribute. The value of the attribute must be an integer of seconds. Note that it is a best practice to not hide important information automatically. It is impossible to know whether or not the content has been read by the user unless they interact with the notice and manually close it. The use of this attribute is discouraged under most circumstances.

   (optional) close button

   The close button must be contained in a <div> element with a class of .close. The close button itself must be an <a> element, with text that describes the action ("close this notice").

   message container

   The message container must be a <div> element with a class of .message. The message must contain a title, which is marked up with a .title class. It must also contain content, which should be placed in <p> elements.

2. Load the notice plugin with <script>WDN.initializePlugin('notice');</script>

<div class="wdn_notice {notice-type}" data-overlay="{overlay-location}" data-duration="{duration}">
  <div class="close">
    <a href="#">Close this notice</a>
  </div>
  <div class="message">
    <p class="title">Important Alert!</p>
    <p>This is my content. <a href="#">This is some link text</a></p>
  </div>
</div>

Example

<div class="wdn_notice">
  <div class="close">
    <a href="#">Close this notice</a>
  </div>
  <div class="message">
    <p class="title">This is my Title!</p>
    <p>This is my content. <a href="#">This is some link text</a>.</p>
  </div>
</div>
<div class="wdn_notice affirm">
  <div class="close">
    <a href="#">Close this notice</a>
  </div>
  <div class="message">
    <p class="title">Great Success!</p>
    <p>This is my content. <a href="#">This is some link text</a>
    </p>
  </div>
</div>
<div class="wdn_notice negate">
  <div class="close">
    <a href="#">Close this notice</a>
  </div>
  <div class="message">
    <p class="title">Denial Notice!</p>
    <p>This is my content. <a href="#">This is some link text</a>
    </p>
  </div>
</div>
<div class="wdn_notice alert">
  <div class="close">
    <a href="#">Close this notice</a>
  </div>
  <div class="message">
    <p class="title">Important Alert!</p>
    <p>This is my content. <a href="#">This is some link text</a>
    </p>
  </div>
</div>
<script>
  WDN.initializePlugin('notice');
</script>