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:

<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.

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

These are alerts:

<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:

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

This is an error:

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

This is a help text:

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