Account services

Admonitions

Where system messages are dynamically generated, sometimes you need static admonitions for your narrative. We have made five types available. They are: tip-msg, note-msg, important-msg, caution-msg and warning-msg.

The tip-msg can be used for tip and information boxes. For information, write “Information” as the heading. The category is for information you think might be helpful for the user, but he/she doesn’t have to react to.

Tip

Do not hit your thumb with the hammer, it hurts!

The note category is slightly more severe. It is for information the user must read even if he/she is just skimming the page. A relevant use for the note admonition is to make disclaimers. You should then use “Disclaimer” as the heading.

Note

Using a hammer to put together your computer is bad.

"Important" is slightly stronger than "Note."

Important

Watch where you’re swinging that hammer!

Caution

Hitting your thumb with a hammer may lead to an unwanted trip to the hospital!

Warning

Do not, under any circumstances, admit that you hit your own thumb with a hammer. The ridicule you will face is astounding!

They all follow the same template. A <div> with the correct class, a <div> for the textual type of the admonition and a <p> for the message. The class can be one of tip-msg, note-msg, important-msg, caution-msg or warning-msg.

  <div class="tip-msg">
    <strong>Tip</strong>
    <p>Do not hit your thumb with the hammer, it hurts!</p>
  </div>
  

Light-weight coding

If you’re sure the user understands the icon, or it is obvious from the message, you can code it without a <strong> and a <p>.

Ensure the hammer head is securely attached.

List coding

You can use a list in place of the paragraph.

Caution
  • Message one
  • Message two