Default @detail-tabs
<div class="detail-tabs">
<div class="detail-tabs__tab-bar">
<div class="detail-tabs__nav">
<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-ee86-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-ee86-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-ee86-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-ee86-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>
</div>
<div class="detail-tabs__logo">
<div class="logo"><img class="logo__image" src="https://bildermangel.de/160x80/F5F5F5/28281a.png?text=Logo" width="160" height="80" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." /></div>
</div>
</div>
</div>
{
"logo": {
"path": "https://bildermangel.de/160x80/F5F5F5/28281a.png?text=Logo",
"pathLight": null,
"alt": "Das ist ein Alt-Text. Das ist ein Pflichtfeld.",
"width": 160,
"height": 80,
"link": null
},
"tabs": {
"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"
}
}
SVG High @detail-tabs--svg-high
<div class="detail-tabs">
<div class="detail-tabs__tab-bar">
<div class="detail-tabs__nav">
<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-ebf3-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-ebf3-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-ebf3-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-ebf3-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>
</div>
<div class="detail-tabs__logo">
<div class="logo"><img class="logo__image" src="/images/Logo_laeuft-bei-dir.svg" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." /></div>
</div>
</div>
</div>
{
"logo": {
"path": "/images/Logo_laeuft-bei-dir.svg",
"pathLight": null,
"alt": "Das ist ein Alt-Text. Das ist ein Pflichtfeld.",
"width": null,
"height": null,
"link": null
},
"tabs": {
"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"
}
}
SVG Wide @detail-tabs--svg-wide
<div class="detail-tabs">
<div class="detail-tabs__tab-bar">
<div class="detail-tabs__nav">
<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-1492-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-1492-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-1492-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-1492-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>
</div>
<div class="detail-tabs__logo">
<div class="logo"><img class="logo__image" src="/images/Logo_coaching4future.svg" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." /></div>
</div>
</div>
</div>
{
"logo": {
"path": "/images/Logo_coaching4future.svg",
"pathLight": null,
"alt": "Das ist ein Alt-Text. Das ist ein Pflichtfeld.",
"width": null,
"height": null,
"link": null
},
"tabs": {
"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"
}
}
Simple @detail-tabs--simple
<div class="detail-tabs">
<div class="detail-tabs__tab-bar">
<div class="detail-tabs__nav">
<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-0a8a-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-0a8a-tab-1" role="tab" href="/donau.html"><span class="tab-bar__kicker f-w-normal">Ausschreibung</span> Perspektive Donau</a></li>
</ul>
</div>
</div>
</div>
</div>
{
"logo": null,
"tabs": {
"style": "subline",
"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"
}
]
}
}