Alert

Define an alert using any of the normal bootstrap alert classes or use the CoreLogic defined alert color styles. For example: apply alert-green to use green. Valid colors are black, bright-blue, green, yellow, red, salmon, and orange. You can add a column class such as col-md-6 to the div with alert to give your alert variable size based on screen size per bootstrap grid definitions.

Modular install (In case you don't want to load all of CLUI.)

In your code add the @corelogic/clui/dist/css/components/fonts.css first and then the @corelogic/clui/dist/css/components/alert.css files from your npm repository. Make sure to load jquery.min.js and then the @corelogic/clui/dist/js/corelogic-ui.min.js file from your npm packages somewhere in your page.

REQUIRES JAVASCRIPT
This element requires both jQuery and corelogic-ui.min.js to function properly.

If you would like to only load the alerts, make sure to load @corelogic/clui/dist/js/components/alert.js.

Base Alert

Error: Enter a valid email address

Your changes have been saved. 
<div class="alert alert-salmon col-xs-6">
  <div class="row">
    <i class="fa fa-exclamation-triangle"></i>
    <span>Error:</span>
    Enter a valid email address
  </div>
</div>
<br>
<div class="alert alert-green col-xs-8 col-md-offset-4">
  <div class="row">
    <i class="fa fa-check-circle"></i>
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
    Your changes have been saved.
  </div>
</div>

Global Alert

A global alert is an animated alert that shows at the top of the page and then disappears after the defined timeout. The global alert can be triggered by a javascript call window.clui.globalAlert() which can take an object of parameters:

message - Required. The alert message.

alertType - Optional. The alert type. Possible values: black, bright-blue, green, yellow, red, salmon, orange. Default is orange.

fontawesomeIcon - Optional. The font awesome icon without the fa fa- parts. e.g., fa-superpowers would just be superpowers. Default is no icon.

timeout - Optional. The time in milliseconds before the alert goes away. Default is 5 seconds.

Global Alerts do stack.

<button class="btn btn-danger"
onclick="window.clui.globalAlert({
  message: 'This is a test and only a test.',
  alertType: 'green',
  fontawesomeIcon: 'superpowers',
  timeout: 5000
  })">Trigger Global Alert</button>

Global Error Banner

To view an example on a full page with other elements, please visit the global error page.

The main difference between a global error banner and a global alerts banner is the global error banner pushes all content down where as the global alerts banner goes over the top content, but does not remain docked at the top.

<div class="alert alert-error" role="alert">
  <i class="fa fa-first-order"></i>
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
  <strong>This is the title of the error message.</strong> Probably some details too.
</div>

Fixed Global Error Banner

This error banner uses fixed positioning so that it goes over top of the navigation but remains docked at the top.

<div class="alert alert-error alert-fixed" role="alert">
  <i class="fa fa-first-order"></i>
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
  <strong>This is the title of the error message.</strong> Probably some details too.
</div>