Basic alerts

Basic alerts are useful for simple interaction with the user, such as showing a state on a web application or giving a warning on a form.

To style some text as an alert, create a block element, such as a div, with the ink-alert class. This creates the outter shell of the alert, so to speak. To add some meaning, using color, add one of the following classes:

  • error for error messages
  • success for success messages
  • info for informative messages

Add a <button> element with the class close and an appropriate icon (Ink uses the &times; character), to add a simple dismiss action to your alerts.

Warning: There's a warning for you

Error: The system has failed

Done: Process completed successfully

Note: You have 5 minutes to leave, before self-destruct

<div class="ink-alert info">
<button class="ink-close">&times;</button>
<p><b>Note:</b> You have 5 minutes to leave, before self-destruct</p>
</div>

Block Alerts

Block alerts are ideal for messages that require further explanation, since they're comprised of a title, close button and description text. Implementation is similar to basic alerts, simply use the ink-alert-block class, instead of ink-alert and use an <h4> for the title and a <p> or a list for the description.

<div class="ink-alert-block success">
<button class="ink-close">&times;</button>
<h4>Thank you for buying!</h4>
<p>Your payment has been received and your plutonium will be shipped shortly. Check your e-mail for tracking information.</p>
</div>

System maintenance scheduled

Please note that, due to a platypus invasion on our datacenter early last morning, the servers will have to undergo a maintenance cleaning today at 23:00 GMT.

System is down

  • Do not panic
  • Do not call our service line
  • Breathe deep and wait an hour

Thank you for buying!

Your payment has been received and your plutonium will be shipped shortly. Check your e-mail for tracking information.