Accordion
Accordions are elements that help you organize and navigate multiple documents in a single container. They can be used for switching between items in the container.
- Section 1
Normal Accordion
This instance of Accordion is the run of the mill accordion that you would expect. It is configured to allow multiple open and all can be closed. Those are configurable options. The section titles can be styled with a swatch. You can add whatever content that you want inside of the Accordion sections.
- Section 2
Tables Are Cool col 1 is left-aligned $1600 col 2 is centered $12 col 3 is right-aligned $1 - Section 3
Here's to the crazy ones. The misfits. The rebels. The troublemakers. The round pegs in the square holes. The ones who see things differently. They're not fond of rules. And they have no respect for the status quo. You can quote them, disagree with them, glorify or vilify them. About the only thing you can't do is ignore them. Because they change things. They push the human race forward. And while some may see them as the crazy ones, we see genius. Because the people who are crazy enough to think they can change the world, are the ones who do. Rob Siltanen
- Section A
Accordion to Tabs
This instance of Accordion will transform into Tabs on large screens. If you are on a large screen, you will be seeing this in a Tab now. If you reduce the width of your browser window, it will transform into an Accordion.
It is configured so that you can only have one section optn at a time. Its also set so that one section must be open at all times. The section titles can be styled with a swatch. You can add whatever content that you want inside of the Accordion sections.
- Section B
Tables Are Cool col 1 is left-aligned $1600 col 2 is centered $12 col 3 is right-aligned $1 - Section C
Here's to the crazy ones. The misfits. The rebels. The troublemakers. The round pegs in the square holes. The ones who see things differently. They're not fond of rules. And they have no respect for the status quo. You can quote them, disagree with them, glorify or vilify them. About the only thing you can't do is ignore them. Because they change things. They push the human race forward. And while some may see them as the crazy ones, we see genius. Because the people who are crazy enough to think they can change the world, are the ones who do. Rob Siltanen
Tabs
The Site Styles stack is the one stack that will manage off of the styles for your site and how to behave globally.
Tabs
This is an example of how to implement Tabs. Tabs have very similar options to the Accordion demos above. Tabs can morph into an Accordion at the predefined breakpoints. See the demo above for this.
| Tables | Are | Cool |
|---|---|---|
| col 1 is | left-aligned | $1600 |
| col 2 is | centered | $12 |
| col 3 is | right-aligned | $1 |
Here's to the crazy ones. The misfits. The rebels. The troublemakers. The round pegs in the square holes. The ones who see things differently. They're not fond of rules. And they have no respect for the status quo. You can quote them, disagree with them, glorify or vilify them. About the only thing you can't do is ignore them. Because they change things. They push the human race forward. And while some may see them as the crazy ones, we see genius. Because the people who are crazy enough to think they can change the world, are the ones who do. Rob Siltanen
Veritcal Tabs
This is an example of how to implement vertical Tabs. Since vertical tabsd probably would not work well on small devices, the vertical tabs are hidden on small and above set of horizontal tabs is displayed instead.
The styles in the above swatch stack are simply a preference if you wanted to remove the borders around the tab containers.
| Tables | Are | Cool |
|---|---|---|
| col 1 is | left-aligned | $1600 |
| col 2 is | centered | $12 |
| col 3 is | right-aligned | $1 |
Here's to the crazy ones. The misfits. The rebels. The troublemakers. The round pegs in the square holes. The ones who see things differently. They're not fond of rules. And they have no respect for the status quo. You can quote them, disagree with them, glorify or vilify them. About the only thing you can't do is ignore them. Because they change things. They push the human race forward. And while some may see them as the crazy ones, we see genius. Because the people who are crazy enough to think they can change the world, are the ones who do. Rob Siltanen
Callout
Callouts allow you to quickly create an alert panel to make some text or content stand out on the page. As you can see in the 2nd example below, you can even make them closable.
This is a callout. It has an easy to override visual style, and is appropriately subdued.
Closable Callout
It has an easy to override visual style, and is appropriately subdued. Simply add a Close button into the callout in order for users to close it.
Caption
Captions are a super simple way to add captions that overlay your images and content.
Cards
Cards are a flexible UI component. You can divide your cards into logical sections like the demos below.
Card Hover
This is a card
It has an easy to override visual style, and is appropriately subdued.
Foundation 6 is a no brainer! You have full control over the entire design process.
— Joe Workman
Dropdown
Dropdown panes are little happy modals which can be revealed on click or hover. Its super easy to trigger a Dropdown from a button. Foundation 6 also come with a Laucnher stack that makes it easy to launch a Dropdown from anything, like an image in the example below.
When used with menus, Dropdowns can also make a very nice Mega Menu.
F6 Dropdowns
The Dropdowns can contain any content that you want. In this example, this could make for a nice image caption.
Lightbox
Lightboxes are your standard modal to display a popup style panel to your users. Traditionally, lightboxes are opened with a button. However, you can use the supplied Launcher stack in order to launch a lightbox by clicking on pretty much anything.
More about Lightboxes
Lightboxes can be sizes via the settings or styled any way you would like with a swatch. They can contain more than just text content as well. Images and video are popular choces for placing inside of a lightbox.
There are also many different setting for animating the lightbox onto the page.
You can add a close button to a lightbox in order for the user to easily be able to close it. Without a close button, you could make a lightbox so that its not closable at all.
You can even do more advacned automated lightboxes through 3rd party plugins like Call to Action.
Full Screen Lightbox
This could be used for so many things....
Off Canvas
Off Canvas is a great UI component for dynamically displaying a centent other navigation inside panels. These panels can be animated from all 4 sides of a container. You can even fix them to the browser window. The navigation on this very webpage is accomploished using an Off Canvas. On small devices, the sidebar is hidden and opened with a menu. While on medium and large devices, the sidebsar is always displayed.
Pretty cool, right?!?
Vertical Tab in Off Canvas
This is an example of how to implement vertical Tabs wtih Off Canvas. For details on how the vertical tabs are implemented, look at the Vertical Tabs template.
The styles in the above swatch stack are simply a preference for backgrounds and borders. Feel free to tweak, add or remove any of them.
A Hamburer was used to open the Off Canvas, however, you could easily have used a Button as well.
Multiple Panels
You can have multiple panels on different sides of the Off Canvas container. These panels can also be fixed to the browser window.
| Tables | Are | Cool |
|---|---|---|
| col 1 is | left-aligned | $1600 |
| col 2 is | centered | $12 |
| col 3 is | right-aligned | $1 |
Here's to the crazy ones. The misfits. The rebels. The troublemakers. The round pegs in the square holes. The ones who see things differently. They're not fond of rules. And they have no respect for the status quo. You can quote them, disagree with them, glorify or vilify them. About the only thing you can't do is ignore them. Because they change things. They push the human race forward. And while some may see them as the crazy ones, we see genius. Because the people who are crazy enough to think they can change the world, are the ones who do. Rob Siltanen
Slider
Slider is a simple carousel that allows you to animate between multiple slides. While the demo below uses basic images and captions, you can place any stack that you want insode of each slide.
-
I hope that you are enjoying Foundation 6. -
Foundation 6 will make your website faster. -
Foundation 6 will take your websites to a whole new level.
Video Tutorials
Below are video tutorials that are relevant to the stacks used on this page.