--- title: Alert boxes layout: doc/layouts/default.html --- # 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
×
``` {{/markdown}}

Rendered HTML

This is a success alert with a radius. ×

## 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: darken($secondary-color, 60%); // We use this for close hover effect. $alert-function-factor: 10%; // We use these to control border styles. $alert-border-style: solid; $alert-border-width: 1px; $alert-border-color: darken($primary-color, $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; ``` {{/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}}

Basic

Using data-attributes is the preferred method of making changes to our JavaScript.

HTML

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

Advanced

You can adjust many settings. For example:

JS

{{#markdown}} ```js $(document).foundation({ orbit: { animation_speed: 500, animation: 'fade' } }); ``` {{/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"; ```