Alerts

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 and .basic classes. This creates the outer 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 .ink-dismiss and some sort of symbol (we like to use the × HTML entity), to add a simple dismiss action to your alerts. You can test this on the examples below, just reload this page to get the alerts back.

Example

Code

<div class="ink-alert basic info">
    <button class="ink-dismiss">&times;</button>
    <p><b>Note:</b> You have 5 minutes to leave, before self-destruction</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 and .block classes, instead of .basic and use an <h4> for the title and a <p> or a list for the description.

Example

Code

<div class="ink-alert block success">
    <button class="ink-dismiss">&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>