Tabs

BASIC TABS - SAMPLE CODE

<div class="basic-tabs">
  <div class="basic-tabs-nav gradient-smaragd-aquamarin">
    <button class="basic-tab active" data-tab="academic">Academic Journals</button>
    <button class="basic-tab" data-tab="business">Business Publications</button>
    <button class="basic-tab" data-tab="books">Books & Chapters</button>
    <button class="basic-tab" data-tab="conferences">Conferences</button>
    <button class="basic-tab" data-tab="track">Track Chairs</button>
    <button class="basic-tab" data-tab="cases">Case Studies</button>
  </div>
  <div class="basic-tabs-content">
    <div class="basic-tab-panel active" id="academic">Academic Journals content...</div>
    <div class="basic-tab-panel" id="business">Business Publications content...</div>
    <div class="basic-tab-panel" id="books">Books & Chapters content...</div>
    <div class="basic-tab-panel" id="conferences">Conferences content...</div>
    <div class="basic-tab-panel" id="track">Track Chairs content...</div>
    <div class="basic-tab-panel" id="cases">Case Studies content...</div>
  </div>
</div>

EMPTY TEMPLATE

<div class="basic-tabs">
  <div class="basic-tabs-nav gradient-smaragd-aquamarin">
    <button class="basic-tab active" data-tab="tab1">Tab 1</button>
    <button class="basic-tab" data-tab="tab2">Tab 2</button>
    <button class="basic-tab" data-tab="tab3">Tab 3</button>
  </div>
  <div class="basic-tabs-content">
    <div class="basic-tab-panel active" id="tab1">Content 1</div>
    <div class="basic-tab-panel" id="tab2">Content 2</div>
    <div class="basic-tab-panel" id="tab3">Content 3</div>
  </div>
</div>

OPTIONS SUMMARY
Style Options (add to <div class="basic-tabs ...">)
Class	Effect
(default)	Pill style, tabs stretch to fill width
basic-tabs-card	>>> Card buttons with shadows
basic-tabs-minimal	>>> Clean, subtle style


Overlay Options (> add to gradient nav)

basic-tabs-overlay-white	> Uniform white overlay (40% opacity)
basic-tabs-overlay-white-center	> White center vignette
basic-tabs-overlay-black	> Uniform black overlay (40% opacity)
basic-tabs-overlay-center	> Dark center vignette

Text Override (for light gradients)
basic-tabs-text-dark	> Dark text on inactive tabs