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.


This is a standard alert. ×

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">&times;</a> </div>

Rendered HTML

This is a standard alert. ×

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">&times;</a> </div> <div data-alert class="alert-box warning round"> This is a warning alert that is rounded. <a href="#" class="close">&times;</a> </div> <div data-alert class="alert-box info radius"> This is an info alert with a radius. <a href="#" class="close">&times;</a> </div> <div data-alert class="alert-box alert round"> This is an alert - alert that is rounded. <a href="#" class="close">&times;</a> </div> <div data-alert class="alert-box secondary"> This is a secondary alert. <a href="#" class="close">&times;</a> </div>

Rendered HTML

This is a success alert with a radius. ×
This is a warning alert that is rounded. ×
This is an info alert with a radius. ×
This is an alert - alert that is rounded. ×
This is a secondary alert. ×


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">&times;</button> </div>

Rendered HTML

Your content goes here


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">&times;</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">&times;</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";




Building Blocks Using Alerts


Want more? Check out all the hot Building Blocks ⇨

Stay on top of what’s happening in responsive design.

Sign up to receive monthly Responsive Reading highlights. Read Last Month's Edition »