Alerts exist in four base variant and will consume the entire width of the parent container.
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.
+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?'
+alert('success', null, true) .ui-alert-content This is a success alert.