MUSIC ON

Tabs

Tabs are very versatile both as organization and navigational constructs. With the base Theme package, tabs in the markup specified below are already hooked up — no extra work required.

Simple Tabs

Tabs are made of two objects: a

dl/ul

object containing the tabs themselves, and a

ul

object containing the tab content. If you simply want visual tabs (as seen in this documentation) without the on-page hookup, you only need the DL/LI. If you want functional tabs, just be sure that each tab is linked to an ID, and that the corresponding tab has an ID of

#tabnameTab

. Check out these examples.

Note: The third tab is using the

mobile visibility classes to hide on small devices.

 

  • Simple Tab 1
    Simple Tab 2
    Simple Tab 3
    • This is simple tab 1s content. Pretty neat, huh?
    • This is simple tab 2s content. Now you see it!
    • This is simple tab 3s content.
  • 
    
    <dl class="tabs">
    
      <dd class="active"><a href="#simple1">Simple Tab 1</a></dd>
    
      <dd><a href="#simple2">Simple Tab 2</a></dd>
    
      <dd class="hide-for-small"><a href="#simple3">Simple Tab 3</a></dd>
    
    </dl>
    
    <ul class="tabs-content">
    
      <li class="active" id="simple1Tab">This is simple tab 1s content. Pretty neat, huh?</li>
    
      <li id="simple2Tab">This is simple tab 2s content. Now you see it!</li>
    
      <li id="simple3Tab">This is simple tab 3s content.</li>
    
    </ul>
    
    

Tab Sizing

If you want your tabs to run the full width of their container evenly, you can add class of

.two-up

,

.three-up

,

.four-up

, and

.five-up

to them.

  • Even Tab 1
    Even Tab 2
    Even Tab 3
    Tab 4
    Tab 5
    Tab 6
    Tab 7
    Tab 8
  • 
    
    <dl class="tabs three-up">
    
      <dd class="active"><a href="#evenTab1">Even Tab 1</a></dd>
    
      <dd><a href="#evenTab2">Even Tab 2</a></dd>
    
      <dd><a href="#evenTab3">Even Tab 3</a></dd>
    
    </dl>
    
    <dl class="tabs five-up">
    
      <dd class="active"><a href="#evenTab4">Tab 4</a></dd>
    
      <dd><a href="#evenTab5">Tab 5</a></dd>
    
      <dd><a href="#evenTab6">Tab 6</a></dd>
    
      <dd><a href="#evenTab7">Tab 7</a></dd>
    
      <dd><a href="#evenTab8">Tab 8</a></dd>
    
    </dl>
    
    

Contained Tabs

Contained tabs have a simple added class of “contained” on the tabs-content element. What that means is the tab content has a border around it tying it to the tabs. You can still use standard column sizes inside a tab element.

You’ll also notice in this example that a

dt

element can serve to label groups of tabs. You can alternatively use an

li.section-title

to do the same thing.

  • Title 1
    Simple Tab 1
    Simple Tab 2
    Title 1
    Simple Tab 3
    • This is simple tab 1s content. Pretty neat, huh?
    • This is simple tab 2s content. Now you see it!
    • This is simple tab 3s content.
  • 
    
    <dl class="tabs contained">
    
      <dt>Title 1</dt>
    
      <dd class="active"><a href="#simpleContained1">Simple Tab 1</a></dd>
    
      <dd class="hide-for-small"><a href="#simpleContained2">Simple Tab 2</a></dd>
    
      <dt class="hide-for-small">Title 1</dt>
    
      <dd class="hide-for-small"><a href="#simpleContained3">Simple Tab 3</a></dd>
    
    </dl>
    
    <ul class="tabs-content contained">
    
      <li class="active" id="simpleContained1Tab">This is simple tab 1s content. Pretty neat, huh?</li>
    
      <li id="simpleContained2Tab">This is simple tab 2s content. Now you see it!</li>
    
      <li id="simpleContained3Tab">This is simple tab 3s content.</li>
    
    </ul>
    
    

Pill-Style Tabs

If you need an alternate view for tabs (especially for filters, or similar), you can use pill-style tabs.

  • Pill Tab 1
    Pill Tab 2
    Pill Tab 3
  • 
    
    <dl class="tabs pill">
    
      <dd class="active"><a href="#pillTab1">Pill Tab 1</a></dd>
    
      <dd><a href="#pillTab2">Pill Tab 2</a></dd>
    
      <dd class="hide-for-small"><a href="#pillTab3">Pill Tab 3</a></dd>
    
    </dl>
    
    

Vertical Tabs

You can also use tabs in a vertical configuration by adding a class of ‘vertical’ to the

dl/ul

element. These are great for more scalable nav, and you can see how they work on this page on a tablet or desktop.

  • Vertical Tab 1
    Vertical Tab 2
    Vertical Tab 3
  • 
    
    <dl class="vertical tabs">
    
      <dd class="active"><a href="#vertical1">Vertical Tab 1</a></dd>
    
      <dd><a href="#vertical2">Vertical Tab 2</a></dd>
    
      <dd><a href="#vertical3">Vertical Tab 3</a></dd>
    
    </dl>
    
    
Mobile Tabs

If you want a standard, horizontal tab group to act vertical on small devices, adding a class of “mobile” to a standard (not vertical) tab group will switch them to full width nav bars on small screens.


Our Partners