Foundation Alert Box

Foundation can easily create an alert box:

An alert box can be created using the .alert-box class, with optional classes: .secondary, .success, .info, .warning, or .alert:

Example

<div data-alert class="alert-box">  This is a 
    default alert box.
    </div>&lt;div data-alert 
    class="alert-box secondary">  This is a secondary alert box.
    </div>&lt;div data-alert class="alert-box success">  
    <strong>Success!</strong> This alert box indicates a successful or positive 
    action.</div>
    &lt;div data-alert class="alert-box info">  <strong>Info!</strong> 
    This alert box indicates a neutral informative change or action.</div>&lt;div 
    data-alert class="alert-box warning">  <strong>Warning!</strong> 
    This alert box indicates a warning that might need attention.</div>
    &lt;div data-alert class="alert-box alert">  <strong>Alert!</strong> 
    This alert box indicates a dangerous or potentially negative action.
    </div>

| | The alert box width is 100% of the container. | | --- | --- |

Rounded Alert Box

The .radius and .round classes are used to add rounded corners to the alert box:

Example

<div data-alert class="alert-box success radius">  
    <strong>Success!</strong> Alert box with a radius.
</div>&lt;div data-alert class="alert-box info round">  <strong>Info!</strong> Alert box that is rounded.</div>

Closing the Alert Box

To close the alert box, add the class="close" class to a link or button element and initialize Foundation JS:

Example

<div data-alert class="alert-box">  
    This is a default alert box with closing functionality.  <a href="#" class="close">&times;</a></div><script>
    // Initialize Foundation JS For Functionality
    $(document).ready(function() {    
    $(document).foundation();})
    </script>

| | × (×) is an HTML character entity representing a close button icon, not the letter "x". | | --- | --- |