Alerts
Alerts are handy elements you can drop into a form or inline on a page to communicate success, warnings, failure or just information. They'll conform to 100% of the container width you put them in.
Basic
You can create an alert box using minimal markup.
HTML
<div data-alert class="alert-box">
<!-- Your content goes here -->
<a href="#" class="close">×</a>
</div>Advanced
You can add more classes to your alert box to change its appearance.
HTML
<div data-alert class="alert-box success radius">
This is a success alert with a radius.
<a href="#" class="close">×</a>
</div>
<div data-alert class="alert-box warning round">
This is a warning alert that is rounded.
<a href="#" class="close">×</a>
</div>
<div data-alert class="alert-box info radius">
This is an info alert with a radius.
<a href="#" class="close">×</a>
</div>
<div data-alert class="alert-box alert round">
This is an alert - alert that is rounded.
<a href="#" class="close">×</a>
</div>
<div data-alert class="alert-box secondary">
This is a secondary alert.
<a href="#" class="close">×</a>
</div>Accessibility
To make your alerts conform to accessibility standards, use the markup below, which adds a handful of ARIA attributes to the alert container, and uses the <button> tag for the close button instead of <a>.
HTML
<div data-alert class="alert-box" tabindex="0" aria-live="assertive" role="alertdialog">
Your content goes here
<button tabindex="0" class="close" aria-label="Close Alert">×</button>
</div>Rendered HTML
Customize with Sass
Alert boxes can be easily customized using our Sass variables.
SCSS
$include-html-alert-classes: $include-html-classes;
// We use this to control alert padding.
$alert-padding-top: rem-calc(11);
$alert-padding-default-float: $alert-padding-top;
$alert-padding-opposite-direction: $alert-padding-top + rem-calc(10);
$alert-padding-bottom: $alert-padding-top + rem-calc(1);
// We use these to control text style.
$alert-font-weight: bold;
$alert-font-size: rem-calc(14);
$alert-font-color: #fff;
$alert-font-color-alt: scale-color($secondary-color, $lightness: -66%);
// We use this for close hover effect.
$alert-function-factor: -14%;
// We use these to control border styles.
$alert-border-style: solid;
$alert-border-width: 1px;
$alert-border-color: scale-color($primary-color, $lightness: $alert-function-factor);
$alert-bottom-margin: rem-calc(20);
// We use these to style the close buttons
$alert-close-color: #333;
$alert-close-position: rem-calc(5);
$alert-close-font-size: rem-calc(22);
$alert-close-opacity: 0.3;
$alert-close-opacity-hover: 0.5;
$alert-close-padding: 5px 4px 4px;
// We use this to control border radius
$alert-radius: $global-radius;
// We use this to control transition effects
$alert-transition-speed: 300ms;
$alert-transition-ease: ease-out;Semantic Markup With Sass
You can create your own alert boxes using our Sass mixins.
Basic
You can use the alert() mixin to create your own alert box, like so:
SCSS
.custom-alert-box {
@include alert();
}HTML
<div data-alert class="custom-alert-box">
<a href="#" class="close">×</a>
</div>Advanced
You can further customize your alert boxes using the provided options in the alert() mixin:
SCSS
.custom-alert-box {
@include alert(
// Adjust the background of the alert
$bg: #cccccc,
// Give a border to the alert box
$radius: true
);
.close {
@include alert-close();
}
&.alert-close {
opacity: 0;
}
}HTML
<div data-alert class="custom-alert-box">
<!-- Your content goes here -->
<a href="#" class="close">×</a>
</div>Configure With Javascript
It's easy to configure alert boxes using our provided Javascript. You can use with data-attributes or plain old Javascript. Make sure jquery.js, foundation.js, and foundation.alert.js have been included on your page before continuing. For example add the following before the closing <body> tag:
HTML
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.alert.js"></script>Binding to Events
You can also listen for a event that fires when an alert box is closed.
JS
$(document).on('close.fndtn.alert', function(event) {
console.info('An alert box has been closed!');
});Adding New Alert Content After Page Load
If you add new content after the page has been loaded, you will need to reinitialize the Foundation JavaScript by running the following:
$(document).foundation();Reflow will make Foundation check the DOM for any elements and re-apply any listeners to them.
$(document).foundation('alert', 'reflow');Sass Errors?
If the default "foundation" import was commented out, then make sure you import this file:
SCSS
@import "foundation/components/alert-boxes";