No notes defined.
<section class="doc-section">
<header class="doc-variant-header">
<h2 class="doc-title"><a href="../preview/topicfinder--default" target="_top">With Comboboxes (Default)</a></h2>
<div class="doc-variant-configuration">
</div>
</header>
<div class="topicFinder" id="topicFinder-UID">
<div class="filterPanel">
<div class="filterPanel-filters" data-theme="dark">
<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-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 class="filterPanel-filter">
<div class="formCombobox is-required">
<label class="label is-required" for="field-uid">Auswahl 2</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" 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 2.1" data-label="Option 2.1">
<label>Option 2.1</label>
</li>
<li class="combobox-item" data-value="Option 2.2" data-label="Option 2.2">
<label>Option 2.2</label>
</li>
<li class="combobox-item" data-value="Option 2.3" data-label="Option 2.3">
<label>Option 2.3</label>
</li>
</ul>
</div>
</div>
</span>
</div>
</div>
</div>
<div class="filterPanel-status">
</div>
</div>
<main class="topicFinder-results">
<div class="teaserSection">
<div class="teaserSection-items">
<div class="teaserSection-item">
<div class="teaserCard is-clickable">
<div class="teaserCard-image">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Alternative Bildbeschreibung" />
</figure>
</div>
<div class="teaserCard-content">
<h3 class="teaserCard-heading">
<span class="kicker">
Thema
</span>
<span class="teaserCard-title">Ich bin der Titel</span>
</h3>
<div class="teaserCard-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>
</div>
<div class="teaserCard-cta">
<a href="#" class="button is-icon-only" data-icon-position="right"><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 class="teaserSection-item">
<div class="teaserCard is-clickable">
<div class="teaserCard-image">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Alternative Bildbeschreibung" />
</figure>
</div>
<div class="teaserCard-content">
<h3 class="teaserCard-heading">
<span class="kicker">
Thema
</span>
<span class="teaserCard-title">Ich bin der Titel</span>
</h3>
<div class="teaserCard-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.
</div>
<div class="teaserCard-cta">
<a href="#" class="button is-icon-only" data-icon-position="right"><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 class="teaserSection-item">
<div class="teaserCard is-clickable">
<div class="teaserCard-image">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Alternative Bildbeschreibung" />
</figure>
</div>
<div class="teaserCard-content">
<h3 class="teaserCard-heading">
<span class="kicker">
Thema
</span>
<span class="teaserCard-title">Ich bin ein etwas längerer Titel</span>
</h3>
<div class="teaserCard-description">
Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz.
</div>
<div class="teaserCard-cta">
<a href="#" class="button is-icon-only" data-icon-position="right"><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>
<footer class="topicFinder-footer">
<div class="topicFinder-more">
<button class="button is-secondary"><span class="button-label">Weitere 9 Topics von 35 laden</span></button>
</div>
</footer>
</div>
</section>
<section class="doc-section">
<header class="doc-variant-header">
<h2 class="doc-title"><a href="../preview/topicfinder--with-highlights" target="_top">With Highlights</a></h2>
<div class="doc-variant-configuration">
</div>
</header>
<div class="topicFinder" id="topicFinder-UID">
<div class="filterPanel">
<div class="filterPanel-filters" data-theme="dark">
<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-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 class="filterPanel-filter">
<div class="formCombobox is-required">
<label class="label is-required" for="field-uid">Auswahl 2</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" 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 2.1" data-label="Option 2.1">
<label>Option 2.1</label>
</li>
<li class="combobox-item" data-value="Option 2.2" data-label="Option 2.2">
<label>Option 2.2</label>
</li>
<li class="combobox-item" data-value="Option 2.3" data-label="Option 2.3">
<label>Option 2.3</label>
</li>
</ul>
</div>
</div>
</span>
</div>
</div>
</div>
<div class="filterPanel-status">
</div>
</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>
<main class="topicFinder-results">
<h2 class="topicFinder-results-title">Alle Artikel</h2>
<header class="topicFinder-results-panel">
<div class="topicFinder-results-description">
<strong>35</strong> Topics gefunden
</div>
<div class="topicFinder-results-sorting">
<div class="dropdownMenu is-transparent" data-type="sorting">
<label class="label is-optional is-transparent" for="field-topicFinder-UID">Sortierung</label>
<span class="dropdownMenu-select">
<span class="select">
<select id="field-select">
<option value="" selected="selected">
Neuste zuerst
</option>
<option value="">
Am häufigsten gelesen
</option>
<option value="">
Am besten bewertet (Beta)
</option>
</select>
</span>
</span>
</div>
</div>
</header>
<div class="teaserSection">
<div class="teaserSection-items">
<div class="teaserSection-item">
<div class="teaserCard is-clickable">
<div class="teaserCard-image">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Alternative Bildbeschreibung" />
</figure>
</div>
<div class="teaserCard-content">
<h3 class="teaserCard-heading">
<span class="kicker">
Thema
</span>
<span class="teaserCard-title">Ich bin der Titel</span>
</h3>
<div class="teaserCard-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>
</div>
<div class="teaserCard-cta">
<a href="#" class="button is-icon-only" data-icon-position="right"><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 class="teaserSection-item">
<div class="teaserCard is-clickable">
<div class="teaserCard-image">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Alternative Bildbeschreibung" />
</figure>
</div>
<div class="teaserCard-content">
<h3 class="teaserCard-heading">
<span class="kicker">
Thema
</span>
<span class="teaserCard-title">Ich bin der Titel</span>
</h3>
<div class="teaserCard-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.
</div>
<div class="teaserCard-cta">
<a href="#" class="button is-icon-only" data-icon-position="right"><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 class="teaserSection-item">
<div class="teaserCard is-clickable">
<div class="teaserCard-image">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Alternative Bildbeschreibung" />
</figure>
</div>
<div class="teaserCard-content">
<h3 class="teaserCard-heading">
<span class="kicker">
Thema
</span>
<span class="teaserCard-title">Ich bin ein etwas längerer Titel</span>
</h3>
<div class="teaserCard-description">
Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz.
</div>
<div class="teaserCard-cta">
<a href="#" class="button is-icon-only" data-icon-position="right"><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>
<footer class="topicFinder-footer">
<div class="topicFinder-more">
<button class="button is-secondary"><span class="button-label">Weitere 9 Topics von 35 laden</span></button>
</div>
</footer>
</div>
</section>
<section class="doc-section">
<header class="doc-variant-header">
<h2 class="doc-title"><a href="../preview/topicfinder--with-tags" target="_top">With Tags</a></h2>
<div class="doc-variant-configuration">
</div>
</header>
<div class="topicFinder" id="topicFinder-UID">
<div class="filterPanel">
<div class="filterPanel-filters" data-theme="dark">
<div class="filterPanel-filter has-taggroup">
<strong class="filterPanel-filter-label">Auswahl 1<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" />
<span class="tag" data-selectable="true">
Church-key Viny
</span>
</label>
</div>
<div class="tagGroup-item">
<label class="tag-container">
<input type="checkbox" />
<span class="tag" data-selectable="true">
Flexitarian Retro
</span>
</label>
</div>
<div class="tagGroup-item">
<label class="tag-container">
<input type="checkbox" />
<span class="tag" data-selectable="true">
Hashtag Echo Park
</span>
</label>
</div>
<div class="tagGroup-item">
<label class="tag-container">
<input type="checkbox" />
<span class="tag" data-selectable="true">
Polaroid Vice
</span>
</label>
</div>
<div class="tagGroup-item">
<label class="tag-container">
<input type="checkbox" />
<span class="tag" data-selectable="true">
Bitters Sartorial
</span>
</label>
</div>
</div>
</div>
</div>
<div class="filterPanel-filter has-taggroup">
<strong class="filterPanel-filter-label">Auswahl 2<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" />
<span class="tag" data-selectable="true">
Church-key Viny
</span>
</label>
</div>
<div class="tagGroup-item">
<label class="tag-container">
<input type="checkbox" />
<span class="tag" data-selectable="true">
Flexitarian Retro
</span>
</label>
</div>
<div class="tagGroup-item">
<label class="tag-container">
<input type="checkbox" />
<span class="tag" data-selectable="true">
Hashtag Echo Park
</span>
</label>
</div>
<div class="tagGroup-item">
<label class="tag-container">
<input type="checkbox" />
<span class="tag" data-selectable="true">
Polaroid Vice
</span>
</label>
</div>
<div class="tagGroup-item">
<label class="tag-container">
<input type="checkbox" />
<span class="tag" data-selectable="true">
Bitters Sartorial
</span>
</label>
</div>
</div>
</div>
</div>
</div>
<div class="filterPanel-status">
</div>
</div>
<main class="topicFinder-results">
<div class="teaserSection">
<div class="teaserSection-items">
<div class="teaserSection-item">
<div class="teaserCard is-clickable">
<div class="teaserCard-image">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Alternative Bildbeschreibung" />
</figure>
</div>
<div class="teaserCard-content">
<h3 class="teaserCard-heading">
<span class="kicker">
Thema
</span>
<span class="teaserCard-title">Ich bin der Titel</span>
</h3>
<div class="teaserCard-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>
</div>
<div class="teaserCard-cta">
<a href="#" class="button is-icon-only" data-icon-position="right"><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 class="teaserSection-item">
<div class="teaserCard is-clickable">
<div class="teaserCard-image">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Alternative Bildbeschreibung" />
</figure>
</div>
<div class="teaserCard-content">
<h3 class="teaserCard-heading">
<span class="kicker">
Thema
</span>
<span class="teaserCard-title">Ich bin der Titel</span>
</h3>
<div class="teaserCard-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.
</div>
<div class="teaserCard-cta">
<a href="#" class="button is-icon-only" data-icon-position="right"><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 class="teaserSection-item">
<div class="teaserCard is-clickable">
<div class="teaserCard-image">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Alternative Bildbeschreibung" />
</figure>
</div>
<div class="teaserCard-content">
<h3 class="teaserCard-heading">
<span class="kicker">
Thema
</span>
<span class="teaserCard-title">Ich bin ein etwas längerer Titel</span>
</h3>
<div class="teaserCard-description">
Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz.
</div>
<div class="teaserCard-cta">
<a href="#" class="button is-icon-only" data-icon-position="right"><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>
<footer class="topicFinder-footer">
<div class="topicFinder-more">
<button class="button is-secondary"><span class="button-label">Weitere 9 Topics von 35 laden</span></button>
</div>
</footer>
</div>
</section>
<section class="doc-section">
<header class="doc-variant-header">
<h2 class="doc-title"><a href="../preview/topicfinder--with-tags" target="_top">With Pagination</a></h2>
<div class="doc-variant-configuration">
</div>
</header>
<div class="topicFinder" id="topicFinder-UID">
<div class="filterPanel">
<div class="filterPanel-filters" data-theme="dark">
<div class="filterPanel-filter has-taggroup">
<strong class="filterPanel-filter-label">Auswahl 1<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" />
<span class="tag" data-selectable="true">
Church-key Viny
</span>
</label>
</div>
<div class="tagGroup-item">
<label class="tag-container">
<input type="checkbox" />
<span class="tag" data-selectable="true">
Flexitarian Retro
</span>
</label>
</div>
<div class="tagGroup-item">
<label class="tag-container">
<input type="checkbox" />
<span class="tag" data-selectable="true">
Hashtag Echo Park
</span>
</label>
</div>
<div class="tagGroup-item">
<label class="tag-container">
<input type="checkbox" />
<span class="tag" data-selectable="true">
Polaroid Vice
</span>
</label>
</div>
<div class="tagGroup-item">
<label class="tag-container">
<input type="checkbox" />
<span class="tag" data-selectable="true">
Bitters Sartorial
</span>
</label>
</div>
</div>
</div>
</div>
<div class="filterPanel-filter has-taggroup">
<strong class="filterPanel-filter-label">Auswahl 2<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" />
<span class="tag" data-selectable="true">
Church-key Viny
</span>
</label>
</div>
<div class="tagGroup-item">
<label class="tag-container">
<input type="checkbox" />
<span class="tag" data-selectable="true">
Flexitarian Retro
</span>
</label>
</div>
<div class="tagGroup-item">
<label class="tag-container">
<input type="checkbox" />
<span class="tag" data-selectable="true">
Hashtag Echo Park
</span>
</label>
</div>
<div class="tagGroup-item">
<label class="tag-container">
<input type="checkbox" />
<span class="tag" data-selectable="true">
Polaroid Vice
</span>
</label>
</div>
<div class="tagGroup-item">
<label class="tag-container">
<input type="checkbox" />
<span class="tag" data-selectable="true">
Bitters Sartorial
</span>
</label>
</div>
</div>
</div>
</div>
</div>
<div class="filterPanel-status">
</div>
</div>
<main class="topicFinder-results">
<div class="teaserSection">
<div class="teaserSection-items">
<div class="teaserSection-item">
<div class="teaserCard is-clickable">
<div class="teaserCard-image">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Alternative Bildbeschreibung" />
</figure>
</div>
<div class="teaserCard-content">
<h3 class="teaserCard-heading">
<span class="kicker">
Thema
</span>
<span class="teaserCard-title">Ich bin der Titel</span>
</h3>
<div class="teaserCard-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>
</div>
<div class="teaserCard-cta">
<a href="#" class="button is-icon-only" data-icon-position="right"><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 class="teaserSection-item">
<div class="teaserCard is-clickable">
<div class="teaserCard-image">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Alternative Bildbeschreibung" />
</figure>
</div>
<div class="teaserCard-content">
<h3 class="teaserCard-heading">
<span class="kicker">
Thema
</span>
<span class="teaserCard-title">Ich bin der Titel</span>
</h3>
<div class="teaserCard-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.
</div>
<div class="teaserCard-cta">
<a href="#" class="button is-icon-only" data-icon-position="right"><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 class="teaserSection-item">
<div class="teaserCard is-clickable">
<div class="teaserCard-image">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Alternative Bildbeschreibung" />
</figure>
</div>
<div class="teaserCard-content">
<h3 class="teaserCard-heading">
<span class="kicker">
Thema
</span>
<span class="teaserCard-title">Ich bin ein etwas längerer Titel</span>
</h3>
<div class="teaserCard-description">
Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz.
</div>
<div class="teaserCard-cta">
<a href="#" class="button is-icon-only" data-icon-position="right"><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>
<footer class="topicFinder-footer">
<div class="topicFinder-more">
<button class="button is-secondary"><span class="button-label">Weitere 9 Topics von 35 laden</span></button>
</div>
</footer>
</div>
</section>
<section class="doc-section">
<header class="doc-variant-header">
<h2 class="doc-title"><a href="../preview/topicfinder--with-dropdowns" target="_top">With Dropdowns</a></h2>
<div class="doc-variant-configuration">
</div>
</header>
<div class="topicFinder" id="topicFinder-UID">
<div class="filterPanel">
<div class="filterPanel-filters" data-theme="dark">
<div class="filterPanel-filter has-dropdown">
<div class="dropdownMenu">
<label class="label is-optional">Auswahl 1</label>
<span class="dropdownMenu-select">
<span class="select">
<select>
<option value="">
Alle anzeigen
</option>
<option value="1">
Option 1.1
</option>
<option value="2">
Option 1.2
</option>
<option value="3">
Option 1.3
</option>
</select>
</span>
</span>
</div>
</div>
<div class="filterPanel-filter has-dropdown">
<div class="dropdownMenu">
<label class="label is-optional">Auswahl 2</label>
<span class="dropdownMenu-select">
<span class="select">
<select>
<option value="">
Alle anzeigen
</option>
<option value="1">
Option 2.1
</option>
<option value="2">
Option 2.2
</option>
<option value="3">
Option 2.3
</option>
</select>
</span>
</span>
</div>
</div>
<div class="filterPanel-filter has-dropdown">
<div class="dropdownMenu">
<label class="label is-optional">Auswahl 3</label>
<span class="dropdownMenu-select">
<span class="select">
<select>
<option value="">
Alle anzeigen
</option>
<option value="1">
Option 3.1
</option>
<option value="2">
Option 3.2
</option>
<option value="3">
Option 3.3
</option>
</select>
</span>
</span>
</div>
</div>
</div>
<div class="filterPanel-status">
</div>
</div>
<main class="topicFinder-results">
<div class="teaserSection">
<div class="teaserSection-items">
<div class="teaserSection-item">
<div class="teaserCard is-clickable">
<div class="teaserCard-image">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Alternative Bildbeschreibung" />
</figure>
</div>
<div class="teaserCard-content">
<h3 class="teaserCard-heading">
<span class="kicker">
Thema
</span>
<span class="teaserCard-title">Ich bin der Titel</span>
</h3>
<div class="teaserCard-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>
</div>
<div class="teaserCard-cta">
<a href="#" class="button is-icon-only" data-icon-position="right"><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 class="teaserSection-item">
<div class="teaserCard is-clickable">
<div class="teaserCard-image">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Alternative Bildbeschreibung" />
</figure>
</div>
<div class="teaserCard-content">
<h3 class="teaserCard-heading">
<span class="kicker">
Thema
</span>
<span class="teaserCard-title">Ich bin der Titel</span>
</h3>
<div class="teaserCard-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.
</div>
<div class="teaserCard-cta">
<a href="#" class="button is-icon-only" data-icon-position="right"><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 class="teaserSection-item">
<div class="teaserCard is-clickable">
<div class="teaserCard-image">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Alternative Bildbeschreibung" />
</figure>
</div>
<div class="teaserCard-content">
<h3 class="teaserCard-heading">
<span class="kicker">
Thema
</span>
<span class="teaserCard-title">Ich bin ein etwas längerer Titel</span>
</h3>
<div class="teaserCard-description">
Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz.
</div>
<div class="teaserCard-cta">
<a href="#" class="button is-icon-only" data-icon-position="right"><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>
<footer class="topicFinder-footer">
<div class="topicFinder-more">
<button class="button is-secondary"><span class="button-label">Weitere 9 Topics von 35 laden</span></button>
</div>
</footer>
</div>
</section>
<section class="doc-section">
<header class="doc-variant-header">
<h2 class="doc-title"><a href="../preview/topicfinder--with-eventteasers" target="_top">Event Teasers</a></h2>
<div class="doc-variant-configuration">
</div>
</header>
<div class="topicFinder" id="topicFinder-UID">
<div class="filterPanel">
<div class="filterPanel-filters" data-theme="dark">
<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-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 class="filterPanel-filter">
<div class="formCombobox is-required">
<label class="label is-required" for="field-uid">Auswahl 2</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" 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 2.1" data-label="Option 2.1">
<label>Option 2.1</label>
</li>
<li class="combobox-item" data-value="Option 2.2" data-label="Option 2.2">
<label>Option 2.2</label>
</li>
<li class="combobox-item" data-value="Option 2.3" data-label="Option 2.3">
<label>Option 2.3</label>
</li>
</ul>
</div>
</div>
</span>
</div>
</div>
</div>
<div class="filterPanel-status">
</div>
</div>
<main class="topicFinder-results">
<div class="teaserList has-eventteasers">
<h3 class="teaserList-title">Ich bin der Titel</h3>
<div class="teaserList-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>
</div>
<div class="teaserList-list">
<div class="teaserList-item">
<div class="eventTeaser">
<div class="eventTeaser-content">
<header class="eventTeaser-header">
<span class="highlightMarker">Label</span>
<span class="kicker">
<span class="kicker-item">Echo Park</span>
<span class="kicker-item">Selfies</span>
<span class="kicker-item">Flexitarian</span>
</span>
<h3 class="eventTeaser-title">
Ich bin der Titel
</h3>
</header>
<div class="eventTeaser-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>
<footer class="eventTeaser-footer">
<div class="metadataList">
<dl class="metadataList-list">
<div class="metadataList-item">
<dt class="metadataList-label">Hashtag</dt>
<dd class="metadataList-value">Echo</dd>
</div>
<div class="metadataList-item">
<dt class="metadataList-label">Park</dt>
<dd class="metadataList-value">Biodiesel</dd>
</div>
<div class="metadataList-item">
<dt class="metadataList-label">Plaid</dt>
<dd class="metadataList-value">Skateboard</dd>
</div>
</dl>
</div>
<div class="eventTeaser-cta">
<a href="#" class="button" data-icon-position="right"><svg class="icon is-arrow-right">
<use href="../../icons/icons-bold.svg#icon--arrow-right" xlink:href="../../icons/icons-bold.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Details anzeigen</span></a>
</div>
</footer>
</div>
</div>
</div>
<div class="teaserList-item">
<div class="eventTeaser">
<div class="eventTeaser-content">
<header class="eventTeaser-header">
<span class="highlightMarker">Label</span>
<span class="kicker">
<span class="kicker-item">Echo Park</span>
<span class="kicker-item">Selfies</span>
<span class="kicker-item">Flexitarian</span>
</span>
<h3 class="eventTeaser-title">
Ich bin der Titel
</h3>
</header>
<div class="eventTeaser-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>
<footer class="eventTeaser-footer">
<div class="metadataList">
<dl class="metadataList-list">
<div class="metadataList-item">
<dt class="metadataList-label">Hashtag</dt>
<dd class="metadataList-value">Echo</dd>
</div>
<div class="metadataList-item">
<dt class="metadataList-label">Park</dt>
<dd class="metadataList-value">Biodiesel</dd>
</div>
<div class="metadataList-item">
<dt class="metadataList-label">Plaid</dt>
<dd class="metadataList-value">Skateboard</dd>
</div>
</dl>
</div>
<div class="eventTeaser-cta">
<a href="#" class="button" data-icon-position="right"><svg class="icon is-arrow-right">
<use href="../../icons/icons-bold.svg#icon--arrow-right" xlink:href="../../icons/icons-bold.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Details anzeigen</span></a>
</div>
</footer>
</div>
</div>
</div>
<div class="teaserList-item">
<div class="eventTeaser">
<div class="eventTeaser-content">
<header class="eventTeaser-header">
<span class="highlightMarker">Label</span>
<span class="kicker">
<span class="kicker-item">Echo Park</span>
<span class="kicker-item">Selfies</span>
<span class="kicker-item">Flexitarian</span>
</span>
<h3 class="eventTeaser-title">
Ich bin der Titel
</h3>
</header>
<div class="eventTeaser-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>
<footer class="eventTeaser-footer">
<div class="metadataList">
<dl class="metadataList-list">
<div class="metadataList-item">
<dt class="metadataList-label">Hashtag</dt>
<dd class="metadataList-value">Echo</dd>
</div>
<div class="metadataList-item">
<dt class="metadataList-label">Park</dt>
<dd class="metadataList-value">Biodiesel</dd>
</div>
<div class="metadataList-item">
<dt class="metadataList-label">Plaid</dt>
<dd class="metadataList-value">Skateboard</dd>
</div>
</dl>
</div>
<div class="eventTeaser-cta">
<a href="#" class="button" data-icon-position="right"><svg class="icon is-arrow-right">
<use href="../../icons/icons-bold.svg#icon--arrow-right" xlink:href="../../icons/icons-bold.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Details anzeigen</span></a>
</div>
</footer>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="topicFinder-footer">
<div class="topicFinder-more">
<button class="button is-secondary"><span class="button-label">Weitere 9 Topics von 35 laden</span></button>
</div>
</footer>
</div>
</section>
{{#variants}}
<section class="doc-section">
<header class="doc-variant-header">
{{#title}}
<h2 class="doc-title"><a href="../preview/{{../url}}" target="_top">{{{.}}}</a></h2>
{{/title}}
<div class="doc-variant-configuration">
{{#if modifiers}}
<ul data-label="Modifier">
{{#modifiers}}
<li>{{{.}}}</li>
{{/modifiers}}
</ul>
{{/if}}
</div>
</header>
{{#samples}}
{{render '@topicfinder' (contextData '@topicfinder' this) merge=true}}
{{/samples}}
</section>
{{/variants}}
{
"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"
}
}
}
},
"variants": [
{
"title": "With Comboboxes (Default)",
"url": "topicfinder--default",
"samples": [
{
"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"
}
}
}
}
}
]
},
{
"title": "With Highlights",
"url": "topicfinder--with-highlights",
"samples": [
{
"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"
}
}
},
"title": "Alle Artikel",
"sorting": {
"description": "<strong>35</strong> Topics gefunden",
"dropdownmenu": {
"label": "Sortierung",
"modifier": "is-transparent",
"type": "sorting",
"select": {
"placeholder": null,
"options": [
{
"label": "Neuste zuerst",
"is-selected": true
},
{
"label": "Am häufigsten gelesen"
},
{
"label": "Am besten bewertet (Beta)"
}
]
}
}
}
},
"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
}
}
]
}
]
},
{
"title": "With Tags",
"url": "topicfinder--with-tags",
"samples": [
{
"id": "topicFinder-UID",
"filterpanel": {
"filter": {
"items": [
{
"label": "Auswahl 1",
"taggroup": {
"tags": [
{
"is-selectable": true,
"label": "Church-key Viny"
},
{
"is-selectable": true,
"label": "Flexitarian Retro"
},
{
"is-selectable": true,
"label": "Hashtag Echo Park"
},
{
"is-selectable": true,
"label": "Polaroid Vice"
},
{
"is-selectable": true,
"label": "Bitters Sartorial"
}
]
}
},
{
"label": "Auswahl 2",
"taggroup": {
"tags": [
{
"is-selectable": true,
"label": "Church-key Viny"
},
{
"is-selectable": true,
"label": "Flexitarian Retro"
},
{
"is-selectable": true,
"label": "Hashtag Echo Park"
},
{
"is-selectable": true,
"label": "Polaroid Vice"
},
{
"is-selectable": true,
"label": "Bitters Sartorial"
}
]
}
}
]
}
},
"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"
}
}
}
}
}
]
},
{
"title": "With Pagination",
"url": "topicfinder--with-tags",
"samples": [
{
"id": "topicFinder-UID",
"filterpanel": {
"filter": {
"items": [
{
"label": "Auswahl 1",
"taggroup": {
"tags": [
{
"is-selectable": true,
"label": "Church-key Viny"
},
{
"is-selectable": true,
"label": "Flexitarian Retro"
},
{
"is-selectable": true,
"label": "Hashtag Echo Park"
},
{
"is-selectable": true,
"label": "Polaroid Vice"
},
{
"is-selectable": true,
"label": "Bitters Sartorial"
}
]
}
},
{
"label": "Auswahl 2",
"taggroup": {
"tags": [
{
"is-selectable": true,
"label": "Church-key Viny"
},
{
"is-selectable": true,
"label": "Flexitarian Retro"
},
{
"is-selectable": true,
"label": "Hashtag Echo Park"
},
{
"is-selectable": true,
"label": "Polaroid Vice"
},
{
"is-selectable": true,
"label": "Bitters Sartorial"
}
]
}
}
]
}
},
"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"
}
}
}
}
}
]
},
{
"title": "With Dropdowns",
"url": "topicfinder--with-dropdowns",
"samples": [
{
"id": "topicFinder-UID",
"filterpanel": {
"filter": {
"items": [
{
"dropdownmenu": {
"id": null,
"label": "Auswahl 1",
"select": {
"id": null,
"placeholder": null,
"options": [
{
"label": "Alle anzeigen",
"value": ""
},
{
"label": "Option 1.1",
"value": 1
},
{
"label": "Option 1.2",
"value": 2
},
{
"label": "Option 1.3",
"value": 3
}
]
}
}
},
{
"dropdownmenu": {
"id": null,
"label": "Auswahl 2",
"select": {
"id": null,
"placeholder": null,
"options": [
{
"label": "Alle anzeigen",
"value": ""
},
{
"label": "Option 2.1",
"value": 1
},
{
"label": "Option 2.2",
"value": 2
},
{
"label": "Option 2.3",
"value": 3
}
]
}
}
},
{
"dropdownmenu": {
"id": null,
"label": "Auswahl 3",
"select": {
"id": null,
"placeholder": null,
"options": [
{
"label": "Alle anzeigen",
"value": ""
},
{
"label": "Option 3.1",
"value": 1
},
{
"label": "Option 3.2",
"value": 2
},
{
"label": "Option 3.3",
"value": 3
}
]
}
}
}
]
}
},
"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"
}
}
}
}
}
]
},
{
"title": "Event Teasers",
"url": "topicfinder--with-eventteasers",
"samples": [
{
"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": null,
"footer": {
"more": {
"button": {
"modifier": "is-secondary",
"label": "Weitere 9 Topics von 35 laden"
}
}
},
"teaserlist": {
"eventteasers": [
{
"highlightmarker": {
"label": "Label"
},
"kicker": {
"content": null,
"items": [
"Echo Park",
"Selfies",
"Flexitarian"
]
},
"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",
"metadatalist": {
"items": [
{
"label": "Hashtag",
"value": "Echo"
},
{
"label": "Park",
"value": "Biodiesel"
},
{
"label": "Plaid",
"value": "Skateboard"
}
]
},
"ctas": {
"label": "Details anzeigen",
"icon": {
"position": "right",
"id": "arrow-right",
"weight": "bold"
}
}
},
{
"highlightmarker": {
"label": "Label"
},
"kicker": {
"content": null,
"items": [
"Echo Park",
"Selfies",
"Flexitarian"
]
},
"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",
"metadatalist": {
"items": [
{
"label": "Hashtag",
"value": "Echo"
},
{
"label": "Park",
"value": "Biodiesel"
},
{
"label": "Plaid",
"value": "Skateboard"
}
]
},
"ctas": {
"label": "Details anzeigen",
"icon": {
"position": "right",
"id": "arrow-right",
"weight": "bold"
}
}
},
{
"highlightmarker": {
"label": "Label"
},
"kicker": {
"content": null,
"items": [
"Echo Park",
"Selfies",
"Flexitarian"
]
},
"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",
"metadatalist": {
"items": [
{
"label": "Hashtag",
"value": "Echo"
},
{
"label": "Park",
"value": "Biodiesel"
},
{
"label": "Plaid",
"value": "Skateboard"
}
]
},
"ctas": {
"label": "Details anzeigen",
"icon": {
"position": "right",
"id": "arrow-right",
"weight": "bold"
}
}
}
]
}
}
}
]
}
]
}
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;
}
}
}
}