Alert
Alert
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.
This is a secondary callout
It has an easy to override visual style, and is appropriately subdued.
This is a primary callout
Heads up! This alert needs your attention, but it's not super important.
This is a success callout
Well done! You successfully read this important alert message.
This is a warning callout
Warning! Best check yo self, you're not looking too good.
This is an alert callout
Oh snap! Change a few things up and try submitting again.
This is a large callout
It has an easy to override visual style, and is appropriately subdued.
Tooltip
Tooltip
For tooltips we use tooltipter, A powerful, flexible jQuery plugin enabling you to easily create semantic, modern tooltips enhanced with the power of CSS.
Slider
Slider
This handy lil slider is perfect for setting specific values within a range.
Basic
Create a slider by adding the class .slider and the attribute data-slider to a container element. You should also define both a starting and maximum value for the slider.
Vertical
To get vertical, just add a .vertical class and data-vertical="true" the slider.
Vertical
Two-handle sliders can be used to define a range of values, versus a single value. To make a two-handle slider, add a second handle, and a second <input>. This works with horizontal and vertical sliders.
You can add IDs to the <input>s inside the sliders to make it easier to access the values. If you don't, the plugin will add an ID to each for you.
Modal
Modal
Modal dialogs, or pop-up windows, are handy for prototyping and production. Foundation includes Reveal, our jQuery modal plugin, to make this easy for you.
Nested Modal
It's possible for modals to open other modals. Create a second modal with a unique ID, and then add a click trigger with data-open inside the first modal.
Full Screen
A full-screen modal is 100% of the width and height of the window. Add the .full class to make it go.
Click me for a full-screen modal
Animations
To use animations from the Motion UI library, include the data-animation-in="someAnimationIn" and data-animation-out="someAnimationOut" attributes.