Basic 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 tabsSide Tabs
Vertikale Tab-Leiste aus weißen Pillen – z. B. als linke Navigation einer Seite mit mehreren Bereichen (erster Einsatz: die Lab-Seite im Fablab-LMS). Alle Pillen haben die Rahmenfarbe der Skin (--color-border), die kleine Rundung (--radius-md) und Sekundärtext (--color-text-secondary). Hover: die Pille hebt sich um einen Pixel mit weichem Schatten, der Text wird türkis (--color-primary) – kein Skalieren, kein Fett, der Rahmen bleibt. Aktiv: Text in dunklem Türkis (--color-primary-deep). .is-open markiert einen Elterntab, dessen Untertabs gezeigt werden; Untertabs sind kleiner und eingerückt, ein Bereichskopf (.side-tabs__head) ist eine Pille ohne Link. Unter 860 px wird die Leiste zur zentrierten, umbrechenden Zeile. Das Umschalten der Inhalte übernimmt die Seite (z. B. per Hash), die Komponente liefert nur die Optik.
SIDE TABS - SAMPLE CODE
<nav class="side-tabs" aria-label="...">
<ul>
<li><a class="side-tabs__item is-active" href="#overview">Overview</a></li>
<li><a class="side-tabs__item is-open" href="#material">Material</a>
<ul class="side-tabs__sub">
<li><a class="side-tabs__item side-tabs__item--sub" href="#slides">Slides</a></li>
<li><a class="side-tabs__item side-tabs__item--sub" href="#worksheets">Worksheets</a></li>
</ul>
</li>
<li><a class="side-tabs__item" href="#cockpit">Cockpit</a></li>
<li><span class="side-tabs__head">Admin</span>
<ul class="side-tabs__sub">
<li><a class="side-tabs__item side-tabs__item--sub" href="#edit">Edit</a></li>
</ul>
</li>
</ul>
</nav>
States: .is-active (selected) .is-open (parent whose sub tabs are shown)
Library: upmarkit_theme/side_tabs (css/components/side-tabs.css, loaded globally)
Tokens: --color-border (always) --color-text-secondary (text)
--color-primary (hover text) --color-primary-deep (active text) --radius-md