Foundation 4 Documentation

Alert Boxes

Alerts are a handy element 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.

Build With Predefined HTML Classes

There are two ways to build alerts in Foundation 4: with our predefined HTML classes or with our structure and mixins. Building an alert using our predefined class is super-easy, you only need a block-level element with a class of .alert-box (we usually use a <div>). You may also include an anchor with a class of .close to create a close box. Here is the markup you'll need:

<div data-alert class="alert-box">
  <!-- Your content goes here -->
  <a href="#" class="close">&times;</a>
</div>

For these styles to come across, make sure you have the default Foundation CSS package or that you've selected alerts from a custom package. These should be linked up following our default HTML page structure.

Build with Mixins

We've included SCSS mixins used to style alert boxes. To use these mixins, you'll need to have the extension installed or grab _variables.scss, _global.scss and _alert-boxes.scss from Github and throw them into a Foundation folder in your project directory. From there, you can import the files at the top of your own SCSS stylesheet, like so:

@import "foundation/variables";
@import "foundation/components/global";
@import "foundation/components/alert-boxes";

If you are using the mixins, you may include the styles on whatever class or ID you'd like, just make sure you follow our markup structure:

<div data-alert class="your-class-name">
  <!-- Your content goes here -->
  <a href="#" class="close">&times;</a>
</div>

Quick Mixin

You can build your alert using our global mixin by including it on your custom class or ID in your stylesheet. The mixin contains options for changing the background color, which also controls the border and text color. The rest of the defaults can be modified using the available variables. The global mixin looks like this:

/* Using the default styles */
.your-class-name { @include alert; }

/* Using the available options */
.your-class-name { @include alert(#ff6c3c); }

Base Mixin

Use this mixin to create the base styles for alert boxes. This will include styles that create the basic structure of an alert box.

.your-class-name { @include alert-base; }

Background Mixin

You can control the background, border and text styles for the alert using this mixin. We base the border and text style on the background color you choose using some sweet Sass logic.

.your-class-name {
  @include alert-base;
  @include alert-style($bg);
}

You can set $bg color to any of our predefined color variables or any hexadecimal color of your choosing. To set this value to something other than our default, use @include alert-bg(#hexcolor);

Close Box Mixin

You can include a close box with each of the alert boxes by adding an anchor right before the closing </div>. This anchor should have a class of .close in order to work with foundation.alerts.js, which contains the interaction for closing.

.your-class-name {
  @include alert-base;
  @include alert-style;
  .close { @include alert-close; }
}

Radius Mixin

We've also created a global radius mixin that you can use to add border-radius to any element you'd like.

.your-class-name {
  @include alert-base;
  @include alert-style($success-color);
  @include radius($radius);
}

Default SCSS Variables

$include-html-alert-classes: $include-html-classes;

/* We use this to control alert padding. */
$alert-padding-top: em-calc(11);
$alert-padding-default-float: $alert-padding-top;
$alert-padding-opposite-direction: $alert-padding-top + em-calc(10);
$alert-padding-bottom: $alert-padding-top + em-calc(1);

/* We use these to control text style. */
$alert-font-weight: bold;
$alert-font-size: em-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: em-calc(20);

/* We use these to style the close buttons */
$alert-close-color: #333;
$alert-close-position: em-calc(5);
$alert-close-font-size: em-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;

Note: em-calc(); is a function we wrote to convert px to em.

Using the JavaScript

You don't need ths JS to create alert boxes with Foundation. The only reason you'll need to include foundation.alerts.js is if you want to add the ability to close an alert.

Just add foundation.alerts.js AFTER the foundation.js file. Your markup should look something like this:

<body>

  ...

  <script>
      document.write('<script src=/js/vendor/'
        + ('__proto__' in {} ? 'zepto' : 'jquery')
        + '.js><\/script>');
    </script>

  <script src="js/foundation/foundation.js"></script>
  <script src="js/foundation/foundation.alerts.js"></script>
  <!-- Other JS plugins can be included here -->

  <script>
    $(document).foundation();
  </script>

</body>
        

Required Foundation Library: foundation.alerts.js

Then, you'll need to add a data-attribute to make the JS work properly on that element. That looks like:

<div data-alert class="alert-box">
  <!-- Your content goes here -->
  <a href="#" class="close">&times;</a>
</div>