Tab Region

A tab region shows different contents, that can be switched be related Tab.

A tab region consists of a navigation system in the form of a tab system and a container that contains a list of different contents.

The following code examples shows how to use tab:

<div class="tab-region" data-sg-tab-region="tab-region-demo">
  <nav class="tab-region__navigation">
    <div class="tab" data-sg-tab="tab-region-demo">
      <div class="tab__list">
        <div class="tab__item" data-sg-tab-item="item-1">Region 1</div>
        <div class="tab__item" data-sg-tab-item="item-2">Region 2</div>
      </div>
    </div>
  </nav>
  <div class="tab-region__container">
    <div class="tab-region__content" data-sg-tab-region-content="item-1">
      <p>Hello World 01</p>
    </div>
    <div class="tab-region__content" data-sg-tab-region-content="item-2">
      <p>Hello World 02</p>
    </div>
  </div>
</div>

The following list describe all existing block/element/modifier classes of the component and all data attributes.

• .tab-region - required the block that represent the tab region component and contains all elements
• .tab-region__navigation - required within this element a Tab system must be added
• .tab-region__container - required within this element, a list of contents are added
• .tab-region__content - required the content of this element is shown, when the related .tab__item is active
• [data-sg-tab-region] - required the attribute must be added to the .tab-region class and must have the same value like the related [data-sg-tab]
• [data-sg-tab] - required the attribute must be added to the .tab class and must have the same value like the related [data-sg-tab-region]
• [data-sg-tab-item] - required every .tab__item must have this attribute and a related [data-sg-tab-region-content] with the same value
• [data-sg-tab-region-content] - required every .tab-region_content must have this attribute and a related [data-sg-tab-item] with the same value
• Modifier
  • .tab-region--no-fade-in - disable fade in animation

Basic Example:

Theme

In the following we show additional variants of tab regions, which are exclusively for the respective themes.

finanzen.net Nested Tab Regions

The following example shows how the normal tabs can be combined with the second tabs to form a nested tab region.

finanzen.net Tab Cards

The tab card variant is used for navigation on the finanzen.net website. Use this to allow the user to navigate in detail as a subnavigation directly under the header in a single row page-layout.