---
title: Alert boxes
layout: doc/layouts/default.html
---
# Alert Boxes
***
{{> 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";
```