Alerts

Alerts exist in four base variant and will consume the entire width of the parent container.

Error

If you alert needs icons, make sure to use the has-icons modifier class on the ui-alert. This will add the necessary padding for the icons.

Toggle source (Jade)
+alert('error').has-icon.has-close
	.ui-alert-icon
		+icon('lg', 'warning')
		+sprite('web', 'warning-white')
	.ui-alert-content Dorothy did not know what to say to this, for all the people seemed to think her a witch, and she knew very well she was only an ordinary little girl who had come by the chance of a cyclone into a strange land.
	+alert-close()
		+icon('lg', 'x')
		+sprite('web', 'x-white')

br
+alert('error')
	.ui-alert-content 'Please would you tell me,' said Alice, a little timidly, for she was not quite sure whether it was good manners for her to speak first, 'why your cat grins like that?'

Success

Toggle source (Jade)
+alert('success', null, true)
	.ui-alert-content This is a success alert.