id="post-">
+
+ Abide
+
+
+
+
+
+
+ Accordion
+
+ -
+
+ Accordion 1
+
+
+ Panel 1. Lorem ipsum dolor
+
+
+ -
+
+ Accordion 2
+
+
+ Panel 2. Lorem ipsum dolor
+
+
+ -
+
+ Accordion 3
+
+
+ Panel 3. Lorem ipsum dolor
+
+
+
+
+
+
+
+
+
+
+
+ Badge
+ 2
+ 3
+ A
+ B
+
+
+
+ Breadcrumbs
+
+
+
+
+
+ Primary
+ Secondary
+ Success
+ Alert
+ Warning
+
+
+
+
+
+
+
+ So Tiny
+ So Small
+ So Basic
+ So Large
+ Such Expand
+
+
+
+
+
+ Callout
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Cards
+
+
+
+
+
+
+
Dreams feel real
+
I'm going to improvise. Listen, there's something you should know about me... about inception.
+
Last updated 1 minute ago
+
+
+
+
+
+
+
Menus
+
Cards play nicely with menus too! Give them a try.
+
+
+
+
+
+
+
+
Your title here!
+
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.
+
+
+
+
+
+
+
Buttons!
+
Who doesn't love a good button? Buttons work in all of their forms too.
+
I'm a button
+
+
+
+
+
+
+
And button groups...
+
Button groups also work great!
+
+
+
+
+
+
+
+
+
The utility classes like .text-center work great too.
+
Click me
+
+
+
+
+
+
+
+
+
This is a static close button example.
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Dropdown Pane
+
+
+ Just some junk that needs to be said. Or not. Your choice.
+
+
+
+ Equalizer
+
+
+
+
+
+
+
+
+
+
Pellentesque habitant morbi tristique senectus et netus et, ante.
+
+
+
+
+
+
+
+
+
+
+
+ Flex Video
+
+
+
+
+
+
+
+
+
+
+
+ Grid (XY)
+
+
+
full width cell
+
full width cell
+
+
+
+
12/6/4 cells
+
12/6/8 cells
+
+
+
+
+ Label
+ Secondary Label
+ Success Label
+ Alert Label
+ Warning Label
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Motion UI
+
+
+
+
+
+
+
+
+
+ Orbit
+
+
+
+
+ -
+
+
You can also throw some text in here!
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde harum rem, beatae ipsa consectetur quisquam. Rerum ratione, delectus atque tempore sed, suscipit ullam, beatae distinctio cupiditate ipsam eligendi tempora expedita.
+
This Orbit slide has chill
+
+ -
+
+
You can also throw some text in here!
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde harum rem, beatae ipsa consectetur quisquam. Rerum ratione, delectus atque tempore sed, suscipit ullam, beatae distinctio cupiditate ipsam eligendi tempora expedita.
+
This Orbit slide has chill
+
+ -
+
+
You can also throw some text in here!
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde harum rem, beatae ipsa consectetur quisquam. Rerum ratione, delectus atque tempore sed, suscipit ullam, beatae distinctio cupiditate ipsam eligendi tempora expedita.
+
This Orbit slide has chill
+
+ -
+
+
You can also throw some text in here!
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde harum rem, beatae ipsa consectetur quisquam. Rerum ratione, delectus atque tempore sed, suscipit ullam, beatae distinctio cupiditate ipsam eligendi tempora expedita.
+
This Orbit slide has chill
+
+
+
+
+
+
+
+
+
+
+
+ Progress Bar
+
+
+
+
+
+
+
+ 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 basic modal
+ 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! On medium-down screen sizes, this component will transform into an accordion.
+
+
+
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
+
+
+
+ FoundationPress
+
+
+
+
+
+
+
+ Toggler
+
+
+
+
+
+
+
+ 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.
+
+
You are not on a medium screen or larger.
+
You are not on a large screen or larger.
+
You are definitely not on a small screen.
+
You are definitely not on a medium screen.
+
You are definitely not 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.
+
+
This text can be seen, but won't be read by a screen reader.
+
+
+