Kitchen sink

Alert Boxes

This is a standard alert (div.alert-box.radius). ×
This is a success alert (div.alert-box.success). ×
This is an alert (div.alert-box.alert.round). ×
This is a secondary alert (div.alert-box.secondary). ×

Block Grid



Buttons


Button Groups


Tiny Dropdown Button
Small Secondary Radius Dropdown Button
Button Alert Round Dropdown Button
Large Success Dropdown Button
Large Expanded Dropdown Button


Split Buttons

Tiny Split Button
Small Secondary Radius Split Button
Round Alert Split Button
Large Success Split Button


Clearing

(enable foundation.clearing.js on gruntfile to use it)

Forms

Fieldset
.com

Link Dropdown » Content Dropdown »

Title

Some text that people will think is awesome! Some text that people will think is awesome! Some text that people will think is awesome!

Launching a Discovery Mission

Button

Labels

Regular Label
Radius Secondary Label
Round Alert Label
Success Label


Magellan

(enable foundation.magellan.js on gruntfile to use it)

Build With Predefined HTML Structure

Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vestibulum id ligula porta felis euismod semper.

Awesome JS Goodness

Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vestibulum id ligula porta felis euismod semper.


Orbit

(enable foundation.orbit.js on gruntfile to use it)
  • slide 1
    Caption One.
  • slide 2
    Caption Two.

Pagination


Panels

This is a regular panel.

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

This is a radius callout panel.

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


Reveal

To use .flex-video, enable it on app.scss

Example Modal… Example Video Modal…

This is a modal.

Reveal makes these very easy to summon and dismiss. The close button is simply an anchor with a unicode character icon and a class of close-reveal-modal. Clicking anywhere outside the modal will also dismiss it.

Finally, if your modal summons another Reveal modal, the plugin will handle that for you gracefully.

Second Modal…

×

This is a second modal.

See? It just slides into place after the first modal. Very handy when you need subsequent dialogs, or when a modal option impacts or requires another decision.

×

This modal has video

×

Slider

Enable range-slider on app.scss file and foundation.slider.js on gruntfile to use it

Accordion

Accordion 1
Tab 1
Tab 2
Tab 3
Tab 4

First panel content goes here...

Second panel content goes here...

Third panel content goes here...

Fourth panel content goes here...

Accordion 2
Panel 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Accordion 3
Panel 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Tabs

Tab 1
Tab 2
Tab 3
Tab 4

First panel content goes here...

Second panel content goes here...

Third panel content goes here...

Fourth panel content goes here...

Tab 1
Tab 2
Tab 3
Tab 4

Panel 1 content goes here.

Panel 2 content goes here.

Panel 3 content goes here.

Panel 4 content goes here.


Side Nav

Enable side-nav on your app.scss file


Tables

Table Header Table Header Table Header Table Header
Content Goes Here This is longer content Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here
Content Goes Here This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here
Content Goes Here This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here

Thumbnails

Enable thumbs in app.scss file


Tooltips

Enable tooltip on app.scss file and foundation.tooltips.js on gruntfile to use it
extended information

Top Bar


Type

h1. This is a very large header.

h2. This is a large header.

h3. This is a medium header.

h4. This is a moderate header.

h5. This is a small header.

h6. This is a tiny header.


h1. subheader

h2. subheader

h3. subheader

h4. subheader

h5. subheader

h6. subheader

Definition List

Definition lists are great for small block of copy that describe the header

Lower cost
The new version of this product costs significantly less than the previous one!

Easier to use
We've changed the product so that it's much easier to use!

Safe for kids
You can leave your kids alone in a room with this product and they won't get hurt (not a guarantee).


Un-ordered lists are great for making quick outlines bulleted.

  • List item with a much longer description or more content.
  • List item
  • List item
    • Nested List Item
    • Nested List Item
    • Nested List Item
  • List item
  • List item
  • List item

Ordered lists are great for lists that need order, duh.

  1. List Item 1
  2. List Item 2
  3. List Item 3


Blockquote

I do not fear computers. I fear the lack of them. Maecenas faucibus mollis interdum. Aenean lacinia bibendum nulla sed consectetur.Isaac Asimov


Vcard


Visibility Classes

Screen Size Visibility Control (Show)

The following text should describe the screen size you're using:

You are on a small screen. You are on a medium screen. You are on a medium, large or xlarge screen. You are on a medium or small screen. You are on a large screen. You are on a large or xlarge screen. You are on a large, medium or small screen. You are on a xlarge screen.

Screen Size Visibility Control (Hide)

The following text should describe the screen size you aren't using:

You are not on a small screen. You are not on a medium screen. You are not on a medium, large or xlarge screen. You are not on a medium or small screen. You are not on a large screen. You are not on a large or xlarge screen. You are not on a large, medium or small screen. You are not on a xlarge screen.

Orientation Detection

The following text should describe the device orientation you're using:

You are in landscape orientation. You are in portrait orientation.

Touch Detection

The following text should describe if you're using a touch device:

You are on a touch-enabled device. You are not on a touch-enabled device.