Tabs

INFO

Tabs are used to separate content into different panes where each pane is viewable one at a time.

Tab Bar

    .c-tab-container
    > .c-tabs
    > .c-tabs__item[.-is-active] > .c-tabs__item__link
    > .c-tabs__content

• Kundendaten
• Login-Daten
• Account

Tab 1: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, asperiores aspernatur cupiditate doloribus eveniet fuga hic illum itaque labore, libero nemo nostrum odio quae quibusdam quod tenetur unde vero voluptatibus?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, asperiores aspernatur cupiditate doloribus eveniet fuga hic illum itaque labore, libero nemo nostrum odio quae quibusdam quod tenetur unde vero voluptatibus?

Tab 2: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, asperiores aspernatur cupiditate doloribus eveniet fuga hic illum itaque labore, libero nemo nostrum odio quae quibusdam quod tenetur unde vero voluptatibus?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, asperiores aspernatur cupiditate doloribus eveniet fuga hic illum itaque labore, libero nemo nostrum odio quae quibusdam quod tenetur unde vero voluptatibus?

Tab 3: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, asperiores aspernatur cupiditate doloribus eveniet fuga hic illum itaque labore, libero nemo nostrum odio quae quibusdam quod tenetur unde vero voluptatibus?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, asperiores aspernatur cupiditate doloribus eveniet fuga hic illum itaque labore, libero nemo nostrum odio quae quibusdam quod tenetur unde vero voluptatibus?

Show Code

<div class="c-tab-container js-tabs">
  <ul class='c-tabs'>
    <li class='c-tabs__item'><a class='c-tabs__item__link' href="#kundendaten">Kundendaten</a></li>
    <li class='c-tabs__item'><a class='c-tabs__item__link' href="#logindaten">Login-Daten</a></li>
    <li class='c-tabs__item'><a class='c-tabs__item__link' href="#account">Account</a></li>
  </ul>
  <div id="meine-daten" class="meine-daten">
    <div id="kundendaten" class="c-tabs__content">
      <p>
        Tab 1: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, asperiores aspernatur cupiditate doloribus eveniet fuga hic illum itaque labore,
        libero nemo nostrum odio quae quibusdam quod tenetur unde vero voluptatibus?
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, asperiores aspernatur cupiditate doloribus eveniet fuga hic illum itaque labore,
        libero nemo nostrum odio quae quibusdam quod tenetur unde vero voluptatibus?
      </p>
    </div>
    <div id="logindaten" class="c-tabs__content">
      <p>
        Tab 2: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, asperiores aspernatur cupiditate doloribus eveniet fuga hic illum itaque labore,
        libero nemo nostrum odio quae quibusdam quod tenetur unde vero voluptatibus?
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, asperiores aspernatur cupiditate doloribus eveniet fuga hic illum itaque labore,
        libero nemo nostrum odio quae quibusdam quod tenetur unde vero voluptatibus?
      </p>
    </div>
    <div id="account" class="c-tabs__content">
      <p>
        Tab 3: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, asperiores aspernatur cupiditate doloribus eveniet fuga hic illum itaque labore,
        libero nemo nostrum odio quae quibusdam quod tenetur unde vero voluptatibus?
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, asperiores aspernatur cupiditate doloribus eveniet fuga hic illum itaque labore,
        libero nemo nostrum odio quae quibusdam quod tenetur unde vero voluptatibus?
      </p>
    </div>
  </div>
</div>

Tab Bar with more items

• Oh, hello there!
• My Name's Tabby Tab
• I'd rather be an Accordion
• But that's okay
• Wow, look how fancy
• Super duper fancy

Show Code

<ul class="c-tabs">
  <li class="c-tabs__item">
    <a class="c-tabs__item__link" href="">Oh, hello there!</a>
  </li>
  <li class="c-tabs__item">
    <a class="c-tabs__item__link" href="">My Name's Tabby Tab</a>
  </li>
  <li class="c-tabs__item">
    <a class="c-tabs__item__link" href="">I'd rather be an Accordion</a>
  </li>
  <li class="c-tabs__item">
    <a class="c-tabs__item__link" href="">But that's okay</a>
  </li>
  <li class="c-tabs__item">
    <a class="c-tabs__item__link" href="">Wow, look how fancy</a>
  </li>
  <li class="c-tabs__item">
    <a class="c-tabs__item__link" href="">Super duper fancy</a>
  </li>
</ul>

Settings and API

TIP

• Use the .js-tabs class on a tab-container to initialize jQuery UI Tabs.
• See here jQueryUI Tabs for API Documentation.