Messages

Description

To visually emphasize different types of messages to the user.  We have

Info
To provide additional information to the user.
Alert
To alert the users of certain information such as "Remember to perform JV before deadline".
Cofirm
To confirm a message to the users such as "Item ABC deleted".
Error
To bring attention to the user of an error such as an error in a form.
Help
To provide additional hints. Usually next to an input element.  Need to use this inside a form element.

Sample

This is an info message:

This is an info note.
<div class="msg info">This is an info note.</div>

You can add a h4 header to the any of these messages to emphasize them visually.

Look Ma!

This is an info note.
<div class="msg info">
<h4>Look Ma!</h4>
This is an info note.</div>

These are alerts:

This is an alert.

More alert

Please remember to:
  • buy milk
  • pick up dry clean
<div class="msg alert">This is an alert.</div>
<div class="msg alert">
<h4>More alert</h4>
Please remember to:
<ul>
    <li>buy milk</li>
    <li>pick up dry clean</li>
</ul>
</div>

This is a cofirmation:

Success

Item ABC has been added.
<div class="msg confirm">
<h4>Success</h4>
Item ABC has been added.</div>

This is an error:

Error

Name is a required field.
<div class="msg error">
<h4>Error</h4>
Name is a required field.</div>

This is a help text:

MM/DD/YYYY
<div class="help">MM/DD/YYYY</div>