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 messagessuccess
for success messagesinfo
for informative messagesAdd a <button>
element with the class close
and an appropriate icon (Ink uses the ×
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">×</button> <p><b>Note:</b> You have 5 minutes to leave, before self-destruct</p> </div>
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">×</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>
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.
Your payment has been received and your plutonium will be shipped shortly. Check your e-mail for tracking information.