Kitchen sink
Kitchen sink
This page includes every single Foundation element so that we can make sure things work together smoothly.
Alert Boxes
Block Grid
Breadcrumbs
Buttons
Button Groups
Dropdown Buttons
Dropdown Button
Dropdown Button
Dropdown Button
Dropdown Button
Dropdown Button
Split Buttons
Split Button
Split Button
Split Button
Split Button
Clearing
Forms
Dropdowns
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
ButtonFlex Video
Inline Lists
Joyride
Build Joyride with HTML
Stop Number 2 for You!
-
Stop #1
You can control all the details for you tour stop. Any valid HTML will work inside of Joyride.
-
Stop #2
Get the details right by styling Joyride with a custom stylesheet!
-
Stop #3
It works as a modal too!
Keystroke
To make something pretty, press and hold cmd + alt + shift + w + a + !
Labels
Regular Label
Radius Secondary Label
Round Alert Label
Success Label
Magellan
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
Pagination
Panels
This is a regular panel.
It has an easy to override visual style, and is appropriately subdued.
This is a callout panel with radiused edges.
It's a little ostentatious, but useful for important content.
Pricing Tables
- Standard
- $99.99
- An awesome description
- 1 Database
- 5GB Storage
- 20 Users
Progress Bars
Reveal
Example Modal… Example Modal w/Video…
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.
×This is a second modal.
See? It just slides into place after the other first modal. Very handy when you need subsequent dialogs, or when a modal option impacts or requires another decision.
×This modal has video
×Sliders
Accordion
- Accordion 1
-
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
First panel content goes here...
Second panel content goes here...
Third panel content goes here...
Fourth panel content goes here...
Panel 1 content goes here.
Panel 2 content goes here.
Panel 3 content goes here.
Panel 4 content goes here.
Side Nav
Sub Nav
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
Tooltips
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 by adding the appropriate class to them. You can even add your own custom class to style each tip differently. On a small device, the tooltips are full width and bottom aligned.
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 costThe new version of this product costs significantly less than the previous one!
Easier to useWe've changed the product so that it's much easier to use!
Safe for kidsYou 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.
- List Item 1
- List Item 2
- 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
- Gaius Baltar
- 123 Colonial Ave.
- Caprica City
- Caprica, 12345
- g.baltar@example.com
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.