Tab

Default

.e-tabs

<div class="e-tabs">
  <input type="radio" name="tabs-1" id="tabs-1-0" checked="checked">
  <label class="e-tabs__title" for="tabs-1-0">
    <span class="e-tabs__separator">
      Tab 1
    </span>
  </label>
  <input type="radio" name="tabs-1" id="tabs-1-1">
  <label class="e-tabs__title" for="tabs-1-1">
    <span class="e-tabs__separator">
      Tab 2
    </span>
  </label>
  <input type="radio" name="tabs-1" id="tabs-1-2" disabled>
  <label class="e-tabs__title" for="tabs-1-2">
    <span class="e-tabs__separator">
      Disabled
    </span>
  </label>
  <input type="radio" name="tabs-1" id="tabs-1-3">
  <label class="e-tabs__title" for="tabs-1-3">
    <span class="e-tabs__separator">
      Tab 4
    </span>
  </label>
  <div class="e-tabs__panel">
    <div class="e-tabs__panel__content">
      1Lorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitr
    </div>
    <div class="e-tabs__panel__content">
      2Lorem ipsum dolor sit amet, consetetur sadipscing elitr Loreor sit amet, consetetur sadipscing elitr Loreor sit amet, consetetur sadipscing elitr Lorem ipsum dolor sit amet, consetetur sadipscing elitr
    </div>
    <div class="e-tabs__panel__content">
      3Lorem ipsum dolor sit amet, consetetur sadipscing elitr
    </div>
    <div class="e-tabs__panel__content">
      4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr
    </div>
  </div>
</div>
<div class="e-tabs">
  <input type="radio" name="tabs-1" id="tabs-1-0" checked="checked">
  <label class="e-tabs__title" for="tabs-1-0">
    <span class="e-tabs__separator">
      Tab 1
    </span>
  </label>
  <input type="radio" name="tabs-1" id="tabs-1-1">
  <label class="e-tabs__title" for="tabs-1-1">
    <span class="e-tabs__separator">
      Tab 2
    </span>
  </label>
  <input type="radio" name="tabs-1" id="tabs-1-2" disabled>
  <label class="e-tabs__title" for="tabs-1-2">
    <span class="e-tabs__separator">
      Disabled
    </span>
  </label>
  <input type="radio" name="tabs-1" id="tabs-1-3">
  <label class="e-tabs__title" for="tabs-1-3">
    <span class="e-tabs__separator">
      Tab 4
    </span>
  </label>
  <div class="e-tabs__panel">
    <div class="e-tabs__panel__content">
      1Lorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitr
    </div>
    <div class="e-tabs__panel__content">
      2Lorem ipsum dolor sit amet, consetetur sadipscing elitr Loreor sit amet, consetetur sadipscing elitr Loreor sit amet, consetetur sadipscing elitr Lorem ipsum dolor sit amet, consetetur sadipscing elitr
    </div>
    <div class="e-tabs__panel__content">
      3Lorem ipsum dolor sit amet, consetetur sadipscing elitr
    </div>
    <div class="e-tabs__panel__content">
      4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr
    </div>
  </div>
</div>
JavaScript
1Lorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitr
2Lorem ipsum dolor sit amet, consetetur sadipscing elitr Loreor sit amet, consetetur sadipscing elitr Loreor sit amet, consetetur sadipscing elitr Lorem ipsum dolor sit amet, consetetur sadipscing elitr
3Lorem ipsum dolor sit amet, consetetur sadipscing elitr
4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr

Variations

Nested tab

