No notes defined.
<div class="doc-notes" style="margin-block: var(--sp-component);">
<h2 class="doc-variant-title">Demos</h2>
<h3 style="margin-top: var(--sp);">Show single demo</h3>
<p>
<select class="doc-select" onchange="javascript: window.location = this.value;">
<option target="_top" selected disabled>Please select</option>
<hr />
<option value="./topicfinder--demo-only" target="_top">Show all</option>
<hr />
<option value="./topicfinder--demo-only--comboboxes" target="_top">Comboboxes</option>
<option value="./topicfinder--demo-only--dropdowns" target="_top">Dropdowns</option>
<option value="./topicfinder--demo-only--content-loader" target="_top">Content Loader</option>
</select>
</p>
</div>
<section class="doc-section">
<h2 class="doc-variant-title">Dropdowns</h2>
<div class="topicFinder" id="filterPanel-default-target">
<div class="filterPanel" data-target="filterPanel-default-target">
<div class="filterPanel-filters" data-theme="dark">
<div class="filterPanel-filter has-dropdown" data-filter-id="fahrzeug">
<div class="dropdownMenu">
<label class="label is-optional">Fahrzeug</label>
<span class="dropdownMenu-select">
<span class="select">
<select>
<option value="">
Alle Fahrzeuge
</option>
<option value="Segways">
Segways
</option>
</select>
</span>
</span>
</div>
</div>
<div class="filterPanel-filter has-dropdown" data-filter-id="farbe">
<div class="dropdownMenu">
<label class="label is-optional">Farbe</label>
<span class="dropdownMenu-select">
<span class="select">
<select>
<option value="">
Alle Farben
</option>
</select>
</span>
</span>
</div>
</div>
</div>
<div class="filterPanel-status">
</div>
<div class="filterPanel-sorting">
<div class="dropdownMenu is-transparent" data-type="sorting">
<label class="label is-optional is-transparent">Sortierung</label>
<span class="dropdownMenu-select">
<span class="select">
<select>
<option value="[data-preferred]" selected="selected">
Bevorzugte zuerst
</option>
<option value="DESC [data-date]">
Neuste zuerst
</option>
<option value="[data-date]">
Älteste zuerst
</option>
<option value=".title--demo-only">
Nach Titel
</option>
<option value="DESC .title--demo-only">
Nach Titel (absteigend)
</option>
</select>
</span>
</span>
</div>
</div>
<template data-filter-messages>
<div data-count="default">Alle Einträge</div>
<div data-count="zero">Nichts gefunden</div>
<div data-count="one"><strong>1</strong> Eintrag gefunden</div>
<div data-count="other"><strong>{{count}}</strong> Einträge gefunden</div>
</template>
</div>
<main class="topicFinder-results" id="filterPanel-default-target">
<ul class="ul" style="margin-top: 0; display: flex; flex-direction: column; gap: var(--sp-small);">
<li data-item data-filter-fahrzeug="Autos" data-filter-farbe="Blau" data-filter-farbigkeit="Einfarbig" data-date="1998" data-keywords="Blau, Auto" data-preferred style="margin-top: 0;">
<strong class="title--demo-only">Blaues Auto</strong> (⭐️ Bevorzugt), Baujahr 1998
</li>
<li data-item data-filter-fahrzeug="Autos" data-filter-farbe="Blau" data-filter-farbigkeit="Einfarbig" data-date="2000" data-keywords="Blau, Auto" style="margin-top: 0;">
<strong class="title--demo-only">Blaues Auto</strong>, Baujahr 2000
</li>
<li data-item data-filter-fahrzeug="Autos" data-filter-farbe="Grün" data-filter-farbigkeit="Einfarbig" data-date="2000" data-keywords="Grün, Auto" style="margin-top: 0;">
<strong class="title--demo-only">Grünes Auto</strong>, Baujahr 2000
</li>
<li data-item data-filter-fahrzeug="Autos" data-filter-farbe="Blau|Grün" data-filter-farbigkeit="Zweifarbig" data-date="2010" data-keywords="Blau-Grün, Auto" style="margin-top: 0;">
<strong class="title--demo-only">Blau-grünes Auto</strong>, Baujahr 2010
</li>
<li data-item data-filter-fahrzeug="LKWs" data-filter-farbe="Grün" data-filter-farbigkeit="Einfarbig" data-date="2022" data-keywords="Grün, LKW" style="margin-top: 0;">
<strong class="title--demo-only">Grüner LKW</strong>, Baujahr 2022
</li>
<li data-item data-filter-fahrzeug="LKWs" data-filter-farbe="Rot" data-filter-farbigkeit="Einfarbig" data-date="1970" data-keywords="Rot, LKW" style="margin-top: 0;">
<strong class="title--demo-only">Roter LKW</strong>, Baujahr 1970
</li>
<li data-item data-filter-fahrzeug="Fahrräder" data-filter-farbe="Rot" data-filter-farbigkeit="Einfarbig" data-date="2017" data-keywords="Rot, Fahrrad" style="margin-top: 0;">
<strong class="title--demo-only">Rotes Fahrrad</strong>, Baujahr 2017
</li>
<li data-item data-filter-fahrzeug="Fahrräder" data-filter-farbe="Grün" data-filter-farbigkeit="Einfarbig" data-date="2017" data-keywords="Grün, Fahrrad" data-preferred style="margin-top: 0;">
<strong class="title--demo-only">Grünes Fahrrad</strong> (⭐️ Bevorzugt), Baujahr 2017
</li>
<li data-item data-filter-fahrzeug="Fahrräder" data-filter-farbe="Rot|Blau" data-filter-farbigkeit="Zweifarbig" data-date="2024" data-keywords="Rot-Blau, Fahrrad" style="margin-top: 0;">
<strong class="title--demo-only">Rot-blaues Fahrrad</strong>, Baujahr 2024
</li>
</ul>
<div class="topicFinder-results-placeholder" data-filter-placeholder>
Leider wurden mit der aktuellen Auswahl keine passenden Einträge gefunden.
</div>
</main>
<div class="filterPanel" data-target="filterPanel-default-target">
<div class="filterPanel-status">
</div>
<div class="filterPanel-sorting">
<div class="dropdownMenu is-transparent" data-type="sorting">
<label class="label is-optional is-transparent">Sortierung</label>
<span class="dropdownMenu-select">
<span class="select">
<select>
<option value="[data-preferred]" selected="selected">
Bevorzugte zuerst
</option>
<option value="DESC [data-date]">
Neuste zuerst
</option>
<option value="[data-date]">
Älteste zuerst
</option>
<option value=".title--demo-only">
Nach Titel
</option>
<option value="DESC .title--demo-only">
Nach Titel (absteigend)
</option>
</select>
</span>
</span>
</div>
</div>
<template data-filter-messages>
<div data-count="default">Alle Einträge</div>
<div data-count="zero">Nichts gefunden</div>
<div data-count="one"><strong>1</strong> Eintrag gefunden</div>
<div data-count="other"><strong>{{count}}</strong> Einträge gefunden</div>
</template>
</div>
</div>
</section>
<section class="doc-section">
<h2 class="doc-variant-title">Comboboxes</h2>
<div class="topicFinder" id="filterPanel-combobox-target">
<div class="filterPanel" data-target="filterPanel-combobox-target">
<div class="filterPanel-filters" data-theme="dark">
<div class="filterPanel-filter" data-filter-id="fahrzeug">
<div class="formCombobox is-required">
<label class="label is-required">Fahrzeug</label>
<span class="formCombobox-field">
<div class="combobox" data-select>
<div class="combobox-field">
<span class="combobox-input-wrapper">
<input class="combobox-input" id="uid" role="combobox" aria-controls="menu-body" aria-autocomplete="list" placeholder="Enter phrase" value="Alle Fahrzeuge" aria-describedby="uid-hint">
</span>
</div>
<div class="combobox-dropdown" aria-hidden="true" tabindex="-1">
<ul class="combobox-list" data-noresults="Keine Treffer">
<li class="combobox-item" data-value="" data-label="Alle Fahrzeuge">
<label>Alle Fahrzeuge</label>
</li>
</ul>
<div class="combobox-group">
<ul class="combobox-list" data-noresults="Keine Treffer">
<li class="combobox-item" data-value="Autos" data-label="Autos">
<label>Autos</label>
</li>
<li class="combobox-item" data-value="Fahrräder" data-label="Fahrräder">
<label>Fahrräder</label>
</li>
<li class="combobox-item" data-value="LKWs" data-label="LKWs">
<label>LKWs</label>
</li>
<li class="combobox-item" data-value="Segways" data-label="Segways">
<label>Segways</label>
</li>
</ul>
</div>
</div>
</div>
</span>
</div>
</div>
<div class="filterPanel-filter" data-filter-id="farbe">
<div class="formCombobox is-required">
<label class="label is-required">Farbe</label>
<span class="formCombobox-field">
<div class="combobox" data-select>
<div class="combobox-field">
<span class="combobox-input-wrapper">
<input class="combobox-input" id="uid" role="combobox" aria-controls="menu-body" aria-autocomplete="list" placeholder="Enter phrase" value="Alle Farben" aria-describedby="uid-hint">
</span>
</div>
<div class="combobox-dropdown" aria-hidden="true" tabindex="-1">
<ul class="combobox-list" data-noresults="Keine Treffer">
<li class="combobox-item" data-value="" data-label="Alle Farben">
<label>Alle Farben</label>
</li>
</ul>
<div class="combobox-group">
<ul class="combobox-list" data-noresults="Keine Treffer">
<li class="combobox-item" data-value="Blau" data-label="Blau">
<label>Blau</label>
</li>
<li class="combobox-item" data-value="Grün" data-label="Grün">
<label>Grün</label>
</li>
<li class="combobox-item" data-value="Rot" data-label="Rot">
<label>Rot</label>
</li>
</ul>
</div>
</div>
</div>
</span>
</div>
</div>
</div>
<div class="filterPanel-status">
</div>
<div class="filterPanel-sorting">
<div class="dropdownMenu is-transparent" data-type="sorting">
<label class="label is-optional is-transparent">Sortierung</label>
<span class="dropdownMenu-select">
<span class="select">
<select>
<option value="[data-preferred]" selected="selected">
Bevorzugte zuerst
</option>
<option value="DESC [data-date]">
Neuste zuerst
</option>
<option value="[data-date]">
Älteste zuerst
</option>
<option value=".title--demo-only">
Nach Titel
</option>
<option value="DESC .title--demo-only">
Nach Titel (absteigend)
</option>
</select>
</span>
</span>
</div>
</div>
<template data-filter-messages>
<div data-count="default">Alle Einträge</div>
<div data-count="zero">Nichts gefunden</div>
<div data-count="one"><strong>1</strong> Eintrag gefunden</div>
<div data-count="other"><strong>{{count}}</strong> Einträge gefunden</div>
</template>
</div>
<main class="topicFinder-results" id="filterPanel-combobox-target">
<ul class="ul" style="margin-top: 0; display: flex; flex-direction: column; gap: var(--sp-small);">
<li data-item data-filter-fahrzeug="Autos" data-filter-farbe="Blau" data-filter-farbigkeit="Einfarbig" data-date="1998" data-keywords="Blau, Auto" data-preferred style="margin-top: 0;">
<strong class="title--demo-only">Blaues Auto</strong> (⭐️ Bevorzugt), Baujahr 1998
</li>
<li data-item data-filter-fahrzeug="Autos" data-filter-farbe="Blau" data-filter-farbigkeit="Einfarbig" data-date="2000" data-keywords="Blau, Auto" style="margin-top: 0;">
<strong class="title--demo-only">Blaues Auto</strong>, Baujahr 2000
</li>
<li data-item data-filter-fahrzeug="Autos" data-filter-farbe="Grün" data-filter-farbigkeit="Einfarbig" data-date="2000" data-keywords="Grün, Auto" style="margin-top: 0;">
<strong class="title--demo-only">Grünes Auto</strong>, Baujahr 2000
</li>
<li data-item data-filter-fahrzeug="Autos" data-filter-farbe="Blau|Grün" data-filter-farbigkeit="Zweifarbig" data-date="2010" data-keywords="Blau-Grün, Auto" style="margin-top: 0;">
<strong class="title--demo-only">Blau-grünes Auto</strong>, Baujahr 2010
</li>
<li data-item data-filter-fahrzeug="LKWs" data-filter-farbe="Grün" data-filter-farbigkeit="Einfarbig" data-date="2022" data-keywords="Grün, LKW" style="margin-top: 0;">
<strong class="title--demo-only">Grüner LKW</strong>, Baujahr 2022
</li>
<li data-item data-filter-fahrzeug="LKWs" data-filter-farbe="Rot" data-filter-farbigkeit="Einfarbig" data-date="1970" data-keywords="Rot, LKW" style="margin-top: 0;">
<strong class="title--demo-only">Roter LKW</strong>, Baujahr 1970
</li>
<li data-item data-filter-fahrzeug="Fahrräder" data-filter-farbe="Rot" data-filter-farbigkeit="Einfarbig" data-date="2017" data-keywords="Rot, Fahrrad" style="margin-top: 0;">
<strong class="title--demo-only">Rotes Fahrrad</strong>, Baujahr 2017
</li>
<li data-item data-filter-fahrzeug="Fahrräder" data-filter-farbe="Grün" data-filter-farbigkeit="Einfarbig" data-date="2017" data-keywords="Grün, Fahrrad" data-preferred style="margin-top: 0;">
<strong class="title--demo-only">Grünes Fahrrad</strong> (⭐️ Bevorzugt), Baujahr 2017
</li>
<li data-item data-filter-fahrzeug="Fahrräder" data-filter-farbe="Rot|Blau" data-filter-farbigkeit="Zweifarbig" data-date="2024" data-keywords="Rot-Blau, Fahrrad" style="margin-top: 0;">
<strong class="title--demo-only">Rot-blaues Fahrrad</strong>, Baujahr 2024
</li>
</ul>
<div class="topicFinder-results-placeholder" data-filter-placeholder>
Leider wurden mit der aktuellen Auswahl keine passenden Einträge gefunden.
</div>
</main>
<div class="filterPanel" data-target="filterPanel-combobox-target">
<div class="filterPanel-status">
</div>
<div class="filterPanel-sorting">
<div class="dropdownMenu is-transparent" data-type="sorting">
<label class="label is-optional is-transparent">Sortierung</label>
<span class="dropdownMenu-select">
<span class="select">
<select>
<option value="[data-preferred]" selected="selected">
Bevorzugte zuerst
</option>
<option value="DESC [data-date]">
Neuste zuerst
</option>
<option value="[data-date]">
Älteste zuerst
</option>
<option value=".title--demo-only">
Nach Titel
</option>
<option value="DESC .title--demo-only">
Nach Titel (absteigend)
</option>
</select>
</span>
</span>
</div>
</div>
<template data-filter-messages>
<div data-count="default">Alle Einträge</div>
<div data-count="zero">Nichts gefunden</div>
<div data-count="one"><strong>1</strong> Eintrag gefunden</div>
<div data-count="other"><strong>{{count}}</strong> Einträge gefunden</div>
</template>
</div>
</div>
</section>
<section class="doc-section">
<h2 class="doc-variant-title">Content Loader</h2>
<div class="topicFinder">
<div class="filterPanel" data-target="filterPanel-tags-filter-target">
<form data-content-loader-trigger data-content-loader-action="replace" data-content-loader-target="#filterPanel-tags-filter-target" data-content-loader-url="/includes/contentLoader/form-respond.html">
<div class="filterPanel-filters" data-theme="dark">
<div class="filterPanel-filter has-taggroup">
<strong class="filterPanel-filter-label"><span class="is-visually-hidden">: </span></strong>
<div class="filterPanel-filter-tags">
<div class="tagGroup">
<div class="tagGroup-item">
<label class="tag-container">
<input type="checkbox" name="filter[]" value="Church-key Viny" onchange="this.form.submit()" />
<span class="tag" data-selectable="true">
Church-key Viny
</span>
</label>
</div>
<div class="tagGroup-item">
<label class="tag-container">
<input type="checkbox" name="filter[]" value="Flexitarian Retro" onchange="this.form.submit()" />
<span class="tag" data-selectable="true">
Flexitarian Retro
</span>
</label>
</div>
<div class="tagGroup-item">
<label class="tag-container">
<input type="checkbox" name="filter[]" value="Hashtag Echo Park" onchange="this.form.submit()" />
<span class="tag" data-selectable="true">
Hashtag Echo Park
</span>
</label>
</div>
</div>
</div>
</div>
<div class="filterPanel-filter">
<div class="formCombobox is-required">
<label class="label is-required" for="field-uid">Auswahl 1</label>
<span class="formCombobox-field">
<div class="combobox" data-autosend data-select>
<div class="combobox-field">
<span class="combobox-input-wrapper">
<input class="combobox-input" id="uid" role="combobox" aria-controls="menu-body" aria-autocomplete="list" placeholder="Enter phrase" aria-describedby="uid-hint">
</span>
</div>
<div class="combobox-dropdown" aria-hidden="true" tabindex="-1">
<ul class="combobox-list" data-noresults="Keine Treffer">
<li class="combobox-item" data-value="" data-label="Alle anzeigen">
<label>Alle anzeigen</label>
</li>
<li class="combobox-item" data-value="Option 1.1" data-label="Option 1.1">
<label>Option 1.1</label>
</li>
<li class="combobox-item" data-value="Option 1.2" data-label="Option 1.2">
<label>Option 1.2</label>
</li>
<li class="combobox-item" data-value="Option 1.3" data-label="Option 1.3">
<label>Option 1.3</label>
</li>
</ul>
</div>
</div>
</span>
</div>
</div>
</div>
<div class="filterPanel-status">
</div>
</form>
</div>
<main class="topicFinder-highlights">
<div class="wrapper">
<div class="glassTeaserSection">
<h2 class="glassTeaserSection-title">Highlights</h2>
<div class="glassTeaserSection-items">
<div class="glassTeaser">
<div class="glassTeaser-image">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Beschreibung des Teaser Images" />
</figure>
</div>
<div class="glassTeaser-content">
<h3 class="glassTeaser-heading">
<strong class="glassTeaser-kicker">Thema</strong><span class="is-visually-hidden">:</span>
<span class="glassTeaser-title">Ich bin der Titel</span>
</h3>
<div class="glassTeaser-description">
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.
</div>
<div class="glassTeaser-cta">
<a href="#" class="button is-icon-only"><svg class="icon is-arrow-right">
<use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Mehr erfahren!</span></a>
</div>
</div>
</div>
<div class="glassTeaser is-small">
<div class="glassTeaser-image">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Beschreibung des Teaser Images" />
</figure>
</div>
<div class="glassTeaser-content">
<h3 class="glassTeaser-heading">
<strong class="glassTeaser-kicker">Thema</strong><span class="is-visually-hidden">:</span>
<span class="glassTeaser-title">Ich bin der Titel</span>
</h3>
<div class="glassTeaser-description">
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.
</div>
<div class="glassTeaser-cta">
<a href="#" class="button is-icon-only"><svg class="icon is-arrow-right">
<use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Mehr erfahren!</span></a>
</div>
</div>
</div>
<div class="glassTeaser is-alternation is-small is-square">
<div class="glassTeaser-image">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Beschreibung des Teaser Images" />
</figure>
</div>
<div class="glassTeaser-content">
<h3 class="glassTeaser-heading">
<strong class="glassTeaser-kicker">Thema</strong><span class="is-visually-hidden">:</span>
<span class="glassTeaser-title">Ich bin der Titel</span>
</h3>
<div class="glassTeaser-description">
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.
</div>
<div class="glassTeaser-cta">
<a href="#" class="button is-icon-only"><svg class="icon is-arrow-right">
<use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Mehr erfahren!</span></a>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
<div id="filterPanel-tags-filter-target" data-content-loader-animated="true" class="doc-box" style="margin-top: var(--sp-component);">
<div class="doc-notes">
[Container for content to be loaded]
</div>
</div>
</section>
<div class="doc-notes" style="margin-block: var(--sp-component);">
<h2 class="doc-variant-title">Demos</h2>
<h3 style="margin-top: var(--sp);">Show single demo</h3>
<p>
<select class="doc-select" onchange="javascript: window.location = this.value;">
<option target="_top" selected disabled>Please select</option>
<hr/>
<option value="./topicfinder--demo-only" target="_top">Show all</option>
<hr/>
<option value="./topicfinder--demo-only--comboboxes" target="_top">Comboboxes</option>
<option value="./topicfinder--demo-only--dropdowns" target="_top">Dropdowns</option>
<option value="./topicfinder--demo-only--content-loader" target="_top">Content Loader</option>
</select>
</p>
</div>
{{#demo}}
{{#unless hidden}}
<section class="doc-section">
{{#_label}}
<h2 class="doc-variant-title">{{{.}}}</h2>
{{/_label}}
{{#notes}}
<div class="doc-variant-notes">{{{.}}}</div>
{{/notes}}
{{#if topicfinder.filterpanel.form}}
{{#topicfinder}}
{{render '@topicfinder' (contextData '@topicfinder' this) merge=false}}
<div id="{{filterpanel.target-id}}" data-content-loader-animated="true" class="doc-box" style="margin-top: var(--sp-component);">
<div class="doc-notes">
[Container for content to be loaded]
</div>
</div>
{{/topicfinder}}
{{else}}
{{render '@topicfinder' (contextData '@topicfinder' this) merge=false}}
{{/if}}
</section>
{{/unless}}
{{/demo}}
{
"id": "topicFinder-UID",
"filterpanel": {
"filter": {
"items": [
{
"formcombobox": {
"is-required": true,
"label": "Auswahl 1",
"combobox": {
"is-select": true,
"label": null,
"options": [
{
"label": "Alle anzeigen",
"value": null
},
{
"label": "Option 1.1",
"value": "Option 1.1"
},
{
"label": "Option 1.2",
"value": "Option 1.2"
},
{
"label": "Option 1.3",
"value": "Option 1.3"
}
]
},
"message": null
}
},
{
"formcombobox": {
"is-required": true,
"label": "Auswahl 2",
"combobox": {
"is-select": true,
"label": null,
"options": [
{
"label": "Alle anzeigen",
"value": null
},
{
"label": "Option 2.1",
"value": "Option 2.1"
},
{
"label": "Option 2.2",
"value": "Option 2.2"
},
{
"label": "Option 2.3",
"value": "Option 2.3"
}
]
},
"message": null
}
}
]
}
},
"results": {
"teasersection": {
"title": null,
"description": null,
"items": [
{
"teasercard": {
"image": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Alternative Bildbeschreibung"
},
"kicker": {
"content": "Thema"
},
"title": "Ich bin der Titel",
"description": "<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",
"cta": {
"modifier": null,
"is-icon-only": true,
"label": "Mehr erfahren!",
"url": "#",
"icon": {
"id": "arrow-right"
}
}
}
},
{
"teasercard": {
"image": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Alternative Bildbeschreibung"
},
"title": "Ich bin der Titel",
"description": "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.",
"cta": {
"modifier": null,
"is-icon-only": true,
"label": "Mehr erfahren!",
"url": "#",
"icon": {
"id": "arrow-right"
}
}
}
},
{
"teasercard": {
"image": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Alternative Bildbeschreibung"
},
"title": "Ich bin ein etwas längerer Titel",
"description": "Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz.",
"cta": {
"modifier": null,
"is-icon-only": true,
"label": "Mehr erfahren!",
"url": "#",
"icon": {
"id": "arrow-right"
}
}
}
}
],
"cta": null
},
"footer": {
"more": {
"button": {
"modifier": "is-secondary",
"label": "Weitere 9 Topics von 35 laden"
}
}
}
},
"demo": [
{
"_name": "dropdowns",
"_label": "Dropdowns",
"id": "filterPanel-default-target",
"filterpanel": {
"target-id": "filterPanel-default-target",
"statuses": {
"default": "Alle Einträge",
"zero": "Nichts gefunden",
"one": "<strong>1</strong> Eintrag gefunden",
"other": "<strong>{{count}}</strong> Einträge gefunden"
},
"sorting": {
"dropdownmenu": {
"label": "Sortierung",
"modifier": "is-transparent",
"type": "sorting",
"select": {
"id": null,
"placeholder": null,
"options": [
{
"label": "Bevorzugte zuerst",
"is-selected": true,
"value": "[data-preferred]"
},
{
"label": "Neuste zuerst",
"value": "DESC [data-date]"
},
{
"label": "Älteste zuerst",
"value": "[data-date]"
},
{
"label": "Nach Titel",
"value": ".title--demo-only"
},
{
"label": "Nach Titel (absteigend)",
"value": "DESC .title--demo-only"
}
]
}
}
},
"placeholder": "Leider wurden mit der aktuellen Auswahl keine passenden Einträge gefunden.",
"filter": {
"items": [
{
"filter-id": "fahrzeug",
"dropdownmenu": {
"id": null,
"label": "Fahrzeug",
"select": {
"id": null,
"placeholder": null,
"options": [
{
"label": "Alle Fahrzeuge",
"value": null
},
{
"label": "Segways",
"value": "Segways"
}
]
}
}
},
{
"filter-id": "farbe",
"dropdownmenu": {
"id": null,
"label": "Farbe",
"select": {
"id": null,
"placeholder": null,
"options": [
{
"label": "Alle Farben",
"value": null
}
]
}
}
}
]
}
},
"filterpanel-statuspanel": {
"target-id": "filterPanel-default-target",
"statuses": {
"default": "Alle Einträge",
"zero": "Nichts gefunden",
"one": "<strong>1</strong> Eintrag gefunden",
"other": "<strong>{{count}}</strong> Einträge gefunden"
},
"sorting": {
"dropdownmenu": {
"label": "Sortierung",
"modifier": "is-transparent",
"type": "sorting",
"select": {
"id": null,
"placeholder": null,
"options": [
{
"label": "Bevorzugte zuerst",
"is-selected": true,
"value": "[data-preferred]"
},
{
"label": "Neuste zuerst",
"value": "DESC [data-date]"
},
{
"label": "Älteste zuerst",
"value": "[data-date]"
},
{
"label": "Nach Titel",
"value": ".title--demo-only"
},
{
"label": "Nach Titel (absteigend)",
"value": "DESC .title--demo-only"
}
]
}
}
},
"filter": null
},
"results": {
"teasersection": null,
"footer": null,
"placeholder": "Leider wurden mit der aktuellen Auswahl keine passenden Einträge gefunden.",
"demo-only": {
"items": [
{
"data": [
{
"name": "fahrzeug",
"value": "Autos"
},
{
"name": "farbe",
"value": "Blau"
},
{
"name": "farbigkeit",
"value": "Einfarbig"
}
],
"content": "Blaues Auto",
"date": 1998,
"keywords": "Blau, Auto",
"is-preferred": true
},
{
"data": [
{
"name": "fahrzeug",
"value": "Autos"
},
{
"name": "farbe",
"value": "Blau"
},
{
"name": "farbigkeit",
"value": "Einfarbig"
}
],
"content": "Blaues Auto",
"date": 2000,
"keywords": "Blau, Auto"
},
{
"data": [
{
"name": "fahrzeug",
"value": "Autos"
},
{
"name": "farbe",
"value": "Grün"
},
{
"name": "farbigkeit",
"value": "Einfarbig"
}
],
"content": "Grünes Auto",
"date": 2000,
"keywords": "Grün, Auto"
},
{
"data": [
{
"name": "fahrzeug",
"value": "Autos"
},
{
"name": "farbe",
"value": "Blau|Grün"
},
{
"name": "farbigkeit",
"value": "Zweifarbig"
}
],
"content": "Blau-grünes Auto",
"date": 2010,
"keywords": "Blau-Grün, Auto"
},
{
"data": [
{
"name": "fahrzeug",
"value": "LKWs"
},
{
"name": "farbe",
"value": "Grün"
},
{
"name": "farbigkeit",
"value": "Einfarbig"
}
],
"content": "Grüner LKW",
"date": 2022,
"keywords": "Grün, LKW"
},
{
"data": [
{
"name": "fahrzeug",
"value": "LKWs"
},
{
"name": "farbe",
"value": "Rot"
},
{
"name": "farbigkeit",
"value": "Einfarbig"
}
],
"content": "Roter LKW",
"date": 1970,
"keywords": "Rot, LKW"
},
{
"data": [
{
"name": "fahrzeug",
"value": "Fahrräder"
},
{
"name": "farbe",
"value": "Rot"
},
{
"name": "farbigkeit",
"value": "Einfarbig"
}
],
"content": "Rotes Fahrrad",
"date": 2017,
"keywords": "Rot, Fahrrad"
},
{
"data": [
{
"name": "fahrzeug",
"value": "Fahrräder"
},
{
"name": "farbe",
"value": "Grün"
},
{
"name": "farbigkeit",
"value": "Einfarbig"
}
],
"content": "Grünes Fahrrad",
"date": 2017,
"keywords": "Grün, Fahrrad",
"is-preferred": true
},
{
"data": [
{
"name": "fahrzeug",
"value": "Fahrräder"
},
{
"name": "farbe",
"value": "Rot|Blau"
},
{
"name": "farbigkeit",
"value": "Zweifarbig"
}
],
"content": "Rot-blaues Fahrrad",
"date": 2024,
"keywords": "Rot-Blau, Fahrrad"
}
]
}
}
},
{
"_name": "comboboxes",
"_label": "Comboboxes",
"id": "filterPanel-combobox-target",
"filterpanel": {
"target-id": "filterPanel-combobox-target",
"statuses": {
"default": "Alle Einträge",
"zero": "Nichts gefunden",
"one": "<strong>1</strong> Eintrag gefunden",
"other": "<strong>{{count}}</strong> Einträge gefunden"
},
"sorting": {
"dropdownmenu": {
"label": "Sortierung",
"modifier": "is-transparent",
"type": "sorting",
"select": {
"id": null,
"placeholder": null,
"options": [
{
"label": "Bevorzugte zuerst",
"is-selected": true,
"value": "[data-preferred]"
},
{
"label": "Neuste zuerst",
"value": "DESC [data-date]"
},
{
"label": "Älteste zuerst",
"value": "[data-date]"
},
{
"label": "Nach Titel",
"value": ".title--demo-only"
},
{
"label": "Nach Titel (absteigend)",
"value": "DESC .title--demo-only"
}
]
}
}
},
"placeholder": "Leider wurden mit der aktuellen Auswahl keine passenden Einträge gefunden.",
"filter": {
"items": [
{
"filter-id": "fahrzeug",
"formcombobox": {
"is-required": true,
"id": null,
"label": "Fahrzeug",
"message": null,
"combobox": {
"is-select": true,
"label": null,
"default-option": 0,
"options": [
{
"label": "Alle Fahrzeuge",
"value": null
}
],
"groups": {
"options": [
{
"label": "Autos",
"value": "Autos"
},
{
"label": "Fahrräder",
"value": "Fahrräder"
},
{
"label": "LKWs",
"value": "LKWs"
},
{
"label": "Segways",
"value": "Segways"
}
]
}
}
}
},
{
"filter-id": "farbe",
"formcombobox": {
"is-required": true,
"id": null,
"label": "Farbe",
"message": null,
"combobox": {
"is-select": true,
"label": null,
"default-option": 0,
"options": [
{
"label": "Alle Farben",
"value": null
}
],
"groups": {
"options": [
{
"label": "Blau",
"value": "Blau"
},
{
"label": "Grün",
"value": "Grün"
},
{
"label": "Rot",
"value": "Rot"
}
]
}
}
}
}
]
}
},
"filterpanel-statuspanel": {
"target-id": "filterPanel-combobox-target",
"statuses": {
"default": "Alle Einträge",
"zero": "Nichts gefunden",
"one": "<strong>1</strong> Eintrag gefunden",
"other": "<strong>{{count}}</strong> Einträge gefunden"
},
"sorting": {
"dropdownmenu": {
"label": "Sortierung",
"modifier": "is-transparent",
"type": "sorting",
"select": {
"id": null,
"placeholder": null,
"options": [
{
"label": "Bevorzugte zuerst",
"is-selected": true,
"value": "[data-preferred]"
},
{
"label": "Neuste zuerst",
"value": "DESC [data-date]"
},
{
"label": "Älteste zuerst",
"value": "[data-date]"
},
{
"label": "Nach Titel",
"value": ".title--demo-only"
},
{
"label": "Nach Titel (absteigend)",
"value": "DESC .title--demo-only"
}
]
}
}
},
"filter": null
},
"results": {
"teasersection": null,
"footer": null,
"placeholder": "Leider wurden mit der aktuellen Auswahl keine passenden Einträge gefunden.",
"demo-only": {
"items": [
{
"data": [
{
"name": "fahrzeug",
"value": "Autos"
},
{
"name": "farbe",
"value": "Blau"
},
{
"name": "farbigkeit",
"value": "Einfarbig"
}
],
"content": "Blaues Auto",
"date": 1998,
"keywords": "Blau, Auto",
"is-preferred": true
},
{
"data": [
{
"name": "fahrzeug",
"value": "Autos"
},
{
"name": "farbe",
"value": "Blau"
},
{
"name": "farbigkeit",
"value": "Einfarbig"
}
],
"content": "Blaues Auto",
"date": 2000,
"keywords": "Blau, Auto"
},
{
"data": [
{
"name": "fahrzeug",
"value": "Autos"
},
{
"name": "farbe",
"value": "Grün"
},
{
"name": "farbigkeit",
"value": "Einfarbig"
}
],
"content": "Grünes Auto",
"date": 2000,
"keywords": "Grün, Auto"
},
{
"data": [
{
"name": "fahrzeug",
"value": "Autos"
},
{
"name": "farbe",
"value": "Blau|Grün"
},
{
"name": "farbigkeit",
"value": "Zweifarbig"
}
],
"content": "Blau-grünes Auto",
"date": 2010,
"keywords": "Blau-Grün, Auto"
},
{
"data": [
{
"name": "fahrzeug",
"value": "LKWs"
},
{
"name": "farbe",
"value": "Grün"
},
{
"name": "farbigkeit",
"value": "Einfarbig"
}
],
"content": "Grüner LKW",
"date": 2022,
"keywords": "Grün, LKW"
},
{
"data": [
{
"name": "fahrzeug",
"value": "LKWs"
},
{
"name": "farbe",
"value": "Rot"
},
{
"name": "farbigkeit",
"value": "Einfarbig"
}
],
"content": "Roter LKW",
"date": 1970,
"keywords": "Rot, LKW"
},
{
"data": [
{
"name": "fahrzeug",
"value": "Fahrräder"
},
{
"name": "farbe",
"value": "Rot"
},
{
"name": "farbigkeit",
"value": "Einfarbig"
}
],
"content": "Rotes Fahrrad",
"date": 2017,
"keywords": "Rot, Fahrrad"
},
{
"data": [
{
"name": "fahrzeug",
"value": "Fahrräder"
},
{
"name": "farbe",
"value": "Grün"
},
{
"name": "farbigkeit",
"value": "Einfarbig"
}
],
"content": "Grünes Fahrrad",
"date": 2017,
"keywords": "Grün, Fahrrad",
"is-preferred": true
},
{
"data": [
{
"name": "fahrzeug",
"value": "Fahrräder"
},
{
"name": "farbe",
"value": "Rot|Blau"
},
{
"name": "farbigkeit",
"value": "Zweifarbig"
}
],
"content": "Rot-blaues Fahrrad",
"date": 2024,
"keywords": "Rot-Blau, Fahrrad"
}
]
}
}
},
{
"_name": "content-loader",
"_label": "Content Loader",
"topicfinder": {
"id": null,
"results": null,
"highlights": [
{
"glassteasersection": {
"title": "Highlights",
"glassteasers": [
{
"image": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Beschreibung des Teaser Images"
},
"kicker": "Thema",
"title": "Ich bin der Titel",
"description": "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.",
"cta": {
"is-icon-only": true,
"label": "Mehr erfahren!",
"url": "#",
"icon": {
"id": "arrow-right"
}
}
},
{
"image": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Beschreibung des Teaser Images"
},
"kicker": "Thema",
"title": "Ich bin der Titel",
"description": "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.",
"cta": {
"is-icon-only": true,
"label": "Mehr erfahren!",
"url": "#",
"icon": {
"id": "arrow-right"
}
},
"modifier": "is-small"
},
{
"image": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Beschreibung des Teaser Images"
},
"kicker": "Thema",
"title": "Ich bin der Titel",
"description": "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.",
"cta": {
"is-icon-only": true,
"label": "Mehr erfahren!",
"url": "#",
"icon": {
"id": "arrow-right"
}
},
"modifier": "is-small is-square",
"is-alternation": true
}
],
"cta": null
}
}
],
"filterpanel": {
"form": {
"action": "/includes/contentLoader/form-respond.html"
},
"target-id": "filterPanel-tags-filter-target",
"filter": {
"items": [
{
"taggroup": {
"tags": [
{
"is-selectable": true,
"name": "filter[]",
"value": "Church-key Viny",
"label": "Church-key Viny",
"onchange": "this.form.submit()"
},
{
"is-selectable": true,
"name": "filter[]",
"value": "Flexitarian Retro",
"label": "Flexitarian Retro",
"onchange": "this.form.submit()"
},
{
"is-selectable": true,
"name": "filter[]",
"value": "Hashtag Echo Park",
"label": "Hashtag Echo Park",
"onchange": "this.form.submit()"
}
]
}
},
{
"formcombobox": {
"is-required": true,
"label": "Auswahl 1",
"combobox": {
"is-select": true,
"is-autosend": true,
"label": null,
"options": [
{
"label": "Alle anzeigen",
"value": null
},
{
"label": "Option 1.1",
"value": "Option 1.1"
},
{
"label": "Option 1.2",
"value": "Option 1.2"
},
{
"label": "Option 1.3",
"value": "Option 1.3"
}
]
},
"message": null
}
}
]
}
}
}
}
]
}
import topicFinder from "./_topicFinder.script.js";
topicFinder.init();
export default (function (){
const defaults = {
selectors: {
elements: '.topicFinder',
form: 'form[data-content-loader-trigger]',
highlights: '.topicFinder-highlights',
}
};
function init(options) {
options = options || {};
const elements = document.querySelectorAll(defaults.selectors.elements);
elements.forEach((element) => {
const settings = Object.assign({}, defaults, options);
new TopicFinder(element, settings);
});
}
/************************/
/***** Filter Panel *****/
/************************/
const TopicFinder = function(container, options) {
this.settings = Object.assign({}, options);
this.container = container;
this.highlights = this.container.querySelectorAll(defaults.selectors.highlights);
const form = this.container.querySelector(defaults.selectors.form);
if (! this.highlights || ! form) {
return;
}
const targetSelector = form.dataset.contentLoaderTarget;
if (typeof targetSelector !== "string" || targetSelector === "") {
return;
}
const target = document.querySelector(targetSelector);
if (! target) {
return;
}
const observer = new MutationObserver((mutationsList) => {
for (const mutation of mutationsList) {
if (mutation.type === 'childList') {
this.hideHighlights();
observer.disconnect();
}
}
});
observer.observe(target, { childList: true, subtree: true });
}
TopicFinder.prototype.hideHighlights = function() {
this.highlights.forEach((highlight) => {
highlight.dataset.hidden = true;
});
}
return {
init: init
}
})();
@import "_topicFinder.styles";
.topicFinder {
.pageHeader + & {
@include stack-spacing(0);
}
.pageHeader[data-theme="dark"] + & {
margin-top: calc(-1 * var(--bw-large));
.filterPanel-filters::before {
border-bottom: var(--bw-large) solid $_accent-color;
height: calc(100% + var(--bw-large));
}
}
}
.topicFinder {
@extend %section;
&:first-child {
@include stack-spacing(0);
}
&:last-child {
margin-bottom: 0;
}
.tagGroup,
.teaserSection,
.teaserList,
.dropdownMenu {
@include stack-spacing(0);
}
.glassTeaserSection {
@include stack-spacing(0);
@include stack-spacing(component, padding-top);
&:not(:has(> .glassTeaserSection-title)) {
@include stack-spacing(section, padding-top);
}
}
.filterPanel {
@include stack-spacing(0);
}
&-title {
@extend %pageSection-title;
}
&-filterpanel {
@include apply-theme(dark);
@include stack-spacing(large, (padding-top, padding-bottom));
@include full-width-backdrop();
&-title {
@include stack-spacing(0);
@include text-size();
font-weight: $_font-weight;
text-align: center;
.icon {
margin-right: .5ch;
}
}
}
&-filterpanel-title + &-filters {
@include stack-spacing();
}
&-filter {
&-label {
@extend %label;
@include stack-spacing(0);
}
&-tags {
@include stack-spacing(small);
}
}
&-filterpanel + &-teasers {
@include stack-spacing(component);
}
&-results {
@include stack-spacing(component, padding-top);
&-title {
@extend %sectionTitle;
@include stack-spacing(0);
}
&-panel {
margin-top: (-1 * nth($field_padding, 1));
margin-bottom: calc(var(--sp-large) - #{nth($field_padding, 1)});
display: flex;
align-items: center;
column-gap: var(--gg);
justify-content: space-between;
align-items: baseline;
}
&-title + &-panel {
@include stack-spacing(large);
}
&-description {
}
&-sorting {
.label {
@extend %visually-hidden;
}
select {
text-align: right;
}
}
&-placeholder {
@extend .filterPanel-placeholder;
}
> *:first-child {
@include stack-spacing(0);
}
}
.filterPanel + &-results {
padding-top: var(--sp-component);
}
&-highlights + &-results {
@include stack-spacing(component, padding-bottom);
@include full-width-backdrop();
.teaserCard {
background-color: $_page-color;
}
}
&-highlights {
display: grid;
grid-template-rows: 1fr;
opacity: 1;
transition-duration: 500ms;
transition-properties: grid-template-rows, opacity;
transition-timing-function: easing(cubic);
> .wrapper {
overflow: hidden;
}
&[data-hidden="true"] {
grid-template-rows: 0fr;
opacity: 0;
}
.glassTeaserSection {
@include stack-spacing(component, padding-bottom);
}
}
&-footer {
@include stack-spacing(component);
display: grid;
grid-template-columns: 1fr auto 1fr;
grid-template-areas: "spacer more toplink";
column-gap: var(--gg);
align-items: center;
.paginationBar {
@include stack-spacing(0);
}
}
&-more {
grid-area: more;
text-align: center;
.button {
@include stack-spacing(0);
}
}
&-toplink {
grid-area: toplink;
justify-self: end;
width: 100%;
.navigationLink {
@include stack-spacing(0);
text-align: right;
.link {
margin-inline: auto 0;
}
}
}
@include only-on-desktop(){
&-filters {
display: flex;
column-gap: calc(2 * var(--gg));
align-items: stretch;
position: relative;
}
&-filter {
flex: 0 1 auto;
max-width: calc(50% - var(--gg));
margin-left: auto;
margin-right: auto;
& + & {
&::before {
content: "";
display: block;
height: 100%;
position: absolute;
left: 50%;
border-left: $_border;
}
}
}
&.has-download-items {
.filterPanel {
width: get-columns-width(8);
margin-left: auto;
margin-right: auto;
&-filters {
width: get-columns-width(12, 8);
margin-left: calc(-1 * #{get-columns-indent(2, 8)});
}
}
.topicFinder-footer {
width: get-columns-width(8);
margin-left: auto;
margin-right: auto;
}
}
}
}