Elements

Alerts

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 a standard alert (div.alert-box). ×
This is a success alert (div.alert-box.success). ×
This is an alert (div.alert-box.alert). ×
This is a secondary alert (div.alert-box.secondary). ×

Labels

Labels are useful inline styles that can be dropped into body copy to call out certain sections or to attach metadata. Examples might be noting when something was updated or that something is new. The syntax is simple, just a span element with a class of .label. The border styling mirrors that of the Foundation buttons.

Types
Normal Label
Secondary Label
Success Label
Alert Label
Styles
Regular Label
Radius Label
Round Label

Tooltips

Tooltips are a quick way to provide extended information on a term or action on a page. They work cross browser and cross platform and are easily added to a page by including the jquery.tooltip.js plugin. You can apply the has-tip class to any element.

By default, the tooltip takes the width of the element that it is applied to, but you can override this behavior by applying a data-width attribute to the target element. The tooltip takes on the content of the targets title attribute.

Example in text below

The tooltips can be positioned on the "tip-bottom", which is the default position, "tip-top" (hehe), "tip-left", or "tip-right" of the target element. On a small device, the tooltips are full width and bottom aligned.

Accordion

  • Accordion Panel 1
  • Accordion Panel 2
  • Accordion Panel 3

Panels

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.

It's a little ostentatious, but useful for important content.

Inline Lists

When you just need a horizontal list of links, like in a footer, and you want more control than just spaces between them you can use this simple construct.

Tables

Table Header Table Header Table Header Table Header
Content This is longer content Content Content
Content This is longer content Content Content
Content This is longer content Content Content
Content This is longer content Content Content

Progress Bars

Add simple progress bars to your page using our simple pattern. We've included built in ways to control the radius, height, padding and border in the Scss settings file. You can use .round or .radius to add some rounded borders. If you want to change the color, use the same classes as we use for the buttons: .primary, .secondary, .alert, .success. If you want to control the width of your progress bar, simply use the grid classes .one, .two, .three, etc. You can control the width of the fill meter by setting the width of the span element.

Image Thumbnails

If you are going to use an image as an anchor, we've got you covered. All you've gotta do is wrap an a.th around your image and viola!

Pricing Tables

If you're making a rockin' marketing site for a subscription-based product you are likely in need of a pricing table. You can create one with Foundation by creating a class="pricing-table", using the grid to position and size. Inside you can include: class="title", class="price", class="desc", class="bullet-item", class="cta-button" to create the table, here's an example:

  • Standard
  • $99.99
  • Content...
  • 1 Database
  • 5GB Storage
  • 20 Users
  • Buy it Now »
  • Standard
  • $99.99
  • Content...
  • 1 Database
  • 5GB Storage
  • 20 Users
  • Buy it Now »

Video

If you're embedding video from YouTube, Vimeo, or another site that uses iframe, embed or object elements you can wrap your video in div.flex-video to create an intrinsic ratio that will properly scale your video on any device.

4:3
Widescreen
Vimeo
  • Because Vimeo places their chrome on the player itself, adding a class of .vimeo creates a container that is sized for the video only - no extra padding for the controls.