<div class="e-tabs">
  <input type="radio" name="tabs-2" id="tabs-2-0" checked="checked">
  <label class="e-tabs__title" for="tabs-2-0">
    <span class="e-tabs__separator">
      Tab 1
    </span>
  </label>
  <input type="radio" name="tabs-2" id="tabs-2-1">
  <label class="e-tabs__title" for="tabs-2-1">
    <span class="e-tabs__separator">
      Nested tab
    </span>
  </label>
  <div class="e-tabs__panel">
    <div class="e-tabs__panel__content">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitr
    </div>
    <div class="e-tabs__panel__content">
      <h2>
        Nested tab
      </h2>
      <div class="e-tabs">
        <input type="radio" name="tabs-3" id="tabs-3-0" checked="checked">
        <label class="e-tabs__title" for="tabs-3-0">
          <span class="e-tabs__separator">
            Tab 1
          </span>
        </label>
        <input type="radio" name="tabs-3" id="tabs-3-1">
        <label class="e-tabs__title" for="tabs-3-1">
          <span class="e-tabs__separator">
            Tab 2
          </span>
        </label>
        <input type="radio" name="tabs-3" id="tabs-3-2" disabled>
        <label class="e-tabs__title" for="tabs-3-2">
          <span class="e-tabs__separator">
            Disabled
          </span>
        </label>
        <input type="radio" name="tabs-3" id="tabs-3-3">
        <label class="e-tabs__title" for="tabs-3-3">
          <span class="e-tabs__separator">
            Tab 4
          </span>
        </label>
        <div class="e-tabs__panel">
          <div class="e-tabs__panel__content">
            1Lorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitr
          </div>
          <div class="e-tabs__panel__content">
            2Lorem ipsum dolor sit amet, consetetur sadipscing elitr Loreor sit amet, consetetur sadipscing elitr Loreor sit amet, consetetur sadipscing elitr Lorem ipsum dolor sit amet, consetetur sadipscing elitr
          </div>
          <div class="e-tabs__panel__content">
            3Lorem ipsum dolor sit amet, consetetur sadipscing elitr
          </div>
          <div class="e-tabs__panel__content">
            4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="e-tabs">
  <input type="radio" name="tabs-2" id="tabs-2-0" checked="checked">
  <label class="e-tabs__title" for="tabs-2-0">
    <span class="e-tabs__separator">
      Tab 1
    </span>
  </label>
  <input type="radio" name="tabs-2" id="tabs-2-1">
  <label class="e-tabs__title" for="tabs-2-1">
    <span class="e-tabs__separator">
      Nested tab
    </span>
  </label>
  <div class="e-tabs__panel">
    <div class="e-tabs__panel__content">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitr
    </div>
    <div class="e-tabs__panel__content">
      <h2>
        Nested tab
      </h2>
      <div class="e-tabs">
        <input type="radio" name="tabs-3" id="tabs-3-0" checked="checked">
        <label class="e-tabs__title" for="tabs-3-0">
          <span class="e-tabs__separator">
            Tab 1
          </span>
        </label>
        <input type="radio" name="tabs-3" id="tabs-3-1">
        <label class="e-tabs__title" for="tabs-3-1">
          <span class="e-tabs__separator">
            Tab 2
          </span>
        </label>
        <input type="radio" name="tabs-3" id="tabs-3-2" disabled>
        <label class="e-tabs__title" for="tabs-3-2">
          <span class="e-tabs__separator">
            Disabled
          </span>
        </label>
        <input type="radio" name="tabs-3" id="tabs-3-3">
        <label class="e-tabs__title" for="tabs-3-3">
          <span class="e-tabs__separator">
            Tab 4
          </span>
        </label>
        <div class="e-tabs__panel">
          <div class="e-tabs__panel__content">
            1Lorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitr
          </div>
          <div class="e-tabs__panel__content">
            2Lorem ipsum dolor sit amet, consetetur sadipscing elitr Loreor sit amet, consetetur sadipscing elitr Loreor sit amet, consetetur sadipscing elitr Lorem ipsum dolor sit amet, consetetur sadipscing elitr
          </div>
          <div class="e-tabs__panel__content">
            3Lorem ipsum dolor sit amet, consetetur sadipscing elitr
          </div>
          <div class="e-tabs__panel__content">
            4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
JavaScript
Lorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitr

Nested tab

1Lorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitr
2Lorem ipsum dolor sit amet, consetetur sadipscing elitr Loreor sit amet, consetetur sadipscing elitr Loreor sit amet, consetetur sadipscing elitr Lorem ipsum dolor sit amet, consetetur sadipscing elitr
3Lorem ipsum dolor sit amet, consetetur sadipscing elitr
4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr

Without checkbox

<div class="e-tabs">
  <div class="e-tabs__title">
    <a class="e-tabs__separator">
      Tab 1
    </a>
  </div>
  <div class="e-tabs__title e-tabs__title-active">
    <a class="e-tabs__separator">
      Active Tab
    </a>
  </div>
  <div class="e-tabs__title e-tabs__title-disabled">
    <a class="e-tabs__separator">
      Disabled Tab
    </a>
  </div>
  <div class="e-tabs__panel">
    <div class="e-tabs__panel__content e-tabs__panel__content-active">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </div>
  </div>
