Tableiste @tab-bar
<div class="tab-bar tab-bar--list tab-bar--uninitalized">
<div class="tab-bar__select-wrap"><button class="tab-bar__select" aria-haspopup="true" aria-expanded="false"><span class="u-hidden-visually">Inhalt auswählen</span><span class="tab-bar__select-current" aria-hidden="true"><span class="tab-bar__kicker f-w-normal">Unsere</span> Veranstaltungen</span><svg class="icon icon--dropdown tab-bar__select-icon" viewBox="0 0 200 200">
<use xlink:href="#icon-dropdown"></use>
</svg></button></div>
<ul class="tab-bar__items" role="tablist">
<li class="tab-bar__item-wrap" role="presentation"><a class="tab-bar__item tab-bar__item--active" aria-selected="true" id="tab-bar-08ee-tab-0" role="tab" href="#"><span class="tab-bar__kicker f-w-normal">Unsere</span> Veranstaltungen</a></li>
<li class="tab-bar__item-wrap" role="presentation"><a class="tab-bar__item" id="tab-bar-08ee-tab-1" role="tab" href="#"><span class="tab-bar__kicker f-w-normal">Unsere</span> Publikationen</a></li>
<li class="tab-bar__item-wrap" role="presentation"><a class="tab-bar__item" id="tab-bar-08ee-tab-2" role="tab" href="#"><span class="tab-bar__kicker f-w-normal">Unsere</span> Podcasts</a></li>
<li class="tab-bar__item-wrap" role="presentation"><a class="tab-bar__item" id="tab-bar-08ee-tab-3" role="tab" href="#"><span class="tab-bar__kicker f-w-normal">Unsere</span> Ausschreibungen</a></li>
</ul>
</div>{
"items": [
{
"link": "#",
"title": "| #[span.tab-bar__kicker.f-w-normal Unsere] Veranstaltungen\n",
"active": true
},
{
"link": "#",
"title": "| #[span.tab-bar__kicker.f-w-normal Unsere] Publikationen\n"
},
{
"link": "#",
"title": "| #[span.tab-bar__kicker.f-w-normal Unsere] Podcasts\n"
},
{
"link": "#",
"title": "| #[span.tab-bar__kicker.f-w-normal Unsere] Ausschreibungen\n"
}
]
}
Tableiste Simple @tab-bar--simple
<div class="tab-bar tab-bar--list tab-bar--uninitalized tab-bar--simple">
<div class="tab-bar__select-wrap"><button class="tab-bar__select" aria-haspopup="true" aria-expanded="false"><span class="u-hidden-visually">Inhalt auswählen</span><span class="tab-bar__select-current" aria-hidden="true">Alle (486)</span><svg class="icon icon--dropdown tab-bar__select-icon" viewBox="0 0 200 200">
<use xlink:href="#icon-dropdown"></use>
</svg></button></div>
<ul class="tab-bar__items" role="tablist">
<li class="tab-bar__item-wrap" role="presentation"><a class="tab-bar__item tab-bar__item--active" aria-selected="true" id="tab-bar-dc0b-tab-0" role="tab" href="alle.html">Alle (486)</a></li>
<li class="tab-bar__item-wrap" role="presentation"><a class="tab-bar__item" id="tab-bar-dc0b-tab-1" role="tab" href="aktuelles.html">Aktuelles (26)</a></li>
<li class="tab-bar__item-wrap" role="presentation"><a class="tab-bar__item" id="tab-bar-dc0b-tab-2" role="tab" href="programme.html">Programme (58)</a></li>
<li class="tab-bar__item-wrap" role="presentation"><a class="tab-bar__item" id="tab-bar-dc0b-tab-3" role="tab" href="ausschreibungen.html">Ausschreibungen (12)</a></li>
<li class="tab-bar__item-wrap" role="presentation"><a class="tab-bar__item" id="tab-bar-dc0b-tab-4" role="tab" href="downloads.html">Downloads (195)</a></li>
<li class="tab-bar__item-wrap" role="presentation"><a class="tab-bar__item" id="tab-bar-dc0b-tab-5" role="tab" href="sonstige.html">Sonstige (195)</a></li>
</ul>
</div>{
"items": [
{
"link": "alle.html",
"title": "| Alle (486)\n",
"active": true
},
{
"link": "aktuelles.html",
"title": "| Aktuelles (26)\n"
},
{
"link": "programme.html",
"title": "| Programme (58)\n"
},
{
"link": "ausschreibungen.html",
"title": "| Ausschreibungen (12)\n"
},
{
"link": "downloads.html",
"title": "| Downloads (195)\n"
},
{
"link": "sonstige.html",
"title": "| Sonstige (195)\n"
}
],
"style": "simple"
}
Tableiste Subline @tab-bar--subline
<div class="tab-bar tab-bar--list tab-bar--uninitalized tab-bar--subline">
<div class="tab-bar__select-wrap"><button class="tab-bar__select" aria-haspopup="true" aria-expanded="false"><span class="u-hidden-visually">Inhalt auswählen</span><span class="tab-bar__select-current" aria-hidden="true">Das Programm</span><svg class="icon icon--dropdown tab-bar__select-icon" viewBox="0 0 200 200">
<use xlink:href="#icon-dropdown"></use>
</svg></button></div>
<ul class="tab-bar__items" role="tablist">
<li class="tab-bar__item-wrap" role="presentation"><a class="tab-bar__item tab-bar__item--active" aria-selected="true" id="tab-bar-6312-tab-0" role="tab" href="/programme.html">Das Programm</a></li>
<li class="tab-bar__item-wrap" role="presentation"><a class="tab-bar__item" id="tab-bar-6312-tab-1" role="tab" href="/donau.html"><span class="tab-bar__kicker f-w-normal">Ausschreibung</span> Perspektive Donau</a></li>
<li class="tab-bar__item-wrap" role="presentation"><a class="tab-bar__item" id="tab-bar-6312-tab-2" role="tab" href="/ausschreibung.html"><span class="tab-bar__kicker f-w-normal">Ausschreibung</span> Andere Ausschreibung 1</a></li>
<li class="tab-bar__item-wrap" role="presentation"><a class="tab-bar__item" id="tab-bar-6312-tab-3" role="tab" href="/ausschreibung2.html"><span class="tab-bar__kicker f-w-normal">Ausschreibung</span> Komm mit in das gesunde Boot</a></li>
</ul>
</div>{
"items": [
{
"link": "/programme.html",
"title": "| Das Programm\n",
"active": true
},
{
"link": "/donau.html",
"title": "| #[span.tab-bar__kicker.f-w-normal Ausschreibung] Perspektive Donau\n"
},
{
"link": "/ausschreibung.html",
"title": "| #[span.tab-bar__kicker.f-w-normal Ausschreibung] Andere Ausschreibung 1\n"
},
{
"link": "/ausschreibung2.html",
"title": "| #[span.tab-bar__kicker.f-w-normal Ausschreibung] Komm mit in das gesunde Boot\n"
}
],
"style": "subline"
}