Tabs

TIP

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

• Based on jQueryUI Tabs.

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.

Tab Bar

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

::: demo

• 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?

:::

Tab Bar with more items

::: demo

• 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

:::