</div>
<div class="e-tabs">
  <div class="e-tabs__title">
    <a class="e-tabs__separator">
      Tab 1
    </a>
  </div>
  <div class="e-tabs__title e-tabs__title-active">
    <a class="e-tabs__separator">
      Active Tab
    </a>
  </div>
  <div class="e-tabs__title e-tabs__title-disabled">
    <a class="e-tabs__separator">
      Disabled Tab
    </a>
  </div>
  <div class="e-tabs__panel">
    <div class="e-tabs__panel__content e-tabs__panel__content-active">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </div>
  </div>
</div>
JavaScript
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Embed.e-tabs-embed

<div class="e-tabs e-tabs-embed">
  <input type="radio" name="tabs-4" id="tabs-4-0" checked="checked">
  <label class="e-tabs__title" for="tabs-4-0">
    <span class="e-tabs__separator">
      Tab 1
    </span>
  </label>
  <input type="radio" name="tabs-4" id="tabs-4-1">
  <label class="e-tabs__title" for="tabs-4-1">
    <span class="e-tabs__separator">
      Tab 2
    </span>
  </label>
  <input type="radio" name="tabs-4" id="tabs-4-2" disabled>
  <label class="e-tabs__title" for="tabs-4-2">
    <span class="e-tabs__separator">
      Disabled
    </span>
  </label>
  <input type="radio" name="tabs-4" id="tabs-4-3">
  <label class="e-tabs__title" for="tabs-4-3">
    <span class="e-tabs__separator">
      Tab 4
    </span>
  </label>
  <div class="e-tabs__panel">
    <div class="e-tabs__panel__content">
      1Lorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitr
    </div>
    <div class="e-tabs__panel__content">
      2Lorem ipsum dolor sit amet, consetetur sadipscing elitr Loreor sit amet, consetetur sadipscing elitr Loreor sit amet, consetetur sadipscing elitr Lorem ipsum dolor sit amet, consetetur sadipscing elitr
    </div>
    <div class="e-tabs__panel__content">
      3Lorem ipsum dolor sit amet, consetetur sadipscing elitr
    </div>
    <div class="e-tabs__panel__content">
      4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr
    </div>
  </div>
</div>
<div class="e-tabs e-tabs-embed">
  <input type="radio" name="tabs-4" id="tabs-4-0" checked="checked">
  <label class="e-tabs__title" for="tabs-4-0">
    <span class="e-tabs__separator">
      Tab 1
    </span>
  </label>
  <input type="radio" name="tabs-4" id="tabs-4-1">
  <label class="e-tabs__title" for="tabs-4-1">
    <span class="e-tabs__separator">
      Tab 2
    </span>
  </label>
  <input type="radio" name="tabs-4" id="tabs-4-2" disabled>
  <label class="e-tabs__title" for="tabs-4-2">
    <span class="e-tabs__separator">
      Disabled
    </span>
  </label>
  <input type="radio" name="tabs-4" id="tabs-4-3">
  <label class="e-tabs__title" for="tabs-4-3">
    <span class="e-tabs__separator">
      Tab 4
    </span>
  </label>
  <div class="e-tabs__panel">
    <div class="e-tabs__panel__content">
      1Lorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitr
    </div>
    <div class="e-tabs__panel__content">
      2Lorem ipsum dolor sit amet, consetetur sadipscing elitr Loreor sit amet, consetetur sadipscing elitr Loreor sit amet, consetetur sadipscing elitr Lorem ipsum dolor sit amet, consetetur sadipscing elitr
    </div>
    <div class="e-tabs__panel__content">
      3Lorem ipsum dolor sit amet, consetetur sadipscing elitr
    </div>
    <div class="e-tabs__panel__content">
      4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr
    </div>
  </div>
</div>
JavaScript
1Lorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitr
2Lorem ipsum dolor sit amet, consetetur sadipscing elitr Loreor sit amet, consetetur sadipscing elitr Loreor sit amet, consetetur sadipscing elitr Lorem ipsum dolor sit amet, consetetur sadipscing elitr
3Lorem ipsum dolor sit amet, consetetur sadipscing elitr
4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr

Dialogheader.e-tabs-dialogheader

<div class="e-tabs e-tabs-dialogheader">
  <input type="radio" name="tabs-5" id="tabs-5-0" checked="checked">
  <label class="e-tabs__title" for="tabs-5-0">
    <span class="e-tabs__separator">
      Tab 1
    </span>
  </label>
  <input type="radio" name="tabs-5" id="tabs-5-1">
  <label class="e-tabs__title" for="tabs-5-1">
    <span class="e-tabs__separator">
      Tab 2
    </span>
  </label>
  <input type="radio" name="tabs-5" id="tabs-5-2" disabled>
  <label class="e-tabs__title" for="tabs-5-2">
    <span class="e-tabs__separator">
      Disabled
    </span>
  </label>
  <input type="radio" name="tabs-5" id="tabs-5-3">
  <label class="e-tabs__title" for="tabs-5-3">
    <span class="e-tabs__separator">
      Tab 4
    </span>
  </label>
  <div class="e-tabs__panel">
    <div class="e-tabs__panel__content">
      1Lorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitr
    </div>
    <div class="e-tabs__panel__content">
      2Lorem ipsum dolor sit amet, consetetur sadipscing elitr Loreor sit amet, consetetur sadipscing elitr Loreor sit amet, consetetur sadipscing elitr Lorem ipsum dolor sit amet, consetetur sadipscing elitr
    </div>
    <div class="e-tabs__panel__content">
      3Lorem ipsum dolor sit amet, consetetur sadipscing elitr
    </div>
    <div class="e-tabs__panel__content">
      4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr
    </div>
  </div>
</div>
<div class="e-tabs e-tabs-dialogheader">
  <input type="radio" name="tabs-5" id="tabs-5-0" checked="checked">
  <label class="e-tabs__title" for="tabs-5-0">
    <span class="e-tabs__separator">
      Tab 1
    </span>
  </label>
  <input type="radio" name="tabs-5" id="tabs-5-1">
  <label class="e-tabs__title" for="tabs-5-1">
    <span class="e-tabs__separator">
      Tab 2
    </span>
  </label>
  <input type="radio" name="tabs-5" id="tabs-5-2" disabled>
  <label class="e-tabs__title" for="tabs-5-2">
    <span class="e-tabs__separator">
      Disabled
    </span>
  </label>
  <input type="radio" name="tabs-5" id="tabs-5-3">
  <label class="e-tabs__title" for="tabs-5-3">
    <span class="e-tabs__separator">
      Tab 4
    </span>
  </label>
  <div class="e-tabs__panel">
    <div class="e-tabs__panel__content">
      1Lorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitr
    </div>
    <div class="e-tabs__panel__content">
      2Lorem ipsum dolor sit amet, consetetur sadipscing elitr Loreor sit amet, consetetur sadipscing elitr Loreor sit amet, consetetur sadipscing elitr Lorem ipsum dolor sit amet, consetetur sadipscing elitr
    </div>
    <div class="e-tabs__panel__content">
      3Lorem ipsum dolor sit amet, consetetur sadipscing elitr
    </div>
    <div class="e-tabs__panel__content">
      4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr
    </div>
  </div>
</div>
JavaScript
1Lorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitr
2Lorem ipsum dolor sit amet, consetetur sadipscing elitr Loreor sit amet, consetetur sadipscing elitr Loreor sit amet, consetetur sadipscing elitr Lorem ipsum dolor sit amet, consetetur sadipscing elitr
3Lorem ipsum dolor sit amet, consetetur sadipscing elitr
4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr

With badge

<div class="e-tabs">
  <div class="e-tabs__title e-tabs__title-active">
    <a class="e-tabs__separator">
      Tab 1
      <span class="e-tabs__badge text-color-warning">
        1
        <e-icon icon="exclamation-circle" size="small" color="inherit"></e-icon>
      </span>
    </a>
  </div>
  <div class="e-tabs__title">
    <a class="e-tabs__separator">
      Tab 2
      <span class="e-tabs__badge text-color-warning">
        3
        <e-icon icon="exclamation-circle" size="small" color="inherit"></e-icon>
      </span>
    </a>
  </div>
  <div class="e-tabs__title e-tabs__title-disabled">
    <a class="e-tabs__separator">
      Tab 3
      <span class="e-tabs__badge text-color-warning">
        15
        <e-icon icon="exclamation-circle" size="small" color="inherit"></e-icon>
      </span>
    </a>
  </div>
  <div class="e-tabs__panel">
    <div class="e-tabs__panel__content e-tabs__panel__content-active">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </div>
  </div>
