Tab

Default .e-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
<div class="e-tabs">
  <input type="radio" name="tabs-1" id="tabs-1-0" checked="checked">
  <label for="tabs-1-0" class="e-tabs__title">
    <span class="e-tabs__separator">
      Tab 1
    </span>
  </label>
  <input type="radio" name="tabs-1" id="tabs-1-1">
  <label for="tabs-1-1" class="e-tabs__title">
    <span class="e-tabs__separator">
      Tab 2
    </span>
  </label>
  <input type="radio" name="tabs-1" id="tabs-1-2" disabled>
  <label for="tabs-1-2" class="e-tabs__title">
    <span class="e-tabs__separator">
      Disabled
    </span>
  </label>
  <input type="radio" name="tabs-1" id="tabs-1-3">
  <label for="tabs-1-3" class="e-tabs__title">
    <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 for="tabs-1-0" class="e-tabs__title"><span class="e-tabs__separator">Tab 1</span></label>
                          <input type="radio" name="tabs-1" id="tabs-1-1">
                          <label for="tabs-1-1" class="e-tabs__title"><span class="e-tabs__separator">Tab 2</span></label>
                          <input type="radio" name="tabs-1" id="tabs-1-2" disabled>
                          <label for="tabs-1-2" class="e-tabs__title"><span class="e-tabs__separator">Disabled</span></label>
                          <input type="radio" name="tabs-1" id="tabs-1-3">
                          <label for="tabs-1-3" class="e-tabs__title"><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>

Variations

Nested tab

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
<div class="e-tabs">
  <input type="radio" name="tabs-2" id="tabs-2-0" checked="checked">
  <label for="tabs-2-0" class="e-tabs__title">
    <span class="e-tabs__separator">
      Tab 1
    </span>
  </label>
  <input type="radio" name="tabs-2" id="tabs-2-1">
  <label for="tabs-2-1" class="e-tabs__title">
    <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 for="tabs-3-0" class="e-tabs__title">
          <span class="e-tabs__separator">
            Tab 1
          </span>
        </label>
        <input type="radio" name="tabs-3" id="tabs-3-1">
        <label for="tabs-3-1" class="e-tabs__title">
          <span class="e-tabs__separator">
            Tab 2
          </span>
        </label>
        <input type="radio" name="tabs-3" id="tabs-3-2" disabled>
        <label for="tabs-3-2" class="e-tabs__title">
          <span class="e-tabs__separator">
            Disabled
          </span>
        </label>
        <input type="radio" name="tabs-3" id="tabs-3-3">
        <label for="tabs-3-3" class="e-tabs__title">
          <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 for="tabs-2-0" class="e-tabs__title"><span class="e-tabs__separator">Tab 1</span></label>
                            <input type="radio" name="tabs-2" id="tabs-2-1">
                            <label for="tabs-2-1" class="e-tabs__title"><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 for="tabs-3-0" class="e-tabs__title"><span class="e-tabs__separator">Tab 1</span></label>
                                  <input type="radio" name="tabs-3" id="tabs-3-1">
                                  <label for="tabs-3-1" class="e-tabs__title"><span class="e-tabs__separator">Tab 2</span></label>
                                  <input type="radio" name="tabs-3" id="tabs-3-2" disabled>
                                  <label for="tabs-3-2" class="e-tabs__title"><span class="e-tabs__separator">Disabled</span></label>
                                  <input type="radio" name="tabs-3" id="tabs-3-3">
                                  <label for="tabs-3-3" class="e-tabs__title"><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>

Without checkbox

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 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>
<div class="e-box">
  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 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>
                          <div class="e-box">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>

Related components

AccordionVerticaltab

Last update

Message feat(components): use stylelint rules
Date:
()
Committer: rudywaltz
Component history