User Manual

Tabs

The tabs component is used to show a lot of content hidden in subject specific tabs. It always consists of a tab-list and a content section. Switching the tabs doesn't trigger any functionality of hidding or showing content. Because it also has to be compliant to the mobile structure, a default tab functionality wasn't possible. The tabs on themselves own have an active class is-active.

Default

Meer

The tab content belongs in here.


    
      

  

  <div class="o-tabs js-tabs is-loading ">
    <div class="o-tabs__list-container">
      <ul class="o-tabs__list">
        

          <li class="o-tabs__item u-tablet-hide is-active">
            <a href="" class="o-tabs__item-link">Tab 1</a>
          </li>

        

          <li class="o-tabs__item  ">
            <a href="" class="o-tabs__item-link">Tab 2</a>
          </li>

        

          <li class="o-tabs__item  ">
            <a href="" class="o-tabs__item-link">Tab 3</a>
          </li>

        

          <li class="o-tabs__item  ">
            <a href="" class="o-tabs__item-link">Tab 4</a>
          </li>

        
      </ul>

      

  <div class="m-collapse js-collapse o-tabs__collapse u-tablet-hide">
    <div class="m-collapse__header">
      <span class='o-tabs__collapse-header'>Meer</span>
    </div>

    <div class="m-collapse__content">
      <div class="m-collapse__children">
        

<ul class="o-tabs__collapse-list">
  

    <li class="o-tabs__item">
      <a href="" class="o-tabs__item-link">Tab 1</a>
    </li>

  

    <li class="o-tabs__item">
      <a href="" class="o-tabs__item-link">Tab 2</a>
    </li>

  

    <li class="o-tabs__item">
      <a href="" class="o-tabs__item-link">Tab 3</a>
    </li>

  

    <li class="o-tabs__item">
      <a href="" class="o-tabs__item-link">Tab 4</a>
    </li>

  
</ul>


      </div>
    </div>
  </div>


    </div>

    <div class="o-tabs__content">
      <p>The tab content belongs in here.</p>
    </div>
  </div>

Modifiers

  • o-tabs--no-spacing

    This class adds no spacing around the content.

States

  • is-active

    This class is placed on the child element o-tabs__item and is used to show which tab is open/active

  • is-loading

    Placed on the root of the component to indicate that the tabs visiblity calculations are being made. This will hide the tab list until the JavaScript was executed.

JavaScript

  • js-tabs

    Indicate that this component uses JavaScript, remove this class to disable the JavaScript. This makes sure that the tabs out of the list gets placed in the more menu.