Open Close
Teva VIsion
Font Face
Teva Sans Latin
Drafts & Templates
PBS Templates
Primitives & components context
Teva Global
Primitives & components: Teva Global

Tab Panel

v0.0.0

The Tab Panel is a navigation element to easily access different areas of an individual page.

The default has a white background with dark colored tabs.

Slow-carb pbr&b.

Quinoa thundercats meh goth blue bottle humblebrag. Letterpress farm-to-table deep v forage. Gentrify stumptown vinegar organic skateboard before they sold out umami.

Goth occupy readymade.

Asymmetrical listicle next level austin. Craft beer small batch gastropub lumbersexual poutine. Hella dreamcatcher health.

Salvia pour-over humblebrag umami.

Fixie photo booth phlogiston drinking. Humblebrag polaroid dreamcatcher sustainable. Mustache craft beer wayfarers flannel vhs small batch truffaut stumptown. Leggings echo portland semiotics. Tousled swag ramps truffaut seitan pbr&b.

Beard chicharrones +1 neutra sustainable.

Squid stumptown authentic. Kale chips tousled small batch art party. Sustainable gluten-free chillwave brooklyn.

<!-- Container (mods: --column) -->
<div class="vi-container vi-container--column">
  <div class="vi-tab-panel">
    <ul class="nav nav-tabs vi-tab-panel__nav-tabs">
      <li class="nav-item vi-tab-panel__nav-item">
        <a class="nav-link vi-tab-panel__nav-link active" data-toggle="tab" href="#sg-c906ae">
          <span class="vi-tab-panel__nav-link-label">forage asymmetrical</span>
        </a>
      </li>
      <li class="nav-item vi-tab-panel__nav-item">
        <a class="nav-link vi-tab-panel__nav-link" data-toggle="tab" href="#sg-dca37e">
          <span class="vi-tab-panel__nav-link-label">wolf heirloom</span>
        </a>
      </li>
      <li class="nav-item vi-tab-panel__nav-item">
        <a class="nav-link vi-tab-panel__nav-link" data-toggle="tab" href="#sg-429308">
          <span class="vi-tab-panel__nav-link-label">quinoa marfa</span>
        </a>
      </li>
      <li class="nav-item vi-tab-panel__nav-item">
        <a class="nav-link vi-tab-panel__nav-link disabled" data-toggle="tab" href="#">
          <span class="vi-tab-panel__nav-link-label">locavore yr</span>
        </a>
      </li>
    </ul>
    <div class="tab-content vi-tab-panel__content">
      <div class="vi-tab-panel__pane tab-pane active show vi-typesystem vi-typesystem--collapse-last" id="sg-c906ae">
        <h2>Slow-carb pbr&amp;b.</h2>
        <p>Quinoa thundercats meh goth blue bottle humblebrag. Letterpress farm-to-table deep v forage. Gentrify stumptown vinegar organic skateboard before they sold out umami.</p>
      </div>
      <div class="vi-tab-panel__pane tab-pane vi-typesystem vi-typesystem--collapse-last" id="sg-dca37e">
        <h2>Goth occupy readymade.</h2>
        <p>Asymmetrical listicle next level austin. Craft beer small batch gastropub lumbersexual poutine. Hella dreamcatcher health.</p>
      </div>
      <div class="vi-tab-panel__pane tab-pane vi-typesystem vi-typesystem--collapse-last" id="sg-429308">
        <h2>Salvia pour-over humblebrag umami.</h2>
        <p>Fixie photo booth phlogiston drinking. Humblebrag polaroid dreamcatcher sustainable. Mustache craft beer wayfarers flannel vhs small batch truffaut stumptown. Leggings echo portland semiotics. Tousled swag ramps truffaut seitan pbr&amp;b.</p>
      </div>
      <div class="vi-tab-panel__pane tab-pane vi-typesystem vi-typesystem--collapse-last">
        <h2>Beard chicharrones +1 neutra sustainable.</h2>
        <p>Squid stumptown authentic. Kale chips tousled small batch art party. Sustainable gluten-free chillwave brooklyn.</p>
      </div>
    </div>
  </div>
</div>

Neutral #

Gray colored background with dark colored tabs. Use modifier --neutral.

This is needed for nested tabs.

Chia semiotics.

Cliche yr pbr&b flexitarian roof pickled neutra. Green juice cleanse put a bird on it tofu kale chips trust fund. Aesthetic ugh cleanse cliche pop-up goth pickled. Selfies poutine cornhole flannel vinegar beard diy.

Hoodie mixtape poutine.

Trust fund sartorial tattooed synth before they sold out. Locavore muggle magic listicle. Sustainable franzen beard tofu retro crucifix. Occupy muggle magic vinegar 3 wolf moon fixie.

Blog sartorial mustache cred.

Intelligentsia master skateboard 3 wolf moon trust fund. Muggle magic cray trust fund. Truffaut craft beer tilde whatever neutra.

Flannel shoreditch forage vice cred.

Semiotics selfies banjo. Tote bag yolo butcher authentic keytar tattooed. Microdosing art party brooklyn bitters flexitarian paleo.

<!-- Container (mods: --column) -->
<div class="vi-container vi-container--column">
  <div class="vi-tab-panel vi-tab-panel--neutral">
    <ul class="nav nav-tabs vi-tab-panel__nav-tabs">
      <li class="nav-item vi-tab-panel__nav-item">
        <a class="nav-link vi-tab-panel__nav-link vi-tab-panel__nav-link--neutral active" data-toggle="tab" href="#sg-6808ab">
          <span class="vi-tab-panel__nav-link-label">seitan hoodie</span>
        </a>
      </li>
      <li class="nav-item vi-tab-panel__nav-item">
        <a class="nav-link vi-tab-panel__nav-link vi-tab-panel__nav-link--neutral" data-toggle="tab" href="#sg-010b38">
          <span class="vi-tab-panel__nav-link-label">drinking yr</span>
        </a>
      </li>
      <li class="nav-item vi-tab-panel__nav-item">
        <a class="nav-link vi-tab-panel__nav-link vi-tab-panel__nav-link--neutral" data-toggle="tab" href="#sg-071cae">
          <span class="vi-tab-panel__nav-link-label">hashtag chartreuse</span>
        </a>
      </li>
      <li class="nav-item vi-tab-panel__nav-item">
        <a class="nav-link vi-tab-panel__nav-link vi-tab-panel__nav-link--neutral disabled" data-toggle="tab" href="#">
          <span class="vi-tab-panel__nav-link-label">lumbersexual roof</span>
        </a>
      </li>
    </ul>
    <div class="tab-content vi-tab-panel__content">
      <div class="vi-tab-panel__pane tab-pane active show vi-tab-panel__pane--neutral vi-typesystem vi-typesystem--collapse-last" id="sg-6808ab">
        <h2>Chia semiotics.</h2>
        <p>Cliche yr pbr&amp;b flexitarian roof pickled neutra. Green juice cleanse put a bird on it tofu kale chips trust fund. Aesthetic ugh cleanse cliche pop-up goth pickled. Selfies poutine cornhole flannel vinegar beard diy.</p>
      </div>
      <div class="vi-tab-panel__pane tab-pane vi-tab-panel__pane--neutral vi-typesystem vi-typesystem--collapse-last" id="sg-010b38">
        <h2>Hoodie mixtape poutine.</h2>
        <p>Trust fund sartorial tattooed synth before they sold out. Locavore muggle magic listicle. Sustainable franzen beard tofu retro crucifix. Occupy muggle magic vinegar 3 wolf moon fixie.</p>
      </div>
      <div class="vi-tab-panel__pane tab-pane vi-tab-panel__pane--neutral vi-typesystem vi-typesystem--collapse-last" id="sg-071cae">
        <h2>Blog sartorial mustache cred.</h2>
        <p>Intelligentsia master skateboard 3 wolf moon trust fund. Muggle magic cray trust fund. Truffaut craft beer tilde whatever neutra.</p>
      </div>
      <div class="vi-tab-panel__pane tab-pane vi-tab-panel__pane--neutral vi-typesystem vi-typesystem--collapse-last">
        <h2>Flannel shoreditch forage vice cred.</h2>
        <p>Semiotics selfies banjo. Tote bag yolo butcher authentic keytar tattooed. Microdosing art party brooklyn bitters flexitarian paleo.</p>
      </div>
    </div>
  </div>
</div>

Inversed #

Dark colored background with white tabs. Use modifier --inversed.

Blog lomo.

Typewriter irony five dollar toast gastropub poutine. Cardigan taxidermy forage etsy drinking thundercats. Beard chartreuse banh mi. Normcore retro roof whatever farm-to-table dreamcatcher. Beard skateboard whatever green juice cronut.

Wolf microdosing cliche.

Occupy gastropub gluten-free yuccie. Ennui 90's migas typewriter. Ugh cold-pressed fixie asymmetrical hammock. Crucifix beard vinegar vegan cronut farm-to-table next level.

Cray truffaut squid phlogiston.

Asymmetrical godard shabby chic twee. Lo-fi schlitz salvia scenester. Farm-to-table church-key phlogiston helvetica lomo tofu roof brooklyn. Photo booth narwhal selvage twee listicle squid offal hammock.

Umami occupy vegan master hashtag.

Migas ennui chillwave shabby chic echo. Microdosing pug leggings. Shabby chic art party fashion axe green juice.

<!-- Container (mods: --column) -->
<div class="vi-container vi-container--column">
  <div class="vi-tab-panel vi-tab-panel--inversed">
    <ul class="nav nav-tabs vi-tab-panel__nav-tabs">
      <li class="nav-item vi-tab-panel__nav-item">
        <a class="nav-link vi-tab-panel__nav-link vi-tab-panel__nav-link--inversed active" data-toggle="tab" href="#sg-2ea6da">
          <span class="vi-tab-panel__nav-link-label">ugh hammock</span>
        </a>
      </li>
      <li class="nav-item vi-tab-panel__nav-item">
        <a class="nav-link vi-tab-panel__nav-link vi-tab-panel__nav-link--inversed" data-toggle="tab" href="#sg-272b13">
          <span class="vi-tab-panel__nav-link-label">taxidermy YOLO</span>
        </a>
      </li>
      <li class="nav-item vi-tab-panel__nav-item">
        <a class="nav-link vi-tab-panel__nav-link vi-tab-panel__nav-link--inversed" data-toggle="tab" href="#sg-73cdb9">
          <span class="vi-tab-panel__nav-link-label">kogi cleanse</span>
        </a>
      </li>
      <li class="nav-item vi-tab-panel__nav-item">
        <a class="nav-link vi-tab-panel__nav-link vi-tab-panel__nav-link--inversed disabled" data-toggle="tab" href="#">
          <span class="vi-tab-panel__nav-link-label">sustainable drinking</span>
        </a>
      </li>
    </ul>
    <div class="tab-content vi-tab-panel__content">
      <div class="vi-tab-panel__pane tab-pane active show vi-tab-panel__pane--inversed vi-typesystem vi-typesystem--inversed vi-typesystem--collapse-last" id="sg-2ea6da">
        <h2>Blog lomo.</h2>
        <p>Typewriter irony five dollar toast gastropub poutine. Cardigan taxidermy forage etsy drinking thundercats. Beard chartreuse banh mi. Normcore retro roof whatever farm-to-table dreamcatcher. Beard skateboard whatever green juice cronut.</p>
      </div>
      <div class="vi-tab-panel__pane tab-pane vi-tab-panel__pane--inversed vi-typesystem vi-typesystem--inversed vi-typesystem--collapse-last" id="sg-272b13">
        <h2>Wolf microdosing cliche.</h2>
        <p>Occupy gastropub gluten-free yuccie. Ennui 90's migas typewriter. Ugh cold-pressed fixie asymmetrical hammock. Crucifix beard vinegar vegan cronut farm-to-table next level.</p>
      </div>
      <div class="vi-tab-panel__pane tab-pane vi-tab-panel__pane--inversed vi-typesystem vi-typesystem--inversed vi-typesystem--collapse-last" id="sg-73cdb9">
        <h2>Cray truffaut squid phlogiston.</h2>
        <p>Asymmetrical godard shabby chic twee. Lo-fi schlitz salvia scenester. Farm-to-table church-key phlogiston helvetica lomo tofu roof brooklyn. Photo booth narwhal selvage twee listicle squid offal hammock.</p>
      </div>
      <div class="vi-tab-panel__pane tab-pane vi-tab-panel__pane--inversed vi-typesystem vi-typesystem--inversed vi-typesystem--collapse-last">
        <h2>Umami occupy vegan master hashtag.</h2>
        <p>Migas ennui chillwave shabby chic echo. Microdosing pug leggings. Shabby chic art party fashion axe green juice.</p>
      </div>
    </div>
  </div>
</div>

Full width panels #

Following variations are created for TWS use.

The width of the panel is the same as the width of the window, meaning the background fills the whole width of the page. Please note that it must be used in a full width page layout.

That allows for three things:

  • the content in the tab panel can align with the content outside the tab panel
  • the content can be as wide as the content outside the tab panel (column-aligned)
  • the content can be (almost) as wide as the page (screen-aligned)

Column aligned #

Use modifier --column-aligned to align to the content outside the tab panel.

Note that the tabs .vi-tab-panel__nav-tabs are wrapped in a Container with modifier --column.

Container for visual reference 
<div class="vi-tab-panel vi-tab-panel--column-aligned">
  <!-- Container (mods: --column) -->
  <div class="vi-container vi-container--column">
    <ul class="nav nav-tabs vi-tab-panel__nav-tabs">
      <li class="nav-item vi-tab-panel__nav-item">
        <a class="nav-link vi-tab-panel__nav-link vi-tab-panel__nav-link--column-aligned active" data-toggle="tab" href="#sg-73487e">
          <span class="vi-tab-panel__nav-link-label">squid DIY</span>
        </a>
      </li>
      <li class="nav-item vi-tab-panel__nav-item">
        <a class="nav-link vi-tab-panel__nav-link vi-tab-panel__nav-link--column-aligned" data-toggle="tab" href="#sg-4aa8bb">
          <span class="vi-tab-panel__nav-link-label">fingerstache typewriter</span>
        </a>
      </li>
      <li class="nav-item vi-tab-panel__nav-item">
        <a class="nav-link vi-tab-panel__nav-link vi-tab-panel__nav-link--column-aligned" data-toggle="tab" href="#sg-d08312">
          <span class="vi-tab-panel__nav-link-label">bushwick typewriter</span>
        </a>
      </li>
      <li class="nav-item vi-tab-panel__nav-item">
        <a class="nav-link vi-tab-panel__nav-link vi-tab-panel__nav-link--column-aligned disabled" data-toggle="tab" href="#">
          <span class="vi-tab-panel__nav-link-label">humblebrag taxidermy</span>
        </a>
      </li>
    </ul>
  </div>
  <div class="tab-content vi-tab-panel__content">
    <div class="vi-tab-panel__pane tab-pane active show vi-tab-panel__pane--column-aligned vi-typesystem vi-typesystem--collapse-last" id="sg-73487e">
      ...
    </div>
    <div class="vi-tab-panel__pane tab-pane vi-tab-panel__pane--column-aligned vi-typesystem vi-typesystem--collapse-last" id="sg-4aa8bb">
      ...
    </div>
    <div class="vi-tab-panel__pane tab-pane vi-tab-panel__pane--column-aligned vi-typesystem vi-typesystem--collapse-last" id="sg-d08312">
      ...
    </div>
    <div class="vi-tab-panel__pane tab-pane vi-tab-panel__pane--column-aligned vi-typesystem vi-typesystem--collapse-last">
      ...
    </div>
  </div>
</div>

Screen aligned #

Use modifier --screen-aligned to align to the content to the screen.

Note that the tabs .vi-tab-panel__nav-tabs are wrapped in a Container with modifier --column.

Container for visual reference 
<div class="vi-tab-panel vi-tab-panel--screen-aligned">
  <!-- Container (mods: --column) -->
  <div class="vi-container vi-container--column">
    <ul class="nav nav-tabs vi-tab-panel__nav-tabs">
      <li class="nav-item vi-tab-panel__nav-item">
        <a class="nav-link vi-tab-panel__nav-link vi-tab-panel__nav-link--screen-aligned active" data-toggle="tab" href="#sg-e05d47">
          <span class="vi-tab-panel__nav-link-label">crucifix 90's</span>
        </a>
      </li>
      <li class="nav-item vi-tab-panel__nav-item">
        <a class="nav-link vi-tab-panel__nav-link vi-tab-panel__nav-link--screen-aligned" data-toggle="tab" href="#sg-1d6294">
          <span class="vi-tab-panel__nav-link-label">+1 umami</span>
        </a>
      </li>
      <li class="nav-item vi-tab-panel__nav-item">
        <a class="nav-link vi-tab-panel__nav-link vi-tab-panel__nav-link--screen-aligned" data-toggle="tab" href="#sg-47c842">
          <span class="vi-tab-panel__nav-link-label">vinegar irony</span>
        </a>
      </li>
      <li class="nav-item vi-tab-panel__nav-item">
        <a class="nav-link vi-tab-panel__nav-link vi-tab-panel__nav-link--screen-aligned disabled" data-toggle="tab" href="#">
          <span class="vi-tab-panel__nav-link-label">dreamcatcher fingerstache</span>
        </a>
      </li>
    </ul>
  </div>
  <div class="tab-content vi-tab-panel__content">
    <div class="vi-tab-panel__pane tab-pane active show vi-tab-panel__pane--screen-aligned vi-typesystem vi-typesystem--collapse-last" id="sg-e05d47">
      ...
    </div>
    <div class="vi-tab-panel__pane tab-pane vi-tab-panel__pane--screen-aligned vi-typesystem vi-typesystem--collapse-last" id="sg-1d6294">
      ...
    </div>
    <div class="vi-tab-panel__pane tab-pane vi-tab-panel__pane--screen-aligned vi-typesystem vi-typesystem--collapse-last" id="sg-47c842">
      ...
    </div>
    <div class="vi-tab-panel__pane tab-pane vi-tab-panel__pane--screen-aligned vi-typesystem vi-typesystem--collapse-last">
      ...
    </div>
  </div>
</div>

Nested #

Use modifier --nested to align to the content to the screen.

Note that the tabs .vi-tab-panel__nav-tabs are wrapped in a Container with modifier --column.

<div class="vi-tab-panel vi-tab-panel--nested">
  <!-- Container (mods: --column) -->
  <div class="vi-container vi-container--column">
    <ul class="nav nav-tabs vi-tab-panel__nav-tabs">
      <li class="nav-item vi-tab-panel__nav-item">
        <a class="nav-link vi-tab-panel__nav-link vi-tab-panel__nav-link--nested active" data-toggle="tab" href="#sg-043241">
          <span class="vi-tab-panel__nav-link-label">seitan cray</span>
        </a>
      </li>
      <li class="nav-item vi-tab-panel__nav-item">
        <a class="nav-link vi-tab-panel__nav-link vi-tab-panel__nav-link--nested" data-toggle="tab" href="#sg-0eb294">
          <span class="vi-tab-panel__nav-link-label">literally schlitz</span>
        </a>
      </li>
      <li class="nav-item vi-tab-panel__nav-item">
        <a class="nav-link vi-tab-panel__nav-link vi-tab-panel__nav-link--nested" data-toggle="tab" href="#sg-bde068">
          <span class="vi-tab-panel__nav-link-label">Godard pour-over</span>
        </a>
      </li>
      <li class="nav-item vi-tab-panel__nav-item">
        <a class="nav-link vi-tab-panel__nav-link vi-tab-panel__nav-link--nested disabled" data-toggle="tab" href="#">
          <span class="vi-tab-panel__nav-link-label">umami pop-up</span>
        </a>
      </li>
    </ul>
  </div>
  <div class="tab-content vi-tab-panel__content">
    <div class="vi-tab-panel__pane tab-pane active show vi-tab-panel__pane--nested vi-typesystem vi-typesystem--collapse-last" id="sg-043241">
      ...
    </div>
    <div class="vi-tab-panel__pane tab-pane vi-tab-panel__pane--nested vi-typesystem vi-typesystem--collapse-last" id="sg-0eb294">
      ...
    </div>
    <div class="vi-tab-panel__pane tab-pane vi-tab-panel__pane--nested vi-typesystem vi-typesystem--collapse-last" id="sg-bde068">
      ...
    </div>
    <div class="vi-tab-panel__pane tab-pane vi-tab-panel__pane--nested vi-typesystem vi-typesystem--collapse-last">
      ...
    </div>
  </div>
</div>

Full nested example. Things to note:

Just some example

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolorum explicabo amet eligendi sapiente, facere aspernatur, magnam iusto dolorem sint maiores dolor neque molestiae nemo? Autem laudantium molestias ducimus voluptatibus repellendus!

<div class="vi-tab-panel vi-tab-panel--nested">
  <!-- Container (mods: --column) -->
  <div class="vi-container vi-container--column">
    <ul class="nav nav-tabs vi-tab-panel__nav-tabs">
      <li class="nav-item vi-tab-panel__nav-item">
        <a class="nav-link vi-tab-panel__nav-link vi-tab-panel__nav-link--nested active" data-toggle="tab" href="#sg-049eb0">
          <span class="vi-tab-panel__nav-link-label">flannel keytar</span>
        </a>
      </li>
      <li class="nav-item vi-tab-panel__nav-item">
        <a class="nav-link vi-tab-panel__nav-link vi-tab-panel__nav-link--nested" data-toggle="tab" href="#sg-190322">
          <span class="vi-tab-panel__nav-link-label">PBR&amp;B try-hard</span>
        </a>
      </li>
      <li class="nav-item vi-tab-panel__nav-item">
        <a class="nav-link vi-tab-panel__nav-link vi-tab-panel__nav-link--nested" data-toggle="tab" href="#sg-db23b3">
          <span class="vi-tab-panel__nav-link-label">meditation kombucha</span>
        </a>
      </li>
      <li class="nav-item vi-tab-panel__nav-item">
        <a class="nav-link vi-tab-panel__nav-link vi-tab-panel__nav-link--nested disabled" data-toggle="tab" href="#">
          <span class="vi-tab-panel__nav-link-label">park celiac</span>
        </a>
      </li>
    </ul>
  </div>
  <div class="tab-content vi-tab-panel__content">
    <div class="vi-tab-panel__pane tab-pane active show vi-tab-panel__pane--nested" id="sg-049eb0">
      <!-- Container (mods: --column) -->
      <div class="vi-container vi-container--column">
        <div class="vi-typesystem vi-typesystem--article">
          <h3 class="h1">Just some example</h3>
          <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolorum explicabo amet eligendi sapiente, facere aspernatur, magnam iusto dolorem sint maiores dolor neque molestiae nemo? Autem laudantium molestias ducimus voluptatibus repellendus!</p>
        </div>
      </div>
      <div class="vi-tab-panel vi-tab-panel--neutral">
        <!-- Container (mods: --column) -->
        <div class="vi-container vi-container--column">
          <ul class="nav nav-tabs vi-tab-panel__nav-tabs">
            <li class="nav-item vi-tab-panel__nav-item">
              <a class="nav-link vi-tab-panel__nav-link vi-tab-panel__nav-link--neutral active" data-toggle="tab" href="#sg-a217a5">
                <span class="vi-tab-panel__nav-link-label">chartreuse whatever</span>
              </a>
            </li>
            <li class="nav-item vi-tab-panel__nav-item">
              <a class="nav-link vi-tab-panel__nav-link vi-tab-panel__nav-link--neutral" data-toggle="tab" href="#sg-8b8ba9">
                <span class="vi-tab-panel__nav-link-label">aesthetic hashtag</span>
              </a>
            </li>
            <li class="nav-item vi-tab-panel__nav-item">
              <a class="nav-link vi-tab-panel__nav-link vi-tab-panel__nav-link--neutral" data-toggle="tab" href="#sg-aa7d55">
                <span class="vi-tab-panel__nav-link-label">hella semiotics</span>
              </a>
            </li>
            <li class="nav-item vi-tab-panel__nav-item">
              <a class="nav-link vi-tab-panel__nav-link vi-tab-panel__nav-link--neutral disabled" data-toggle="tab" href="#">
                <span class="vi-tab-panel__nav-link-label">quinoa vice</span>
              </a>
            </li>
          </ul>
        </div>
        <div class="tab-content vi-tab-panel__content">
          <div class="vi-tab-panel__pane tab-pane active show vi-tab-panel__pane--neutral vi-typesystem vi-typesystem--collapse-last" id="sg-a217a5">
            ...
          </div>
          <div class="vi-tab-panel__pane tab-pane vi-tab-panel__pane--neutral vi-typesystem vi-typesystem--collapse-last" id="sg-8b8ba9">
            ...
          </div>
          <div class="vi-tab-panel__pane tab-pane vi-tab-panel__pane--neutral vi-typesystem vi-typesystem--collapse-last" id="sg-aa7d55">
            ...
          </div>
          <div class="vi-tab-panel__pane tab-pane vi-tab-panel__pane--neutral vi-typesystem vi-typesystem--collapse-last">
            ...
          </div>
        </div>
      </div>
    </div>
    <div class="vi-tab-panel__pane tab-pane vi-tab-panel__pane--nested" id="sg-190322">
      <div class="vi-tab-panel vi-tab-panel--neutral">
        <!-- Container (mods: --column) -->
        <div class="vi-container vi-container--column">
          <ul class="nav nav-tabs vi-tab-panel__nav-tabs">
            <li class="nav-item vi-tab-panel__nav-item">
              <a class="nav-link vi-tab-panel__nav-link vi-tab-panel__nav-link--neutral active" data-toggle="tab" href="#sg-acc05c">
                <span class="vi-tab-panel__nav-link-label">master skateboard</span>
              </a>
            </li>
            <li class="nav-item vi-tab-panel__nav-item">
              <a class="nav-link vi-tab-panel__nav-link vi-tab-panel__nav-link--neutral" data-toggle="tab" href="#sg-2e3e12">
                <span class="vi-tab-panel__nav-link-label">offal salvia</span>
              </a>
            </li>
            <li class="nav-item vi-tab-panel__nav-item">
              <a class="nav-link vi-tab-panel__nav-link vi-tab-panel__nav-link--neutral" data-toggle="tab" href="#sg-dba381">
                <span class="vi-tab-panel__nav-link-label">goth mixtape</span>
              </a>
            </li>
            <li class="nav-item vi-tab-panel__nav-item">
              <a class="nav-link vi-tab-panel__nav-link vi-tab-panel__nav-link--neutral disabled" data-toggle="tab" href="#">
                <span class="vi-tab-panel__nav-link-label">keytar typewriter</span>
              </a>
            </li>
          </ul>
        </div>
        <div class="tab-content vi-tab-panel__content">
          <div class="vi-tab-panel__pane tab-pane active show vi-tab-panel__pane--neutral vi-typesystem vi-typesystem--collapse-last" id="sg-acc05c">
            ...
          </div>
          <div class="vi-tab-panel__pane tab-pane vi-tab-panel__pane--neutral vi-typesystem vi-typesystem--collapse-last" id="sg-2e3e12">
            ...
          </div>
          <div class="vi-tab-panel__pane tab-pane vi-tab-panel__pane--neutral vi-typesystem vi-typesystem--collapse-last" id="sg-dba381">
            ...
          </div>
          <div class="vi-tab-panel__pane tab-pane vi-tab-panel__pane--neutral vi-typesystem vi-typesystem--collapse-last">
            ...
          </div>
        </div>
      </div>
    </div>
    <div class="vi-tab-panel__pane tab-pane vi-tab-panel__pane--nested" id="sg-db23b3">
      <div class="vi-tab-panel vi-tab-panel--neutral">
        <!-- Container (mods: --column) -->
        <div class="vi-container vi-container--column">
          <ul class="nav nav-tabs vi-tab-panel__nav-tabs">
            <li class="nav-item vi-tab-panel__nav-item">
              <a class="nav-link vi-tab-panel__nav-link vi-tab-panel__nav-link--neutral active" data-toggle="tab" href="#sg-60e200">
                <span class="vi-tab-panel__nav-link-label">gluten-free salvia</span>
              </a>
            </li>
            <li class="nav-item vi-tab-panel__nav-item">
              <a class="nav-link vi-tab-panel__nav-link vi-tab-panel__nav-link--neutral" data-toggle="tab" href="#sg-bc7084">
                <span class="vi-tab-panel__nav-link-label">DIY paleo</span>
              </a>
            </li>
            <li class="nav-item vi-tab-panel__nav-item">
              <a class="nav-link vi-tab-panel__nav-link vi-tab-panel__nav-link--neutral" data-toggle="tab" href="#sg-183104">
                <span class="vi-tab-panel__nav-link-label">carry salvia</span>
              </a>
            </li>
            <li class="nav-item vi-tab-panel__nav-item">
              <a class="nav-link vi-tab-panel__nav-link vi-tab-panel__nav-link--neutral disabled" data-toggle="tab" href="#">
                <span class="vi-tab-panel__nav-link-label">iPhone vinyl</span>
              </a>
            </li>
          </ul>
        </div>
        <div class="tab-content vi-tab-panel__content">
          <div class="vi-tab-panel__pane tab-pane active show vi-tab-panel__pane--neutral vi-typesystem vi-typesystem--collapse-last" id="sg-60e200">
            ...
          </div>
          <div class="vi-tab-panel__pane tab-pane vi-tab-panel__pane--neutral vi-typesystem vi-typesystem--collapse-last" id="sg-bc7084">
            ...
          </div>
          <div class="vi-tab-panel__pane tab-pane vi-tab-panel__pane--neutral vi-typesystem vi-typesystem--collapse-last" id="sg-183104">
            ...
          </div>
          <div class="vi-tab-panel__pane tab-pane vi-tab-panel__pane--neutral vi-typesystem vi-typesystem--collapse-last">
            ...
          </div>
        </div>
      </div>
    </div>
    <div class="vi-tab-panel__pane tab-pane vi-tab-panel__pane--nested">
      <div class="vi-tab-panel vi-tab-panel--neutral">
        <!-- Container (mods: --column) -->
        <div class="vi-container vi-container--column">
          <ul class="nav nav-tabs vi-tab-panel__nav-tabs">
            <li class="nav-item vi-tab-panel__nav-item">
              <a class="nav-link vi-tab-panel__nav-link vi-tab-panel__nav-link--neutral active" data-toggle="tab" href="#sg-be4c29">
                <span class="vi-tab-panel__nav-link-label">cray chartreuse</span>
              </a>
            </li>
            <li class="nav-item vi-tab-panel__nav-item">
              <a class="nav-link vi-tab-panel__nav-link vi-tab-panel__nav-link--neutral" data-toggle="tab" href="#sg-a6517d">
                <span class="vi-tab-panel__nav-link-label">migas cronut</span>
              </a>
            </li>
            <li class="nav-item vi-tab-panel__nav-item">
              <a class="nav-link vi-tab-panel__nav-link vi-tab-panel__nav-link--neutral" data-toggle="tab" href="#sg-bb72c5">
                <span class="vi-tab-panel__nav-link-label">butcher cornhole</span>
              </a>
            </li>
            <li class="nav-item vi-tab-panel__nav-item">
              <a class="nav-link vi-tab-panel__nav-link vi-tab-panel__nav-link--neutral disabled" data-toggle="tab" href="#">
                <span class="vi-tab-panel__nav-link-label">bespoke PBR&amp;B</span>
              </a>
            </li>
          </ul>
        </div>
        <div class="tab-content vi-tab-panel__content">
          <div class="vi-tab-panel__pane tab-pane active show vi-tab-panel__pane--neutral vi-typesystem vi-typesystem--collapse-last" id="sg-be4c29">
            ...
          </div>
          <div class="vi-tab-panel__pane tab-pane vi-tab-panel__pane--neutral vi-typesystem vi-typesystem--collapse-last" id="sg-a6517d">
            ...
          </div>
          <div class="vi-tab-panel__pane tab-pane vi-tab-panel__pane--neutral vi-typesystem vi-typesystem--collapse-last" id="sg-bb72c5">
            ...
          </div>
          <div class="vi-tab-panel__pane tab-pane vi-tab-panel__pane--neutral vi-typesystem vi-typesystem--collapse-last">
            ...
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Stylesheets #

The following stylesheets are required to display this component.

The following additional stylesheet is used to display the example(s).

JavaScript #

The following javascript is required to display this component.

Usage documentation #

Usage documentation can be found here.

Changelog #

Changelog

Added