Using Foundation Alert Boxes

foundation-alert-boxes

Foundation Alert Boxes 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. Foundation

Foundation Alert Boxes Example

This gives you a standard alert box
×
This gives you a success alert box
×
This gives you an alert box
×
This is a warning alert box.
×
This gives you a secondary alert box
×
This is an info alert box.
×

Adding Foundation Alert Boxes  to any post or page is very simple. When editing, click the “Text” tab in the editor and use one of the following:

<div data-alert class="alert-box">
  This gives you a standard alert box
  <a href="" class="close">×</a>
</div>

<div data-alert class="alert-box success">
  This gives you a success alert box
  <a href="" class="close">×</a>
</div>

<div data-alert class="alert-box warning">
  This gives you an alert box
  <a href="" class="close">×</a>
</div>

<div data-alert class="alert-box alert">
  This gives you an alert box
  <a href="" class="close">×</a>
</div>

<div data-alert class="alert-box secondary">
  This gives you a secondary alert box
  <a href="" class="close">×</a>
</div>

<div data-alert class="alert-box info">
  This gives you an info alert box
  <a href="" class="close">×</a>
</div>

You can also change the look of the Foundation Alert Boxes corners by adding either radius or round class:

This alert box uses the radius class making the corners be slightly round.
×
This alert box uses the round class making the corners round.
×

It is also easy to modify the CSS to create your own custom Foundation Alert Boxes to give your theme that unique look and feel:

<div class="alert-box success radius" data-alert="">This alert box uses the radius class making the corners be slightly round.
<a class="close">×</a></div>
 
<div class="alert-box alert round" data-alert="">This alert box uses the round class making the corners round.
<a class="close">×</a></div>

Read more Foundation Docs: Alert Boxes

Leave a Comment