Abide
Accordion
-
Accordion 1
Panel 1. Lorem ipsum dolor
-
Accordion 1
Panel 2. Lorem ipsum dolor
-
Accordion 1
Panel 3. Lorem ipsum dolor
Accordion Menu
Badge
2 3 A BBreadcrumbs
Button
Learn More View All Features So Tiny So Small So Large Such ExpandCallout
This is a callout.
It has an easy to override visual style, and is appropriately subdued.
It's dangerous to go alone, take this.This is a secondary callout
It has an easy to override visual style, and is appropriately subdued.
It's dangerous to go alone, take this.This is a success callout
It has an easy to override visual style, and is appropriately subdued.
It's dangerous to go alone, take this.This is a warning callout
It has an easy to override visual style, and is appropriately subdued.
It's dangerous to go alone, take this.This is an alert callout
It has an easy to override visual style, and is appropriately subdued.
It's dangerous to go alone, take this.Close Button
This is a static close button example.
Drilldown Menu
Dropdown Menu
Dropdown Pane
Flex Video
Float Classes
Forms
Grid
2/3/4 columns
4/3/4 columns
6/6/4 columns
12/12/3 columns
12/12/6 columns
12/12/3 columns
6/6/2 columns
6/6/8 columns
12/12/2 columns
3 columns
9 columns
12/8/4 columns
12/4/8 columns
Label
Secondary Label
Success Label
Alert Label
Warning Label
Media Object
Dreams feel real while we're in them.
I'm going to improvise. Listen, there's something you should know about me... about inception. An idea is like a virus, resilient, highly contagious. The smallest seed of an idea can grow. It can grow to define or destroy you.
Menu
Motion UI
This panel fades.
This panel slides.
Orbit
Pagination
Progress Bar
25%
50%
75%
Label
Secondary Label Success Label Alert Label Warning LabelMedia Object
Dreams feel real while we're in them.
I'm going to improvise. Listen, there's something you should know about me... about inception. An idea is like a virus, resilient, highly contagious. The smallest seed of an idea can grow. It can grow to define or destroy you.
Menu
Motion UI
This panel fades.
This panel slides.
Orbit
Pagination
Progress Bar
25%
50%
75%
Native progress: As an alternative to our custom progress bar style, you can also opt to use the native <progress>
element. It provides a more succinct way to create progress bars, but it's not supported in IE9, and some other older browsers. View <progress>
element support.
Native meter: For the extra adventurous developers out there, we also provide styles for the <meter>
element. What's the difference? <progress>
represents a value that changes over time, like storage capacity. <meter>
represents a value that fluctates around some optimum value. It also has no support in Internet Explorer, Mobile Safari, or Android 2. View <meter>
element support.
Reveal
Click me for a full-screen modal
This is a basic modal
Using hipster ipsum for dummy text
Stumptown direct trade swag hella iPhone post-ironic. Before they sold out blog twee, quinoa forage pour-over microdosing deep v keffiyeh fanny pack. Occupy polaroid tilde, bitters vegan man bun gentrify meggings.
Full screen modal
Slider
Native range slider: In Foundation 6.2, we introduced styles for <input type="range">
, the native HTML element for range sliders. It's not supported in every browser, namely IE9 and some older mobile browsers. View browser support for the range input type.
Switch
Table
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 |
Tabs
one
Check me out! I'm a super cool Tab panel with text content!
two
three
Check me out! I'm a super cool Tab panel with text content!
four
five
Check me out! I'm a super cool Tab panel with text content!
six
Thumbnail
Title Bar
Toggler
Tooltip
The scarabaeus hung quite clear of any branches, and, if allowed to fall, would have fallen at our feet. Legrand immediately took the scythe, and cleared with it a circular space, three or four yards in diameter, just beneath the insect, and, having accomplished this, ordered Jupiter to let go the string and come down from the tree.
Top Bar
Visibility classes
You are on a small screen or larger.
You are on a medium screen or larger.
You are on a large screen or larger.
You are definitely on a small screen.
You are definitely on a medium screen.
You are definitely on a large screen.
Can't touch this.
Can sort of touch this.
You are in landscape orientation.
You are in portrait orientation.
This text can only be read by a screen reader.
There's a line of text above this one, you just can't see it.