ALF Tabs

Tabs are created with the following HTML:

<div class="tabs">
  <ul>
    <li><a href="#tab-1">Tab 1</a></li>
    <li><a href="#tab-2">Tab 2</a></li>
    <li><a href="#tab-3">Tab 3</a></li>
  </ul>

  <div id="tab-1">...</div>
  <div id="tab-2">...</div>
  <div id="tab-3">...</div>
</div>

Tab pre-selection

To pre-select a tab, add the data-alf-tabs-default attribute to the link of the desired tab.

Link to tab

When linking from another page with an anchor to a specific tab, that tab will become active on load.

External links

You can have a tab that acts as a link to an external site (but maybe consider not using tabs in that case?). Just add the .external class to the link.

Responsive (tab collapsing)

Collapsing is not done by default. It can be forced for phone-down, tablet, web, or always (data-alf-tabs-collapse-in-phone, data-alf-tabs-collapse-in-tablet, data-alf-tabs-collapse-in-web, data-alf-tabs-collapse-always). Phone-down, tablet and web are independent: one could only apply it to tablet, for instance.

Colors

Like other components, tabs can use the color identifiers: .main, .alt, .ok, .warning, .error

Examples

Standard tabs

.main

.alt

Nested tabs

Pre-selected tab, external link, and collapsing in tablet