--- title: Alert boxes ---

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.

*** {{> examples_alert_basic}} ***

Basic

You can create an alert box using minimal markup.

HTML

{{> examples_alert_basic_rendered}}

Rendered HTML

{{> examples_alert_basic}}

Advanced

You can add more classes to your alert box to change its appearance.

HTML

{{#markdown}} ```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. ×
``` {{/markdown}}

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. ×
--- ## Customize With Sass Alert boxes can be easily customized using our Sass variables.

SCSS

{{#markdown}} ```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; ``` {{/markdown}}

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

{{#markdown}} ```scss .custom-alert-box { @include alert(); } ``` {{/markdown}}

HTML

{{#markdown}} ```html
×
``` {{/markdown}}

Advanced

You can further customize your alert boxes using the provided options in the `alert()` mixin:

SCSS

{{!-- @import "foundation/components/alert-boxes"; --}} {{#markdown}} ```scss .custom-alert-box { @include alert( // Adjust the background of the alert $bg: #cccccc, // Give a border to the alert box $radius: true ); } ``` {{/markdown}}

HTML

{{#markdown}} ```html
×
``` {{/markdown}}

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 `` tag:

HTML

{{#markdown}} ```html ``` {{/markdown}}

Binding to Events

The last thing you can do with alerts is listen for events and respond accordingly.

Basic

This example lets notifies us when users close an alert box.

JS

{{#markdown}} ```js $(document).on('close.fndtn.alert-box', function(event) { console.info('An alert box has been closed!'); }); ``` {{/markdown}}

Advanced

We can respond to all the possible events.

JS

{{#markdown}} ```js $(document).on('open.fndtn.alert-box', function(event) { console.info('An alert box has been opened!'); }); $(document).on('close.fndtn.alert-box', function(event) { console.info('An alert box has been closed!'); }); ``` {{/markdown}}

Sass Errors?

If the default "foundation" import was commented out, then make sure you import this file:

SCSS

```scss @import "foundation/components/alert-boxes"; ```