Foundation Containers

Accordion

Una particolare tipologia di accordion รจ utilizzata per le faq: Esempio di deep link sul secondo tab dell'accordion.

See on Foundation Guide

Basics

Tables

See on Foundation Guide

Basics

              
            

              
                

                  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
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

Hover State

Need to spiff up the table just a tad? Just add the class .hover to lightly darken the table rows on hover.
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

Stripes

By default, table rows are striped. There's an .unstriped class to remove the stripes. If you change $table-is-striped to false to remove stripes from all tables, use the .striped class to add stripes.
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

Stacked Table

To stack a table on small screens, add the class .stack.
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

Scrolling Table

Got a lot of tubular tabular data? Add a wrapper element with the class .table-scroll around your table to enable horizontal scrolling.
This is the description! One Two Three Four Five Six Seven Eight Nine Ten Eleven Twelve
These are all the words that people use to describe Foundation 6! Cool Swag Chill Killer Rad Baller OMG Sweet Awesome Beast Dope Tubular
These are some words that people use to describe other web frameworks. Whatevs Ugh. LOL K Aight Eh. Grrr... Meh. TTYL Bleh. Really? Why?
Here are some great super heros. Batman Superman Spiderman Wonder Woman Hulk Nicolas Cage Antman Aquaman Captain America Wolverine Thor Iron Man
Here's a footer, just in case

Tabs

See on Foundation Guide

Basics

              
            
            

              

                
Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.

              

              

                
Suspendisse dictum feugiat nisl ut dapibus.  Vivamus hendrerit arcu sed erat molestie vehicula. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor.  Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.

Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.

Suspendisse dictum feugiat nisl ut dapibus. Vivamus hendrerit arcu sed erat molestie vehicula. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.

Vertical Tabs

              
            

              

                
                

                

                

                  

                    
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

                  

                  

                    
Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.

                  

                  

                    
                  

                  

                    
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

                  

                  

                    
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Collapsing Tabs

              
            
            
            

              

                
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

              

              

                
Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.

              

              

                
              

              

                
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Tabs and URLs

              
            
            
            

              

                
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

              

              

                
Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.

              

              

                
              

              

                
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Accordion Tabs

See on Foundation Guide

Basics

Either the Accordion Markup or the Tabs Markup can be used to responsively switch between the two components at different breakpoints.

The Accordion should have an id specified, but the plugin will automatically generate one if the id is omitted.

Accordion content should also have an ID, or the # of the href should be specified, otherwise a random id will be generated

Once you put it all together, here's what you get!
Scale your browser down to see the toggle happen.
I am an Accordion on small and large but I am Tabs on medium

            
          
    
            
  • 
              Accordion 1
              
    
                I would start in the open state, due to using the `is-active` state class.
              
    
            
    • 
            
  • 
              Accordion 2
              
    
                Content of the second Accordion.
              
    
            
    •
  • Accordion 1
    I would start in the open state, due to using the `is-active` state class.
  • Accordion 2
    Content of the second Accordion.

Tabs HTML Markup

Scale your browser down to see the toggle happen.
I am Tabs on small and large and Accordion on medium

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

The responsive behavior can be set through the data-responsive-accordion-tabs option. tabs|accordion , medium-tabs|accordion , large-tabs|accordion sets the behavior

Callout

See on Foundation Guide
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 primary 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.