Elements

The different shortcodes elements.
Buttons

Buttons are a convenient tool when it comes to more traditional actions. To that end, Foundation includes a lot of easy to use button styles that you can customize or override.

Button Text
Button Text
Button Text
Button Text
Panel

A panel is a simple, helpful css class that enables you to outline sections of your page easily. This allows you to view your page sections as you add content to them, or add emphasis to a section. There are two styles built in, and they support a class of .radius to round them off.

This is a regular panel.

It has an easy to override visual style, and is appropriately subdued.

This is a callout panel.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Alert Box

Alerts are a handy element you can drop into a form or inline on a page to communicate success, warnings, failure or just information. The syntax is extremely simple and like everything else in Foundation, easy to customize.

This is an alert box. ×
This is an alert box. ×
This is an alert box. ×
This is an alert box. ×
Progress Bars

A simple way to add progress bars to your layouts. You only need two HTML elements to make them and they're easy to customize.

Labels

Example Label Example Label This label could read a date for an update, or it could include an author name, or anything really. Inline labels are pretty handy when you need to draw attention or visually separate a short piece of content. Example LabelExample Label