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){newClose();// 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.

CSS CLASSES

Class name

Description

ink-alert

Alerts root class.

basicblock

Defines the type of alert.

infosuccesserror

Defines alert theme.

ink-dismiss

Defines a dismissing action button.

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.

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.

<divclass="ink-alert block"role="alert"><buttonclass="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>

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.

Thank you for buying!

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

Additional info

A ring of weapons-grade 99.96% pure electrorefined plutonium is enough for one bomb core.