</div>
<div class="e-tabs">
  <div class="e-tabs__title e-tabs__title-active">
    <a class="e-tabs__separator">
      Tab 1
      <span class="e-tabs__badge text-color-warning">
        1
        <e-icon icon="exclamation-circle" size="small" color="inherit"></e-icon>
      </span>
    </a>
  </div>
  <div class="e-tabs__title">
    <a class="e-tabs__separator">
      Tab 2
      <span class="e-tabs__badge text-color-warning">
        3
        <e-icon icon="exclamation-circle" size="small" color="inherit"></e-icon>
      </span>
    </a>
  </div>
  <div class="e-tabs__title e-tabs__title-disabled">
    <a class="e-tabs__separator">
      Tab 3
      <span class="e-tabs__badge text-color-warning">
        15
        <e-icon icon="exclamation-circle" size="small" color="inherit"></e-icon>
      </span>
    </a>
  </div>
  <div class="e-tabs__panel">
    <div class="e-tabs__panel__content e-tabs__panel__content-active">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </div>
  </div>
</div>
JavaScript
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

fullheight.e-tabs-fullheight

<div style="height: 500px;">
  <div class="e-tabs e-tabs-fullheight">
    <input type="radio" name="tabs-6" id="tabs-6-0" checked="checked">
    <label class="e-tabs__title" for="tabs-6-0">
      <span class="e-tabs__separator">
        Tab 1
      </span>
    </label>
    <input type="radio" name="tabs-6" id="tabs-6-1">
    <label class="e-tabs__title" for="tabs-6-1">
      <span class="e-tabs__separator">
        Tab 2
      </span>
    </label>
    <input type="radio" name="tabs-6" id="tabs-6-2" disabled>
    <label class="e-tabs__title" for="tabs-6-2">
      <span class="e-tabs__separator">
        Disabled
      </span>
    </label>
    <input type="radio" name="tabs-6" id="tabs-6-3">
    <label class="e-tabs__title" for="tabs-6-3">
      <span class="e-tabs__separator">
        Tab 4
      </span>
    </label>
    <div class="e-tabs__panel">
      <div class="e-tabs__panel__content" style="background:rgba(120, 20, 0, .6); height: 100%;">
        <span style="color: #fff;">
          1Lorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitr
        </span>
      </div>
      <div class="e-tabs__panel__content" style="background:rgba(60, 40, 0, .6); height: 100%;">
        <span style="color: #fff;">
          2Lorem ipsum dolor sit amet, consetetur sadipscing elitr Loreor sit amet, consetetur sadipscing elitr Loreor sit amet, consetetur sadipscing elitr Lorem ipsum dolor sit amet, consetetur sadipscing elitr
        </span>
      </div>
      <div class="e-tabs__panel__content" style="background:rgba(40, 60, 0, .6); height: 100%;">
        <span style="color: #fff;">
          3Lorem ipsum dolor sit amet, consetetur sadipscing elitr
        </span>
      </div>
      <div class="e-tabs__panel__content" style="background:rgba(30, 80, 0, .6); height: 100%;">
        <span style="color: #fff;">
          4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr
        </span>
      </div>
    </div>
  </div>
