Alerts and Messaging Patterns

The styling is in "ux-prototype/custom-bootstrap/css/scss/custom-bootstrap/_pattern-messaging.scss"

The icon font referrenced for messaging can be found in "bootstrap/css/scss/custom-bootstrap/_admin-icons.scss"

The font itself is located in "ux-prototype/custom-bootstrap/fonts/UX-icons"

General Message

This can be used to convey general information to the user without providing an icon to convey any level of severity.

The use the following 'class' to create the basic alert container - .alert AND .alert-mage




	<div class="alert alert-mage" role="alert">
		<This is general messaging.</strong> No icon to inform the user about its severity.	
	</div>

Dismissible Message

"Dismissible" alerts are messages that the user can remove.

To make the alert dismissable includes .alert-dismissible in the <div> 'class'


'Button' for close control on alert:

	<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>

Success Message

This message includes a green checkmark to indicate the 'success' of an action.

'Success' icon

	<div class="alert alert-mage alert-success" role="alert"><span aria-hidden="true"></span><span class="sr-only">Success</span> ... </div>

Informational Message

This message includes a blue 'info' mark to indicate the informational nature of the message.

'Information' icon

	<div class="alert alert-mage alert-info" role="alert"><span aria-hidden="true"></span><span class="sr-only">Information</span> ... </div>

Warning Message

This message includes an orange 'caution' mark to indicate the cautionary nature of the message.

'Warning' icon

	<div class="alert alert-mage alert-warning" role="alert"><span aria-hidden="true"></span><span class="sr-only">Warning</span> ... </div>

Error Message

This message includes a red 'error' icon to indicate that something severe has occurred. It is recommended that this level of alert not be made 'dismissible'.


'Error' icon

	<div class="alert alert-mage alert-error" role="alert"><span aria-hidden="true"></span><span class="sr-only">Error</span> ... </div>