Tabs are User Interface (UI) design elements where content is separated into different panes, and each pane is viewable one at a time. The user requests content to be displayed by clicking (or in some instances hovering over) the content’s corresponding tab control.

Example usage

Tab 1
Tab 2
Tab 3
  • This is Tab 1's content.
  • This is Tab 2's content.
  • This is Tab 3's content. Pretty neat huh!

When to use & what problem does this solve?

The primary goal of tabs is to permit users to view a group of related data one at a time, which in turn allows designers to modularize this group of information in a compacted manner, saving valuable screen real estate.

Information in the panes of tabs must have some connection to each other so that users can make a logical correlation towards the content of the tabs as a whole.


Step 1

In the css/js block add the following:

Step 2

HTML for the tabs:

Note: this is our local copy of Zurb's documentation.  Our installation and styles differ in some ways from the stock foundation.  To account for these differences, we have duplicated their documentation in our environment.  This local documentation is authoritative for HSC sites.