</div>
<div style="height: 500px;">
  <div class="e-tabs e-tabs-fullheight">
    <input type="radio" name="tabs-6" id="tabs-6-0" checked="checked">
    <label class="e-tabs__title" for="tabs-6-0">
      <span class="e-tabs__separator">
        Tab 1
      </span>
    </label>
    <input type="radio" name="tabs-6" id="tabs-6-1">
    <label class="e-tabs__title" for="tabs-6-1">
      <span class="e-tabs__separator">
        Tab 2
      </span>
    </label>
    <input type="radio" name="tabs-6" id="tabs-6-2" disabled>
    <label class="e-tabs__title" for="tabs-6-2">
      <span class="e-tabs__separator">
        Disabled
      </span>
    </label>
    <input type="radio" name="tabs-6" id="tabs-6-3">
    <label class="e-tabs__title" for="tabs-6-3">
      <span class="e-tabs__separator">
        Tab 4
      </span>
    </label>
    <div class="e-tabs__panel">
      <div class="e-tabs__panel__content" style="background:rgba(120, 20, 0, .6); height: 100%;">
        <span style="color: #fff;">
          1Lorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitr
        </span>
      </div>
      <div class="e-tabs__panel__content" style="background:rgba(60, 40, 0, .6); height: 100%;">
        <span style="color: #fff;">
          2Lorem ipsum dolor sit amet, consetetur sadipscing elitr Loreor sit amet, consetetur sadipscing elitr Loreor sit amet, consetetur sadipscing elitr Lorem ipsum dolor sit amet, consetetur sadipscing elitr
        </span>
      </div>
      <div class="e-tabs__panel__content" style="background:rgba(40, 60, 0, .6); height: 100%;">
        <span style="color: #fff;">
          3Lorem ipsum dolor sit amet, consetetur sadipscing elitr
        </span>
      </div>
      <div class="e-tabs__panel__content" style="background:rgba(30, 80, 0, .6); height: 100%;">
        <span style="color: #fff;">
          4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr
        </span>
      </div>
    </div>
  </div>
</div>
JavaScript
1Lorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitr
2Lorem ipsum dolor sit amet, consetetur sadipscing elitr Loreor sit amet, consetetur sadipscing elitr Loreor sit amet, consetetur sadipscing elitr Lorem ipsum dolor sit amet, consetetur sadipscing elitr
3Lorem ipsum dolor sit amet, consetetur sadipscing elitr
4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr

no padding.e-tabs__panel__content-no_padding

<div style="height: 500px;">
  <div class="e-tabs">
    <input type="radio" name="tabs-nopadding" id="tabs-nopadding-1" checked="checked">
    <label class="e-tabs__title" for="tabs-nopadding-1">
      <span class="e-tabs__separator">
        Overview
      </span>
    </label>
    <input type="radio" name="tabs-nopadding" id="tabs-nopadding-2">
    <label class="e-tabs__title" for="tabs-nopadding-2">
      <span class="e-tabs__separator">
        Content
      </span>
    </label>
    <div class="e-tabs__panel">
      <div class="e-tabs__panel__content e-tabs__panel__content-no_padding">
        <table class="e-table" data-e-version="2">
          <thead>
            <tr>
              <th>
                lorem ipsum
              </th>
              <th>
                Dolor sit amet
              </th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>
                Lorem, ipsum dolor sit amet consectetur
              </td>
              <td>
                onsequatur, aut. Cum expedita enim et quam itaque aut in dolor
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="e-tabs__panel__content e-tabs__panel__content-no_padding">
        Lorem ipsum dolor sit amet
      </div>
    </div>
  </div>
</div>
<div style="height: 500px;">
  <div class="e-tabs">
    <input type="radio" name="tabs-nopadding" id="tabs-nopadding-1" checked="checked">
    <label class="e-tabs__title" for="tabs-nopadding-1">
      <span class="e-tabs__separator">
        Overview
      </span>
    </label>
    <input type="radio" name="tabs-nopadding" id="tabs-nopadding-2">
    <label class="e-tabs__title" for="tabs-nopadding-2">
      <span class="e-tabs__separator">
        Content
      </span>
    </label>
    <div class="e-tabs__panel">
      <div class="e-tabs__panel__content e-tabs__panel__content-no_padding">
        <table class="e-table" data-e-version="2">
          <thead>
            <tr>
              <th>
                lorem ipsum
              </th>
              <th>
                Dolor sit amet
              </th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>
                Lorem, ipsum dolor sit amet consectetur
              </td>
              <td>
                onsequatur, aut. Cum expedita enim et quam itaque aut in dolor
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="e-tabs__panel__content e-tabs__panel__content-no_padding">
        Lorem ipsum dolor sit amet
      </div>
    </div>
  </div>
</div>
JavaScript
lorem ipsumDolor sit amet
Lorem, ipsum dolor sit amet consecteturonsequatur, aut. Cum expedita enim et quam itaque aut in dolor
Lorem ipsum dolor sit amet

Related components

AccordionVertical tab