No notes defined.
<!-- Default -->
<div class="contentSwitcherSection has-backdrop">
<h2 class="contentSwitcherSection-title">Ich bin der Titel</h2>
<div class="contentSwitcherSection-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
<nav class="contentSwitcher" data-content-switcher-target="contentSwitcher-UID">
<ul class="contentSwitcher-list">
<li class="contentSwitcher-item" aria-selected="true">
<button data-action="switch" data-index="0"><span class="contentSwitcher-label">Option 1</span></button>
</li>
<li class="contentSwitcher-item">
<button data-action="switch" data-index="1"><span class="contentSwitcher-label">Option Zwei</span></button>
</li>
<li class="contentSwitcher-item">
<button data-action="switch" data-index="2"><span class="contentSwitcher-label">Eine dritte Option</span></button>
</li>
</ul>
</nav>
<div id="contentSwitcher-UID" data-content-switcher-animated="true" style="margin-top: var(--sp-component);">
<div data-content-switcher-item="0">
<div class="contentSwitcher-wrapper">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
</div>
<div data-content-switcher-item="1" aria-hidden="true">
<div class="contentSwitcher-wrapper">
<h3>Ich bin eine Headline</h3>
<p><strong>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</strong></p>
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
</div>
<div data-content-switcher-item="2" aria-hidden="true">
<div class="contentSwitcher-wrapper">
<p>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</p>
</div>
</div>
</div>
</div>
<!-- Transparent -->
<div class="contentSwitcherSection has-backdrop" data-theme="transparent">
<h2 class="contentSwitcherSection-title">Ich bin der Titel</h2>
<div class="contentSwitcherSection-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
<nav class="contentSwitcher" data-content-switcher-target="contentSwitcher-transparent-UID" data-theme="transparent">
<ul class="contentSwitcher-list">
<li class="contentSwitcher-item" aria-selected="true">
<button data-action="switch" data-index="0"><span class="contentSwitcher-label">Option 1</span></button>
</li>
<li class="contentSwitcher-item">
<button data-action="switch" data-index="1"><span class="contentSwitcher-label">Option Zwei</span></button>
</li>
<li class="contentSwitcher-item">
<button data-action="switch" data-index="2"><span class="contentSwitcher-label">Eine dritte Option</span></button>
</li>
</ul>
</nav>
<div id="contentSwitcher-transparent-UID" data-content-switcher-animated="true" style="margin-top: var(--sp-component);">
<div data-content-switcher-item="0">
<div class="contentSwitcher-wrapper">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
</div>
<div data-content-switcher-item="1" aria-hidden="true">
<div class="contentSwitcher-wrapper">
<h3>Ich bin eine Headline</h3>
<p><strong>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</strong></p>
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
</div>
<div data-content-switcher-item="2" aria-hidden="true">
<div class="contentSwitcher-wrapper">
<p>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</p>
</div>
</div>
</div>
</div>
<div class="contentSwitcherSection has-backdrop{{#modifier}} {{.}}{{/modifier}}"{{#theme}} data-theme="{{.}}"{{/theme}}>
{{#title}}<h2 class="contentSwitcherSection-title">{{{.}}}</h2>{{/title}}
{{#description}}
<div class="contentSwitcherSection-description">{{{.}}}</div>
{{/description}}
{{#contentswitcher}}
{{render '@contentswitcher' (contextData '@contentswitchersection' this) merge=false}}
{{/contentswitcher}}
<div id="{{id}}" data-content-switcher-animated="true" style="margin-top: var(--sp-component);">
{{#items}}
<div data-content-switcher-item="{{@index}}" {{#unless is-current}} aria-hidden="true"{{/unless}}>
<div class="contentSwitcher-wrapper">
{{#content}}{{{.}}}{{/content}}
{{#featuresection}}
{{render '@featuresection' (contextData '@contentswitchersection' this) merge=false}}
{{/featuresection}}
{{#teasersection}}
{{render '@teasersection' (contextData '@contentswitchersection' this) merge=false}}
{{/teasersection}}
</div>
</div>
{{/items}}
</div>
</div>
/* Default */
{
"title": "Ich bin der Titel",
"description": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n",
"id": "contentSwitcher-UID",
"contentswitcher": {
"target": "contentSwitcher-UID",
"items": [
{
"is-current": true,
"label": "Option 1",
"onclick": null,
"action": "switch",
"content": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n"
},
{
"label": "Option Zwei",
"onclick": null,
"action": "switch",
"content": "<h3>Ich bin eine Headline</h3>\n<p><strong>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</strong></p>\n<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n"
},
{
"label": "Eine dritte Option",
"onclick": null,
"action": "switch",
"content": [
"<p>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</p>\n"
]
}
]
},
"items": [
{
"is-current": true,
"label": "Option 1",
"onclick": null,
"action": "switch",
"content": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n"
},
{
"label": "Option Zwei",
"onclick": null,
"action": "switch",
"content": "<h3>Ich bin eine Headline</h3>\n<p><strong>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</strong></p>\n<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n"
},
{
"label": "Eine dritte Option",
"onclick": null,
"action": "switch",
"content": [
"<p>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</p>\n"
]
}
]
}
/* Transparent */
{
"title": "Ich bin der Titel",
"description": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n",
"id": "contentSwitcher-transparent-UID",
"contentswitcher": {
"target": "contentSwitcher-transparent-UID",
"items": [
{
"is-current": true,
"label": "Option 1",
"onclick": null,
"action": "switch",
"content": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n"
},
{
"label": "Option Zwei",
"onclick": null,
"action": "switch",
"content": "<h3>Ich bin eine Headline</h3>\n<p><strong>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</strong></p>\n<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n"
},
{
"label": "Eine dritte Option",
"onclick": null,
"action": "switch",
"content": [
"<p>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</p>\n"
]
}
],
"theme": "transparent"
},
"items": [
{
"is-current": true,
"label": "Option 1",
"onclick": null,
"action": "switch",
"content": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n"
},
{
"label": "Option Zwei",
"onclick": null,
"action": "switch",
"content": "<h3>Ich bin eine Headline</h3>\n<p><strong>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</strong></p>\n<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n"
},
{
"label": "Eine dritte Option",
"onclick": null,
"action": "switch",
"content": [
"<p>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</p>\n"
]
}
],
"theme": "transparent"
}
@import "_contentSwitcherSection.styles";
$contentSwitcherSection_styles: (
font-family: monospace,
background-color: lightgray,
) !default;
.contentSwitcherSection {
@include stack-spacing(section);
.contentSwitcher {
padding: 0;
}
&:not([data-theme="transparent"]) {
@include full-width-backdrop($set-padding: true);
.teaserCard {
--backdrop-color: #{$_page-color};
}
}
&[data-theme="transparent"],
&[data-theme="transparent"] + &:not([data-theme="transparent"]) {
// Override .has-backdrop + .has-backdrop
margin-top: var(--sp-section) !important;
}
&-title {
@extend %sectionTitle;
}
&-description {
@include stack-spacing(component);
}
@include only-on-desktop(){
&-description {
width: get-columns-width(8);
margin-left: auto;
margin-right: auto;
text-align: center;
}
}
}