Javascript note

These examples are using the ink-dismiss class to add a "close" button. If you are interested in this behaviour, you need to include the Ink.UI.Close Ink component. Don't worry, it's already included with autoload. If you're not using autoload, just add the following code somewhere on your page:

Ink.requireModules(['Ink.UI.Close_1'], function (Close) {
    new Close();  // That was close
});

Basic principles

Alerts are useful whenever there is the need to give some sort of visual feedback to a user action or to give your users information.

• This class must be used for the alerts to work.

Basic alerts

• Css classes:
• ink-alert
• basic
• info
• warning
• success
• error
• ink-dismiss

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.

<div class="ink-alert basic" role="alert">
    <button class="ink-dismiss">&times;</button>
    <p><b>Warning:</b> There's a warning for you</p>
</div>

Block alerts

• Css classes:
• ink-alert
• block
• info
• warning
• success
• error
• ink-dismiss

Block alerts are ideal for messages that require further explanation, since they're comprised of a title.

<div class="ink-alert block" role="alert">
    <button class="ink-dismiss">&times;</button>
    <h4>System maintenance scheduled</h4>
    <p>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.</p>
</div>