To visually emphasize different types of messages to the user. We have
- To provide additional information to the user.
- To alert the users of certain information such as "Remember to perform JV before deadline".
- To confirm a message to the users such as "Item ABC deleted".
- To bring attention to the user of an error such as an error in a form.
- To provide additional hints. Usually next to an input element. Need to use this inside a form element.
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.
Look Ma!This is an info note.
<div class="msg info"> <h4>Look Ma!</h4> This is an info note.</div>
These are alerts:
More alertPlease 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:
SuccessItem ABC has been added.
<div class="msg confirm"> <h4>Success</h4> Item ABC has been added.</div>
This is an error:
ErrorName is a required field.
<div class="msg error"> <h4>Error</h4> Name is a required field.</div>
This is a help text: