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.
Mumblecore lo-fi.
Tousled bicycle rights biodiesel vice +1 plaid farm-to-table dreamcatcher. Polaroid pickled distillery bitters authentic vinegar sustainable. Kickstarter ugh kombucha sustainable intelligentsia mustache biodiesel viral. Chicharrones 8-bit banh mi fashion axe vice. Listicle photo booth hashtag synth portland chicharrones ugh.
Poutine lo-fi hoodie.
Green juice truffaut franzen brooklyn pour-over. Biodiesel yuccie lo-fi 90's post-ironic. Fixie yuccie fingerstache put a bird on it green juice.
Squid pitchfork pickled street.
Typewriter marfa yr pour-over disrupt health. Tousled wes anderson waistcoat taxidermy locavore cray. Selfies direct trade beard photo booth hammock blog yolo.
Celiac pinterest organic tousled master.
Pickled gastropub semiotics xoxo freegan tote bag try-hard skateboard. Sartorial deep v sriracha chartreuse portland artisan ennui you probably haven't heard of them. Franzen art party try-hard cronut banjo meggings. Fixie beard chia stumptown biodiesel typewriter. Bicycle rights art party cronut.
<!-- 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-88de37">
<span class="vi-tab-panel__nav-link-label">letterpress butcher</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-cd484a">
<span class="vi-tab-panel__nav-link-label">street park</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-2d0bc3">
<span class="vi-tab-panel__nav-link-label">ethical cred</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">poutine migas</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-88de37">
<h2>Mumblecore lo-fi.</h2>
<p>Tousled bicycle rights biodiesel vice +1 plaid farm-to-table dreamcatcher. Polaroid pickled distillery bitters authentic vinegar sustainable. Kickstarter ugh kombucha sustainable intelligentsia mustache biodiesel viral. Chicharrones 8-bit banh mi fashion axe vice. Listicle photo booth hashtag synth portland chicharrones ugh.</p>
</div>
<div class="vi-tab-panel__pane tab-pane vi-typesystem vi-typesystem--collapse-last" id="sg-cd484a">
<h2>Poutine lo-fi hoodie.</h2>
<p>Green juice truffaut franzen brooklyn pour-over. Biodiesel yuccie lo-fi 90's post-ironic. Fixie yuccie fingerstache put a bird on it green juice.</p>
</div>
<div class="vi-tab-panel__pane tab-pane vi-typesystem vi-typesystem--collapse-last" id="sg-2d0bc3">
<h2>Squid pitchfork pickled street.</h2>
<p>Typewriter marfa yr pour-over disrupt health. Tousled wes anderson waistcoat taxidermy locavore cray. Selfies direct trade beard photo booth hammock blog yolo.</p>
</div>
<div class="vi-tab-panel__pane tab-pane vi-typesystem vi-typesystem--collapse-last">
<h2>Celiac pinterest organic tousled master.</h2>
<p>Pickled gastropub semiotics xoxo freegan tote bag try-hard skateboard. Sartorial deep v sriracha chartreuse portland artisan ennui you probably haven't heard of them. Franzen art party try-hard cronut banjo meggings. Fixie beard chia stumptown biodiesel typewriter. Bicycle rights art party cronut.</p>
</div>
</div>
</div>
</div>Neutral #
Gray colored background with dark colored tabs. Use modifier --neutral.
This is needed for nested tabs.
Seitan microdosing.
Cardigan art party vinegar meh stumptown portland mustache 90's. Narwhal hammock bitters hella cronut celiac. Meditation asymmetrical thundercats park. Food truck pinterest skateboard next level pabst. Schlitz kinfolk chillwave truffaut street.
Cliche +1 locavore.
Blog meh franzen scenester lomo cray celiac. Actually selvage ennui goth schlitz. Cardigan kickstarter 8-bit viral skateboard chicharrones stumptown. Loko fashion axe pour-over. Listicle schlitz echo.
Biodiesel butcher chartreuse hammock.
Ramps chillwave migas microdosing schlitz everyday polaroid fingerstache. Vinegar irony occupy disrupt five dollar toast seitan. Typewriter try-hard selfies next level austin. Mixtape brooklyn park franzen tote bag brunch pitchfork.
Sartorial ennui celiac austin waistcoat.
Schlitz asymmetrical williamsburg flannel typewriter iphone. Helvetica portland jean shorts food truck before they sold out meh. Leggings flannel listicle. Flannel post-ironic iphone. Dreamcatcher skateboard locavore artisan yolo.
<!-- 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-7b6071">
<span class="vi-tab-panel__nav-link-label">paleo austin</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-999cba">
<span class="vi-tab-panel__nav-link-label">plaid williamsburg</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-d039aa">
<span class="vi-tab-panel__nav-link-label">tilde letterpress</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">Yuccie meggings</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-7b6071">
<h2>Seitan microdosing.</h2>
<p>Cardigan art party vinegar meh stumptown portland mustache 90's. Narwhal hammock bitters hella cronut celiac. Meditation asymmetrical thundercats park. Food truck pinterest skateboard next level pabst. Schlitz kinfolk chillwave truffaut street.</p>
</div>
<div class="vi-tab-panel__pane tab-pane vi-tab-panel__pane--neutral vi-typesystem vi-typesystem--collapse-last" id="sg-999cba">
<h2>Cliche +1 locavore.</h2>
<p>Blog meh franzen scenester lomo cray celiac. Actually selvage ennui goth schlitz. Cardigan kickstarter 8-bit viral skateboard chicharrones stumptown. Loko fashion axe pour-over. Listicle schlitz echo.</p>
</div>
<div class="vi-tab-panel__pane tab-pane vi-tab-panel__pane--neutral vi-typesystem vi-typesystem--collapse-last" id="sg-d039aa">
<h2>Biodiesel butcher chartreuse hammock.</h2>
<p>Ramps chillwave migas microdosing schlitz everyday polaroid fingerstache. Vinegar irony occupy disrupt five dollar toast seitan. Typewriter try-hard selfies next level austin. Mixtape brooklyn park franzen tote bag brunch pitchfork.</p>
</div>
<div class="vi-tab-panel__pane tab-pane vi-tab-panel__pane--neutral vi-typesystem vi-typesystem--collapse-last">
<h2>Sartorial ennui celiac austin waistcoat.</h2>
<p>Schlitz asymmetrical williamsburg flannel typewriter iphone. Helvetica portland jean shorts food truck before they sold out meh. Leggings flannel listicle. Flannel post-ironic iphone. Dreamcatcher skateboard locavore artisan yolo.</p>
</div>
</div>
</div>
</div>Inversed #
Dark colored background with white tabs. Use modifier --inversed.
Yuccie microdosing.
Meh you probably haven't heard of them 90's distillery fixie skateboard ethical. Jean shorts brooklyn iphone 8-bit. Hashtag intelligentsia synth kogi small batch.
Phlogiston carry heirloom.
Wolf seitan narwhal cliche pitchfork wes anderson fanny pack pinterest. Bushwick kickstarter post-ironic thundercats irony beard banh mi hoodie. Synth gentrify actually fashion axe.
Venmo vegan iphone fingerstache.
Quinoa bitters ramps. Vinegar dreamcatcher microdosing bicycle rights butcher ramps. Synth phlogiston hashtag xoxo before they sold out you probably haven't heard of them typewriter wes anderson. Chambray vhs typewriter humblebrag offal biodiesel.
Literally typewriter pop-up venmo williamsburg.
Irony small batch kitsch godard health lomo. Godard vinegar street cardigan quinoa hella blue bottle hashtag. Before they sold out humblebrag chillwave fingerstache next level.
<!-- 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-452bc9">
<span class="vi-tab-panel__nav-link-label">taxidermy distillery</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-db5cac">
<span class="vi-tab-panel__nav-link-label">iPhone kogi</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-bb854e">
<span class="vi-tab-panel__nav-link-label">street synth</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">DIY portland</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-452bc9">
<h2>Yuccie microdosing.</h2>
<p>Meh you probably haven't heard of them 90's distillery fixie skateboard ethical. Jean shorts brooklyn iphone 8-bit. Hashtag intelligentsia synth kogi small batch.</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-db5cac">
<h2>Phlogiston carry heirloom.</h2>
<p>Wolf seitan narwhal cliche pitchfork wes anderson fanny pack pinterest. Bushwick kickstarter post-ironic thundercats irony beard banh mi hoodie. Synth gentrify actually fashion axe.</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-bb854e">
<h2>Venmo vegan iphone fingerstache.</h2>
<p>Quinoa bitters ramps. Vinegar dreamcatcher microdosing bicycle rights butcher ramps. Synth phlogiston hashtag xoxo before they sold out you probably haven't heard of them typewriter wes anderson. Chambray vhs typewriter humblebrag offal biodiesel.</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>Literally typewriter pop-up venmo williamsburg.</h2>
<p>Irony small batch kitsch godard health lomo. Godard vinegar street cardigan quinoa hella blue bottle hashtag. Before they sold out humblebrag chillwave fingerstache next level.</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-e1782e">
<span class="vi-tab-panel__nav-link-label">skateboard pug</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-326758">
<span class="vi-tab-panel__nav-link-label">beard ramps</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-669736">
<span class="vi-tab-panel__nav-link-label">locavore ennui</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">letterpress sriracha</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-e1782e">
...
</div>
<div class="vi-tab-panel__pane tab-pane vi-tab-panel__pane--column-aligned vi-typesystem vi-typesystem--collapse-last" id="sg-326758">
...
</div>
<div class="vi-tab-panel__pane tab-pane vi-tab-panel__pane--column-aligned vi-typesystem vi-typesystem--collapse-last" id="sg-669736">
...
</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-a9e0d1">
<span class="vi-tab-panel__nav-link-label">ennui tousled</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-47d533">
<span class="vi-tab-panel__nav-link-label">wayfarers lo-fi</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-a6c592">
<span class="vi-tab-panel__nav-link-label">scenester ramps</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">loko scenester</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-a9e0d1">
...
</div>
<div class="vi-tab-panel__pane tab-pane vi-tab-panel__pane--screen-aligned vi-typesystem vi-typesystem--collapse-last" id="sg-47d533">
...
</div>
<div class="vi-tab-panel__pane tab-pane vi-tab-panel__pane--screen-aligned vi-typesystem vi-typesystem--collapse-last" id="sg-a6c592">
...
</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-330543">
<span class="vi-tab-panel__nav-link-label">neutra +1</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-85a4be">
<span class="vi-tab-panel__nav-link-label">heirloom XOXO</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-618ce0">
<span class="vi-tab-panel__nav-link-label">PBR&B sustainable</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">venmo neutra</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-330543">
...
</div>
<div class="vi-tab-panel__pane tab-pane vi-tab-panel__pane--nested vi-typesystem vi-typesystem--collapse-last" id="sg-85a4be">
...
</div>
<div class="vi-tab-panel__pane tab-pane vi-tab-panel__pane--nested vi-typesystem vi-typesystem--collapse-last" id="sg-618ce0">
...
</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:
- The panels of the parent Tab-panel (the one with
--nested) do not have typesystem classes (.typesystem). - The nested Tab-panel has modifiers classes
--neutralto contrast its parent. - Extra content placed above the nested Tab-panel is wrapped in a container and typesystem.
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-09b15c">
<span class="vi-tab-panel__nav-link-label">poutine 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--nested" data-toggle="tab" href="#sg-d84023">
<span class="vi-tab-panel__nav-link-label">pug 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--nested" data-toggle="tab" href="#sg-3828ad">
<span class="vi-tab-panel__nav-link-label">gluten-free slow-carb</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">kickstarter wolf</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-09b15c">
<!-- 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-eca177">
<span class="vi-tab-panel__nav-link-label">skateboard pitchfork</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-a496d2">
<span class="vi-tab-panel__nav-link-label">iPhone letterpress</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-ade320">
<span class="vi-tab-panel__nav-link-label">helvetica everyday</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">post-ironic brunch</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-eca177">
...
</div>
<div class="vi-tab-panel__pane tab-pane vi-tab-panel__pane--neutral vi-typesystem vi-typesystem--collapse-last" id="sg-a496d2">
...
</div>
<div class="vi-tab-panel__pane tab-pane vi-tab-panel__pane--neutral vi-typesystem vi-typesystem--collapse-last" id="sg-ade320">
...
</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-d84023">
<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-2cb0c0">
<span class="vi-tab-panel__nav-link-label">heirloom bespoke</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-0d7721">
<span class="vi-tab-panel__nav-link-label">vice 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-da70c3">
<span class="vi-tab-panel__nav-link-label">+1 taxidermy</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">drinking gluten-free</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-2cb0c0">
...
</div>
<div class="vi-tab-panel__pane tab-pane vi-tab-panel__pane--neutral vi-typesystem vi-typesystem--collapse-last" id="sg-0d7721">
...
</div>
<div class="vi-tab-panel__pane tab-pane vi-tab-panel__pane--neutral vi-typesystem vi-typesystem--collapse-last" id="sg-da70c3">
...
</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-3828ad">
<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-561490">
<span class="vi-tab-panel__nav-link-label">mixtape fingerstache</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-168243">
<span class="vi-tab-panel__nav-link-label">beard wayfarers</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-9ccb3d">
<span class="vi-tab-panel__nav-link-label">forage vegan</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">cold-pressed sustainable</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-561490">
...
</div>
<div class="vi-tab-panel__pane tab-pane vi-tab-panel__pane--neutral vi-typesystem vi-typesystem--collapse-last" id="sg-168243">
...
</div>
<div class="vi-tab-panel__pane tab-pane vi-tab-panel__pane--neutral vi-typesystem vi-typesystem--collapse-last" id="sg-9ccb3d">
...
</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-3eaa1c">
<span class="vi-tab-panel__nav-link-label">cleanse chillwave</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-0b676c">
<span class="vi-tab-panel__nav-link-label">hammock readymade</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-8867a2">
<span class="vi-tab-panel__nav-link-label">banjo chicharrones</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">disrupt viral</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-3eaa1c">
...
</div>
<div class="vi-tab-panel__pane tab-pane vi-tab-panel__pane--neutral vi-typesystem vi-typesystem--collapse-last" id="sg-0b676c">
...
</div>
<div class="vi-tab-panel__pane tab-pane vi-tab-panel__pane--neutral vi-typesystem vi-typesystem--collapse-last" id="sg-8867a2">
...
</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
- 25 Jan 2023 - Add modifier –nested
- 25 Jan 2023 - Add modifier –neutral
- 02 Dec 2022 - Add full width panels (for use in full width layouts TWS)
- PBS support
- Initial draft