Foundation Controls

Stile delle componenti di controllo (button, button group, close button, slider, switch) di Foundation adattate alla grafica Unibo

Bottoni Foundation

Dimensioni

                  
                So Tiny
                So Small
                So Basic
                So Large
                Such Expand
                Wow, Small Expand

So Tiny So Small So Basic So Large Such Expand Wow, Small Expand

Colori

                  
                Primary
                Secondary
                Success
                Alert
                Warning
                Disabled
                With Icon

Primary Secondary Success Alert Warning Disabled With Icon

Hollow style

Bottone con freccia per dropdown

Accessibilità

Make sure that the text of the button is descriptive. If for some reason, your button contains no readable text (for example, just a symbol or icon), add screen reader-only text to the button to clarify its purpose. The symbol or icon should be wrapped in an element with the attribute aria-hidden="true", to prevent screen readers from trying to pronounce the symbol.
Use the .show-for-sr class to define screen reader-only text.

Gruppi Bottoni

See on Foundation Guide

Basics

One Two Three

Sizing

Small Button Group

Coloring

View Edit Share Delete

Harder Better Faster Stronger

Even-width Group

Expanded Button Group

Stacking

How Low Can You Go

Split Buttons

                  
                
                  Primary Action
                  
                    Show menu

Primary Action

Bottone close

See on Foundation Guide

                
              
                
                Look at this close button!

Look at this close button!

Colori

                
              
                You can so totally close this!
                
              
              
                You can close me too, and I close using a Motion UI animation.

You can so totally close this!

You can close me too, and I close using a Motion UI animation.

Slider

See on Foundation Guide

Basics

Vertical

Disabled

Two Handles

Data Binding

Data Binding with step size

Non-linear value translation

Switch

See on Foundation Guide

Basics

                  
                
                  
                  
                    Download Kittens

Radio Switch

Sizing Classes

                  
                
                  
                  
                    Tiny Sandwiches Enabled
                  
                
                
                  
                  
                    Small Portions Only
                  
                 
                
                  
                  
                    Show Large Elephants

Inner Labels

                  
                
                  
                  
                    Do you like me?
                    Yes
                    No