No notes defined.
<!-- Default -->
<div class="teaserList">
<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>
</div>
<!-- With Teaserinsets -->
<div class="teaserList">
<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="teaserInset is-clickable">
<div class="teaserInset-image">
<a href="#" title="Weiter zum Artikel">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Beschreibung des Teaser Images" />
</figure>
</a>
</div>
<div class="teaserInset-content">
<h3 class="teaserInset-heading">
<span class="kicker">
Thema
</span>
<span class="teaserInset-title">
<a href="#" title="Weiter zum Artikel">Ich bin der Titel</a>
</span>
</h3>
<div class="teaserInset-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="teaserInset-cta">
<a href="#" class="button"><span class="button-label">Weiter zum Artikel</span></a>
</div>
</div>
</div>
</div>
<div class="teaserList-item">
<div class="teaserInset is-clickable">
<div class="teaserInset-image">
<a href="#" title="Weiter zum Artikel">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Beschreibung des Teaser Images" />
</figure>
</a>
</div>
<div class="teaserInset-content">
<h3 class="teaserInset-heading">
<span class="kicker">
Thema
</span>
<span class="teaserInset-title">
<a href="#" title="Weiter zum Artikel">Ich bin der Titel</a>
</span>
</h3>
<div class="teaserInset-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="teaserInset-cta">
<a href="#" class="button"><span class="button-label">Weiter zum Artikel</span></a>
</div>
</div>
</div>
</div>
<div class="teaserList-item">
<div class="teaserInset is-clickable">
<div class="teaserInset-image">
<a href="#" title="Weiter zum Artikel">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Beschreibung des Teaser Images" />
</figure>
</a>
</div>
<div class="teaserInset-content">
<h3 class="teaserInset-heading">
<span class="kicker">
Thema
</span>
<span class="teaserInset-title">
<a href="#" title="Weiter zum Artikel">Ich bin der Titel</a>
</span>
</h3>
<div class="teaserInset-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="teaserInset-cta">
<a href="#" class="button"><span class="button-label">Weiter zum Artikel</span></a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- With Teaserinsets Full Width -->
<div class="teaserList is-full-width">
<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="teaserInset is-clickable">
<div class="teaserInset-image">
<a href="#" title="Weiter zum Artikel">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Beschreibung des Teaser Images" />
</figure>
</a>
</div>
<div class="teaserInset-content">
<h3 class="teaserInset-heading">
<span class="kicker">
Thema
</span>
<span class="teaserInset-title">
<a href="#" title="Weiter zum Artikel">Ich bin der Titel</a>
</span>
</h3>
<div class="teaserInset-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="teaserInset-cta">
<a href="#" class="button"><span class="button-label">Weiter zum Artikel</span></a>
</div>
</div>
</div>
</div>
<div class="teaserList-item">
<div class="teaserInset is-clickable">
<div class="teaserInset-image">
<a href="#" title="Weiter zum Artikel">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Beschreibung des Teaser Images" />
</figure>
</a>
</div>
<div class="teaserInset-content">
<h3 class="teaserInset-heading">
<span class="kicker">
Thema
</span>
<span class="teaserInset-title">
<a href="#" title="Weiter zum Artikel">Ich bin der Titel</a>
</span>
</h3>
<div class="teaserInset-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="teaserInset-cta">
<a href="#" class="button"><span class="button-label">Weiter zum Artikel</span></a>
</div>
</div>
</div>
</div>
<div class="teaserList-item">
<div class="teaserInset is-clickable">
<div class="teaserInset-image">
<a href="#" title="Weiter zum Artikel">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Beschreibung des Teaser Images" />
</figure>
</a>
</div>
<div class="teaserInset-content">
<h3 class="teaserInset-heading">
<span class="kicker">
Thema
</span>
<span class="teaserInset-title">
<a href="#" title="Weiter zum Artikel">Ich bin der Titel</a>
</span>
</h3>
<div class="teaserInset-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="teaserInset-cta">
<a href="#" class="button"><span class="button-label">Weiter zum Artikel</span></a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- With Teaserinsets With Linklist -->
<div class="teaserList has-linklists">
<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="teaserInset is-clickable has-linklist">
<div class="teaserInset-image">
<a href="#" title="Weiter zum Artikel">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Beschreibung des Teaser Images" />
</figure>
</a>
</div>
<div class="teaserInset-content">
<h3 class="teaserInset-heading">
<span class="kicker">
Thema
</span>
<span class="teaserInset-title">
<a href="#" title="Weiter zum Artikel">Ich bin der Titel</a>
</span>
</h3>
<div class="teaserInset-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="teaserInset-cta">
<a href="#" class="button"><span class="button-label">Weiter zum Artikel</span></a>
</div>
</div>
<div class="teaserInset-linklist">
<div class="linkList">
<div class="linkList-title"><strong>Ich bin der Titel</strong></div>
<ul class="linkList-list">
<li class="linkList-item">
<a href="#" class="link"><span class="link-label">Ich bin ein Link</span><svg class="icon is-arrow-right">
<use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>
</a>
</li>
<li class="linkList-item">
<a href="#" class="link"><span class="link-label">Noch ein zweiter Link</span><svg class="icon is-arrow-right">
<use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>
</a>
</li>
<li class="linkList-item">
<a href="#" class="link"><span class="link-label">Ein Weiterer</span><svg class="icon is-arrow-right">
<use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="teaserList-item">
<div class="teaserInset is-clickable has-linklist">
<div class="teaserInset-image">
<a href="#" title="Weiter zum Artikel">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Beschreibung des Teaser Images" />
</figure>
</a>
</div>
<div class="teaserInset-content">
<h3 class="teaserInset-heading">
<span class="kicker">
Thema
</span>
<span class="teaserInset-title">
<a href="#" title="Weiter zum Artikel">Ich bin der Titel</a>
</span>
</h3>
<div class="teaserInset-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="teaserInset-cta">
<a href="#" class="button"><span class="button-label">Weiter zum Artikel</span></a>
</div>
</div>
<div class="teaserInset-linklist">
<div class="linkList">
<div class="linkList-title"><strong>Ich bin der Titel</strong></div>
<ul class="linkList-list">
<li class="linkList-item">
<a href="#" class="link"><span class="link-label">Ich bin ein Link</span><svg class="icon is-arrow-right">
<use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="teaserList-item">
<div class="teaserInset is-clickable has-linklist">
<div class="teaserInset-image">
<a href="#" title="Weiter zum Artikel">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Beschreibung des Teaser Images" />
</figure>
</a>
</div>
<div class="teaserInset-content">
<h3 class="teaserInset-heading">
<span class="kicker">
Thema
</span>
<span class="teaserInset-title">
<a href="#" title="Weiter zum Artikel">Ich bin der Titel</a>
</span>
</h3>
<div class="teaserInset-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="teaserInset-cta">
<a href="#" class="button"><span class="button-label">Weiter zum Artikel</span></a>
</div>
</div>
<div class="teaserInset-linklist">
<div class="linkList">
<div class="linkList-title"><strong>Ich bin der Titel</strong></div>
<ul class="linkList-list">
<li class="linkList-item">
<a href="#" class="link"><span class="link-label">Ich bin ein Link</span><svg class="icon is-arrow-right">
<use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>
</a>
</li>
<li class="linkList-item">
<a href="#" class="link"><span class="link-label">Noch ein zweiter Link</span><svg class="icon is-arrow-right">
<use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>
</a>
</li>
<li class="linkList-item">
<a href="#" class="link"><span class="link-label">Ein Weiterer</span><svg class="icon is-arrow-right">
<use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- With Downloaditems Large -->
<div class="teaserList">
<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="downloadItem is-large" data-type="document">
<div class="downloadItem-image">
<a href="#" title="Download Datei">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-document.jpg" alt="Beschreibung des Teaser Images" />
</figure>
</a>
</div>
<div class="downloadItem-content">
<div class="downloadItem-metadata">
<span class="downloadItem-metadata-item is-topic">Topic</span>
<span class="downloadItem-metadata-item is-type">Download</span>
<span class="downloadItem-metadata-item is-filetype">Unknown</span>
<span class="downloadItem-metadata-item is-filesize">1.024 KB</span>
</div>
<div class="downloadItem-title">
<a href="#" title="Download Datei"><strong>Ich bin der Titel</strong></a>
</div>
<div class="downloadItem-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>
<div class="downloadItem-interactions">
<a href="#" class="button is-icon-only"><svg class="icon is-download-simple">
<use href="../../icons/icons-bold.svg#icon--download-simple" xlink:href="../../icons/icons-bold.svg#icon--download-simple"></use>
</svg>
<span class="button-label">Download Datei</span></a>
<a href="#" class="button is-secondary is-icon-only"><svg class="icon is-share-fat">
<use href="../../icons/icons-bold.svg#icon--share-fat" xlink:href="../../icons/icons-bold.svg#icon--share-fat"></use>
</svg>
<span class="button-label">Versenden</span></a>
</div>
</div>
</div>
<div class="teaserList-item">
<div class="downloadItem is-large" data-type="document">
<div class="downloadItem-image">
<a href="#" title="Download Datei">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-document.jpg" alt="Beschreibung des Teaser Images" />
</figure>
</a>
</div>
<div class="downloadItem-content">
<div class="downloadItem-metadata">
<span class="downloadItem-metadata-item is-topic">Topic</span>
<span class="downloadItem-metadata-item is-type">Download</span>
<span class="downloadItem-metadata-item is-filetype">Unknown</span>
<span class="downloadItem-metadata-item is-filesize">1.024 KB</span>
</div>
<div class="downloadItem-title">
<a href="#" title="Download Datei"><strong>Ich bin der Titel</strong></a>
</div>
<div class="downloadItem-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>
<div class="downloadItem-interactions">
<a href="#" class="button is-icon-only"><svg class="icon is-download-simple">
<use href="../../icons/icons-bold.svg#icon--download-simple" xlink:href="../../icons/icons-bold.svg#icon--download-simple"></use>
</svg>
<span class="button-label">Download Datei</span></a>
<a href="#" class="button is-secondary is-icon-only"><svg class="icon is-share-fat">
<use href="../../icons/icons-bold.svg#icon--share-fat" xlink:href="../../icons/icons-bold.svg#icon--share-fat"></use>
</svg>
<span class="button-label">Versenden</span></a>
</div>
</div>
</div>
<div class="teaserList-item">
<div class="downloadItem is-large" data-type="document">
<div class="downloadItem-image">
<a href="#" title="Download Datei">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-document.jpg" alt="Beschreibung des Teaser Images" />
</figure>
</a>
</div>
<div class="downloadItem-content">
<div class="downloadItem-metadata">
<span class="downloadItem-metadata-item is-topic">Topic</span>
<span class="downloadItem-metadata-item is-type">Download</span>
<span class="downloadItem-metadata-item is-filetype">Unknown</span>
<span class="downloadItem-metadata-item is-filesize">1.024 KB</span>
</div>
<div class="downloadItem-title">
<a href="#" title="Download Datei"><strong>Ich bin der Titel</strong></a>
</div>
<div class="downloadItem-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>
<div class="downloadItem-interactions">
<a href="#" class="button is-icon-only"><svg class="icon is-download-simple">
<use href="../../icons/icons-bold.svg#icon--download-simple" xlink:href="../../icons/icons-bold.svg#icon--download-simple"></use>
</svg>
<span class="button-label">Download Datei</span></a>
<a href="#" class="button is-secondary is-icon-only"><svg class="icon is-share-fat">
<use href="../../icons/icons-bold.svg#icon--share-fat" xlink:href="../../icons/icons-bold.svg#icon--share-fat"></use>
</svg>
<span class="button-label">Versenden</span></a>
</div>
</div>
</div>
</div>
</div>
<!-- With Downloaditems -->
<div class="teaserList">
<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="downloadItem">
<div class="downloadItem-image">
<a href="#" title="Download Datei">
</a>
</div>
<div class="downloadItem-content">
<div class="downloadItem-metadata">
<span class="downloadItem-metadata-item is-topic">Topic</span>
<span class="downloadItem-metadata-item is-type">Download</span>
<span class="downloadItem-metadata-item is-filetype">Unknown</span>
<span class="downloadItem-metadata-item is-filesize">1.024 KB</span>
</div>
<div class="downloadItem-title">
<a href="#" title="Download Datei"><strong>Ich bin der Titel</strong></a>
</div>
<div class="downloadItem-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>
<div class="downloadItem-interactions">
<a href="#" class="button is-icon-only"><svg class="icon is-download-simple">
<use href="../../icons/icons-bold.svg#icon--download-simple" xlink:href="../../icons/icons-bold.svg#icon--download-simple"></use>
</svg>
<span class="button-label">Download Datei</span></a>
<a href="#" class="button is-secondary is-icon-only"><svg class="icon is-share-fat">
<use href="../../icons/icons-bold.svg#icon--share-fat" xlink:href="../../icons/icons-bold.svg#icon--share-fat"></use>
</svg>
<span class="button-label">Versenden</span></a>
</div>
</div>
</div>
<div class="teaserList-item">
<div class="downloadItem">
<div class="downloadItem-image">
<a href="#" title="Download Datei">
</a>
</div>
<div class="downloadItem-content">
<div class="downloadItem-metadata">
<span class="downloadItem-metadata-item is-topic">Topic</span>
<span class="downloadItem-metadata-item is-type">Download</span>
<span class="downloadItem-metadata-item is-filetype">Unknown</span>
<span class="downloadItem-metadata-item is-filesize">1.024 KB</span>
</div>
<div class="downloadItem-title">
<a href="#" title="Download Datei"><strong>Ich bin der Titel</strong></a>
</div>
<div class="downloadItem-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>
<div class="downloadItem-interactions">
<a href="#" class="button is-icon-only"><svg class="icon is-download-simple">
<use href="../../icons/icons-bold.svg#icon--download-simple" xlink:href="../../icons/icons-bold.svg#icon--download-simple"></use>
</svg>
<span class="button-label">Download Datei</span></a>
<a href="#" class="button is-secondary is-icon-only"><svg class="icon is-share-fat">
<use href="../../icons/icons-bold.svg#icon--share-fat" xlink:href="../../icons/icons-bold.svg#icon--share-fat"></use>
</svg>
<span class="button-label">Versenden</span></a>
</div>
</div>
</div>
<div class="teaserList-item">
<div class="downloadItem">
<div class="downloadItem-image">
<a href="#" title="Download Datei">
</a>
</div>
<div class="downloadItem-content">
<div class="downloadItem-metadata">
<span class="downloadItem-metadata-item is-topic">Topic</span>
<span class="downloadItem-metadata-item is-type">Download</span>
<span class="downloadItem-metadata-item is-filetype">Unknown</span>
<span class="downloadItem-metadata-item is-filesize">1.024 KB</span>
</div>
<div class="downloadItem-title">
<a href="#" title="Download Datei"><strong>Ich bin der Titel</strong></a>
</div>
<div class="downloadItem-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>
<div class="downloadItem-interactions">
<a href="#" class="button is-icon-only"><svg class="icon is-download-simple">
<use href="../../icons/icons-bold.svg#icon--download-simple" xlink:href="../../icons/icons-bold.svg#icon--download-simple"></use>
</svg>
<span class="button-label">Download Datei</span></a>
<a href="#" class="button is-secondary is-icon-only"><svg class="icon is-share-fat">
<use href="../../icons/icons-bold.svg#icon--share-fat" xlink:href="../../icons/icons-bold.svg#icon--share-fat"></use>
</svg>
<span class="button-label">Versenden</span></a>
</div>
</div>
</div>
</div>
</div>
<!-- With Downloaditems Small -->
<div class="teaserList">
<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="downloadItem is-small">
<div class="downloadItem-image">
<a href="#" title="Download Datei">
</a>
</div>
<div class="downloadItem-content">
<div class="downloadItem-metadata">
<span class="downloadItem-metadata-item is-topic">Topic</span>
<span class="downloadItem-metadata-item is-type">Download</span>
<span class="downloadItem-metadata-item is-filetype">Unknown</span>
<span class="downloadItem-metadata-item is-filesize">1.024 KB</span>
</div>
<div class="downloadItem-title">
<a href="#" title="Download Datei"><strong>Ich bin der Titel</strong></a>
</div>
<div class="downloadItem-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>
<div class="downloadItem-interactions">
<a href="#" class="button is-icon-only"><svg class="icon is-download-simple">
<use href="../../icons/icons-bold.svg#icon--download-simple" xlink:href="../../icons/icons-bold.svg#icon--download-simple"></use>
</svg>
<span class="button-label">Download Datei</span></a>
<a href="#" class="button is-secondary is-icon-only"><svg class="icon is-share-fat">
<use href="../../icons/icons-bold.svg#icon--share-fat" xlink:href="../../icons/icons-bold.svg#icon--share-fat"></use>
</svg>
<span class="button-label">Versenden</span></a>
</div>
</div>
</div>
<div class="teaserList-item">
<div class="downloadItem is-small">
<div class="downloadItem-image">
<a href="#" title="Download Datei">
</a>
</div>
<div class="downloadItem-content">
<div class="downloadItem-metadata">
<span class="downloadItem-metadata-item is-topic">Topic</span>
<span class="downloadItem-metadata-item is-type">Download</span>
<span class="downloadItem-metadata-item is-filetype">Unknown</span>
<span class="downloadItem-metadata-item is-filesize">1.024 KB</span>
</div>
<div class="downloadItem-title">
<a href="#" title="Download Datei"><strong>Ich bin ein sehr langer und deshalb unter bestimmten Voraussetzungen mehrzeiliger Titel</strong></a>
</div>
<div class="downloadItem-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>
<div class="downloadItem-interactions">
<a href="#" class="button is-icon-only"><svg class="icon is-download-simple">
<use href="../../icons/icons-bold.svg#icon--download-simple" xlink:href="../../icons/icons-bold.svg#icon--download-simple"></use>
</svg>
<span class="button-label">Download Datei</span></a>
<a href="#" class="button is-secondary is-icon-only"><svg class="icon is-share-fat">
<use href="../../icons/icons-bold.svg#icon--share-fat" xlink:href="../../icons/icons-bold.svg#icon--share-fat"></use>
</svg>
<span class="button-label">Versenden</span></a>
</div>
</div>
</div>
<div class="teaserList-item">
<div class="downloadItem is-small">
<div class="downloadItem-image">
<a href="#" title="Download Datei">
</a>
</div>
<div class="downloadItem-content">
<div class="downloadItem-metadata">
<span class="downloadItem-metadata-item is-topic">Topic</span>
<span class="downloadItem-metadata-item is-type">Download</span>
<span class="downloadItem-metadata-item is-filetype">Unknown</span>
<span class="downloadItem-metadata-item is-filesize">1.024 KB</span>
</div>
<div class="downloadItem-title">
<a href="#" title="Download Datei"><strong>Ich bin der Titel</strong></a>
</div>
<div class="downloadItem-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>
<div class="downloadItem-interactions">
<a href="#" class="button is-icon-only"><svg class="icon is-download-simple">
<use href="../../icons/icons-bold.svg#icon--download-simple" xlink:href="../../icons/icons-bold.svg#icon--download-simple"></use>
</svg>
<span class="button-label">Download Datei</span></a>
<a href="#" class="button is-secondary is-icon-only"><svg class="icon is-share-fat">
<use href="../../icons/icons-bold.svg#icon--share-fat" xlink:href="../../icons/icons-bold.svg#icon--share-fat"></use>
</svg>
<span class="button-label">Versenden</span></a>
</div>
</div>
</div>
</div>
</div>
<!-- With Newsteaser -->
<div class="teaserList has-newsteasers">
<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>
<nav class="paginationBar" aria-label="pagination">
<ul class="paginationBar-list">
<li class="paginationBar-item" data-direction="previous">
<span>Vorherige Seite</span>
</li>
<li class="paginationBar-item">
<a href="#" title="1">1</a>
</li>
<li class="paginationBar-item" aria-current="page">
<a href="#" title="2">2</a>
</li>
<li class="paginationBar-item">
<a href="#" title="3">3</a>
</li>
<li class="paginationBar-item">
<span>…</span>
</li>
<li class="paginationBar-item">
<a href="#" title="150">150</a>
</li>
<li class="paginationBar-item" data-direction="next">
<a href="#" title="Nächste Seite">Nächste Seite</a>
</li>
</ul>
</nav>
<div class="teaserList-list">
<div class="teaserList-item">
<div class="newsTeaser">
<div class="newsTeaser-content">
<div class="newsTeaser-metadata">
<span class="newsTeaser-metadata-item is-date">01.01.2024</span>
</div>
<div class="newsTeaser-notice">
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.
</div>
<div class="newsTeaser-title">
<strong>Ich bin der Titel</strong>
</div>
</div>
<div class="newsTeaser-interactions">
<a href="#" class="button is-small is-icon-only"><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">News anzeigen</span></a>
</div>
</div>
</div>
<div class="teaserList-item">
<div class="newsTeaser">
<div class="newsTeaser-content">
<div class="newsTeaser-metadata">
<span class="newsTeaser-metadata-item is-date">01.01.2024</span>
</div>
<div class="newsTeaser-notice">
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.
</div>
<div class="newsTeaser-title">
<strong>Ich bin der Titel</strong>
</div>
</div>
<div class="newsTeaser-interactions">
<a href="#" class="button is-small is-icon-only"><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">News anzeigen</span></a>
</div>
</div>
</div>
<div class="teaserList-item">
<div class="newsTeaser">
<div class="newsTeaser-content">
<div class="newsTeaser-metadata">
<span class="newsTeaser-metadata-item is-date">01.01.2024</span>
</div>
<div class="newsTeaser-notice">
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.
</div>
<div class="newsTeaser-title">
<strong>Ich bin der Titel</strong>
</div>
</div>
<div class="newsTeaser-interactions">
<a href="#" class="button is-small is-icon-only"><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">News anzeigen</span></a>
</div>
</div>
</div>
</div>
<nav class="paginationBar" aria-label="pagination">
<ul class="paginationBar-list">
<li class="paginationBar-item" data-direction="previous">
<span>Vorherige Seite</span>
</li>
<li class="paginationBar-item">
<a href="#" title="1">1</a>
</li>
<li class="paginationBar-item" aria-current="page">
<a href="#" title="2">2</a>
</li>
<li class="paginationBar-item">
<a href="#" title="3">3</a>
</li>
<li class="paginationBar-item">
<span>…</span>
</li>
<li class="paginationBar-item">
<a href="#" title="150">150</a>
</li>
<li class="paginationBar-item" data-direction="next">
<a href="#" title="Nächste Seite">Nächste Seite</a>
</li>
</ul>
</nav>
</div>
<!-- With Eventteasers -->
<div class="teaserList has-eventteasers">
<div class="teaserList-list">
<div class="teaserList-item">
<div class="eventTeaser">
<div class="eventTeaser-image">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Beschreibung des Teaser Images" />
</figure>
</div>
<div class="eventTeaser-content">
<header class="eventTeaser-header">
<div class="dateBadge">
<time datetime="2024-02-28" class="dateBadge-start">28 Feb 2024</time> <span class="dateBadge-separator">–</span> <time datetime="2024-03-03" class="dateBadge-end">3 Mär 2024</time>
</div>
<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-square-out">
<use href="../../icons/icons-bold.svg#icon--arrow-square-out" xlink:href="../../icons/icons-bold.svg#icon--arrow-square-out"></use>
</svg>
<span class="button-label">Zur Website</span></a>
<a href="#" class="button is-secondary" data-icon-position="right"><svg class="icon is-calendar-plus">
<use href="../../icons/icons-bold.svg#icon--calendar-plus" xlink:href="../../icons/icons-bold.svg#icon--calendar-plus"></use>
</svg>
<span class="button-label">Termin speichern</span></a>
</div>
</footer>
</div>
</div>
</div>
<div class="teaserList-item">
<div class="eventTeaser">
<div class="eventTeaser-image">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Beschreibung des Teaser Images" />
</figure>
</div>
<div class="eventTeaser-content">
<header class="eventTeaser-header">
<div class="dateBadge">
<time datetime="2024-02-28" class="dateBadge-start">28 Feb 2024</time> <span class="dateBadge-separator">–</span> <time datetime="2024-03-03" class="dateBadge-end">3 Mär 2024</time>
</div>
<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-square-out">
<use href="../../icons/icons-bold.svg#icon--arrow-square-out" xlink:href="../../icons/icons-bold.svg#icon--arrow-square-out"></use>
</svg>
<span class="button-label">Zur Website</span></a>
<a href="#" class="button is-secondary" data-icon-position="right"><svg class="icon is-calendar-plus">
<use href="../../icons/icons-bold.svg#icon--calendar-plus" xlink:href="../../icons/icons-bold.svg#icon--calendar-plus"></use>
</svg>
<span class="button-label">Termin speichern</span></a>
</div>
</footer>
</div>
</div>
</div>
<div class="teaserList-item">
<div class="eventTeaser">
<div class="eventTeaser-image">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Beschreibung des Teaser Images" />
</figure>
</div>
<div class="eventTeaser-content">
<header class="eventTeaser-header">
<div class="dateBadge">
<time datetime="2024-02-28" class="dateBadge-start">28 Feb 2024</time> <span class="dateBadge-separator">–</span> <time datetime="2024-03-03" class="dateBadge-end">3 Mär 2024</time>
</div>
<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-square-out">
<use href="../../icons/icons-bold.svg#icon--arrow-square-out" xlink:href="../../icons/icons-bold.svg#icon--arrow-square-out"></use>
</svg>
<span class="button-label">Zur Website</span></a>
<a href="#" class="button is-secondary" data-icon-position="right"><svg class="icon is-calendar-plus">
<use href="../../icons/icons-bold.svg#icon--calendar-plus" xlink:href="../../icons/icons-bold.svg#icon--calendar-plus"></use>
</svg>
<span class="button-label">Termin speichern</span></a>
</div>
</footer>
</div>
</div>
</div>
</div>
</div>
<!-- With Pagination -->
<div class="teaserList">
<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>
<nav class="paginationBar" aria-label="pagination">
<ul class="paginationBar-list">
<li class="paginationBar-item" data-direction="previous">
<span>Vorherige Seite</span>
</li>
<li class="paginationBar-item">
<a href="#" title="1">1</a>
</li>
<li class="paginationBar-item" aria-current="page">
<a href="#" title="2">2</a>
</li>
<li class="paginationBar-item">
<a href="#" title="3">3</a>
</li>
<li class="paginationBar-item">
<span>…</span>
</li>
<li class="paginationBar-item">
<a href="#" title="150">150</a>
</li>
<li class="paginationBar-item" data-direction="next">
<a href="#" title="Nächste Seite">Nächste Seite</a>
</li>
</ul>
</nav>
<div class="teaserList-list">
<div class="teaserList-item">
<div class="teaserInset is-clickable">
<div class="teaserInset-image">
<a href="#" title="Weiter zum Artikel">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Beschreibung des Teaser Images" />
</figure>
</a>
</div>
<div class="teaserInset-content">
<h3 class="teaserInset-heading">
<span class="kicker">
Thema
</span>
<span class="teaserInset-title">
<a href="#" title="Weiter zum Artikel">Ich bin der Titel</a>
</span>
</h3>
<div class="teaserInset-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="teaserInset-cta">
<a href="#" class="button"><span class="button-label">Weiter zum Artikel</span></a>
</div>
</div>
</div>
</div>
<div class="teaserList-item">
<div class="teaserInset is-clickable">
<div class="teaserInset-image">
<a href="#" title="Weiter zum Artikel">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Beschreibung des Teaser Images" />
</figure>
</a>
</div>
<div class="teaserInset-content">
<h3 class="teaserInset-heading">
<span class="kicker">
Thema
</span>
<span class="teaserInset-title">
<a href="#" title="Weiter zum Artikel">Ich bin der Titel</a>
</span>
</h3>
<div class="teaserInset-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="teaserInset-cta">
<a href="#" class="button"><span class="button-label">Weiter zum Artikel</span></a>
</div>
</div>
</div>
</div>
<div class="teaserList-item">
<div class="teaserInset is-clickable">
<div class="teaserInset-image">
<a href="#" title="Weiter zum Artikel">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Beschreibung des Teaser Images" />
</figure>
</a>
</div>
<div class="teaserInset-content">
<h3 class="teaserInset-heading">
<span class="kicker">
Thema
</span>
<span class="teaserInset-title">
<a href="#" title="Weiter zum Artikel">Ich bin der Titel</a>
</span>
</h3>
<div class="teaserInset-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="teaserInset-cta">
<a href="#" class="button"><span class="button-label">Weiter zum Artikel</span></a>
</div>
</div>
</div>
</div>
</div>
<nav class="paginationBar" aria-label="pagination">
<ul class="paginationBar-list">
<li class="paginationBar-item" data-direction="previous">
<span>Vorherige Seite</span>
</li>
<li class="paginationBar-item">
<a href="#" title="1">1</a>
</li>
<li class="paginationBar-item" aria-current="page">
<a href="#" title="2">2</a>
</li>
<li class="paginationBar-item">
<a href="#" title="3">3</a>
</li>
<li class="paginationBar-item">
<span>…</span>
</li>
<li class="paginationBar-item">
<a href="#" title="150">150</a>
</li>
<li class="paginationBar-item" data-direction="next">
<a href="#" title="Nächste Seite">Nächste Seite</a>
</li>
</ul>
</nav>
</div>
<!-- Doc Only -->
<section class="doc-variant">
<header class="doc-variant-header">
<h2 class="doc-title">With Teaser Insets</h2>
<div class="doc-variant-configuration">
</div>
</header>
<div class="teaserList">
<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="teaserInset is-clickable">
<div class="teaserInset-image">
<a href="#" title="Weiter zum Artikel">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Beschreibung des Teaser Images" />
</figure>
</a>
</div>
<div class="teaserInset-content">
<h3 class="teaserInset-heading">
<span class="kicker">
Thema
</span>
<span class="teaserInset-title">
<a href="#" title="Weiter zum Artikel">Ich bin der Titel</a>
</span>
</h3>
<div class="teaserInset-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="teaserInset-cta">
<a href="#" class="button"><span class="button-label">Weiter zum Artikel</span></a>
</div>
</div>
</div>
</div>
<div class="teaserList-item">
<div class="teaserInset is-clickable">
<div class="teaserInset-image">
<a href="#" title="Weiter zum Artikel">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Beschreibung des Teaser Images" />
</figure>
</a>
</div>
<div class="teaserInset-content">
<h3 class="teaserInset-heading">
<span class="kicker">
Thema
</span>
<span class="teaserInset-title">
<a href="#" title="Weiter zum Artikel">Ich bin der Titel</a>
</span>
</h3>
<div class="teaserInset-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="teaserInset-cta">
<a href="#" class="button"><span class="button-label">Weiter zum Artikel</span></a>
</div>
</div>
</div>
</div>
<div class="teaserList-item">
<div class="teaserInset is-clickable">
<div class="teaserInset-image">
<a href="#" title="Weiter zum Artikel">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Beschreibung des Teaser Images" />
</figure>
</a>
</div>
<div class="teaserInset-content">
<h3 class="teaserInset-heading">
<span class="kicker">
Thema
</span>
<span class="teaserInset-title">
<a href="#" title="Weiter zum Artikel">Ich bin der Titel</a>
</span>
</h3>
<div class="teaserInset-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="teaserInset-cta">
<a href="#" class="button"><span class="button-label">Weiter zum Artikel</span></a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="teaserList is-full-width">
<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="teaserInset is-clickable">
<div class="teaserInset-image">
<a href="#" title="Weiter zum Artikel">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Beschreibung des Teaser Images" />
</figure>
</a>
</div>
<div class="teaserInset-content">
<h3 class="teaserInset-heading">
<span class="kicker">
Thema
</span>
<span class="teaserInset-title">
<a href="#" title="Weiter zum Artikel">Ich bin der Titel</a>
</span>
</h3>
<div class="teaserInset-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="teaserInset-cta">
<a href="#" class="button"><span class="button-label">Weiter zum Artikel</span></a>
</div>
</div>
</div>
</div>
<div class="teaserList-item">
<div class="teaserInset is-clickable">
<div class="teaserInset-image">
<a href="#" title="Weiter zum Artikel">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Beschreibung des Teaser Images" />
</figure>
</a>
</div>
<div class="teaserInset-content">
<h3 class="teaserInset-heading">
<span class="kicker">
Thema
</span>
<span class="teaserInset-title">
<a href="#" title="Weiter zum Artikel">Ich bin der Titel</a>
</span>
</h3>
<div class="teaserInset-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="teaserInset-cta">
<a href="#" class="button"><span class="button-label">Weiter zum Artikel</span></a>
</div>
</div>
</div>
</div>
<div class="teaserList-item">
<div class="teaserInset is-clickable">
<div class="teaserInset-image">
<a href="#" title="Weiter zum Artikel">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Beschreibung des Teaser Images" />
</figure>
</a>
</div>
<div class="teaserInset-content">
<h3 class="teaserInset-heading">
<span class="kicker">
Thema
</span>
<span class="teaserInset-title">
<a href="#" title="Weiter zum Artikel">Ich bin der Titel</a>
</span>
</h3>
<div class="teaserInset-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="teaserInset-cta">
<a href="#" class="button"><span class="button-label">Weiter zum Artikel</span></a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="teaserList has-linklists">
<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="teaserInset is-clickable has-linklist">
<div class="teaserInset-image">
<a href="#" title="Weiter zum Artikel">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Beschreibung des Teaser Images" />
</figure>
</a>
</div>
<div class="teaserInset-content">
<h3 class="teaserInset-heading">
<span class="kicker">
Thema
</span>
<span class="teaserInset-title">
<a href="#" title="Weiter zum Artikel">Ich bin der Titel</a>
</span>
</h3>
<div class="teaserInset-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="teaserInset-cta">
<a href="#" class="button"><span class="button-label">Weiter zum Artikel</span></a>
</div>
</div>
<div class="teaserInset-linklist">
<div class="linkList">
<div class="linkList-title"><strong>Ich bin der Titel</strong></div>
<ul class="linkList-list">
<li class="linkList-item">
<a href="#" class="link"><span class="link-label">Ich bin ein Link</span><svg class="icon is-arrow-right">
<use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>
</a>
</li>
<li class="linkList-item">
<a href="#" class="link"><span class="link-label">Noch ein zweiter Link</span><svg class="icon is-arrow-right">
<use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>
</a>
</li>
<li class="linkList-item">
<a href="#" class="link"><span class="link-label">Ein Weiterer</span><svg class="icon is-arrow-right">
<use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="teaserList-item">
<div class="teaserInset is-clickable has-linklist">
<div class="teaserInset-image">
<a href="#" title="Weiter zum Artikel">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Beschreibung des Teaser Images" />
</figure>
</a>
</div>
<div class="teaserInset-content">
<h3 class="teaserInset-heading">
<span class="kicker">
Thema
</span>
<span class="teaserInset-title">
<a href="#" title="Weiter zum Artikel">Ich bin der Titel</a>
</span>
</h3>
<div class="teaserInset-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="teaserInset-cta">
<a href="#" class="button"><span class="button-label">Weiter zum Artikel</span></a>
</div>
</div>
<div class="teaserInset-linklist">
<div class="linkList">
<div class="linkList-title"><strong>Ich bin der Titel</strong></div>
<ul class="linkList-list">
<li class="linkList-item">
<a href="#" class="link"><span class="link-label">Ich bin ein Link</span><svg class="icon is-arrow-right">
<use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="teaserList-item">
<div class="teaserInset is-clickable has-linklist">
<div class="teaserInset-image">
<a href="#" title="Weiter zum Artikel">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Beschreibung des Teaser Images" />
</figure>
</a>
</div>
<div class="teaserInset-content">
<h3 class="teaserInset-heading">
<span class="kicker">
Thema
</span>
<span class="teaserInset-title">
<a href="#" title="Weiter zum Artikel">Ich bin der Titel</a>
</span>
</h3>
<div class="teaserInset-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="teaserInset-cta">
<a href="#" class="button"><span class="button-label">Weiter zum Artikel</span></a>
</div>
</div>
<div class="teaserInset-linklist">
<div class="linkList">
<div class="linkList-title"><strong>Ich bin der Titel</strong></div>
<ul class="linkList-list">
<li class="linkList-item">
<a href="#" class="link"><span class="link-label">Ich bin ein Link</span><svg class="icon is-arrow-right">
<use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>
</a>
</li>
<li class="linkList-item">
<a href="#" class="link"><span class="link-label">Noch ein zweiter Link</span><svg class="icon is-arrow-right">
<use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>
</a>
</li>
<li class="linkList-item">
<a href="#" class="link"><span class="link-label">Ein Weiterer</span><svg class="icon is-arrow-right">
<use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="doc-variant">
<header class="doc-variant-header">
<h2 class="doc-title">With Download Items</h2>
<div class="doc-variant-configuration">
</div>
</header>
<div class="teaserList">
<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="downloadItem is-large" data-type="document">
<div class="downloadItem-image">
<a href="#" title="Download Datei">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-document.jpg" alt="Beschreibung des Teaser Images" />
</figure>
</a>
</div>
<div class="downloadItem-content">
<div class="downloadItem-metadata">
<span class="downloadItem-metadata-item is-topic">Topic</span>
<span class="downloadItem-metadata-item is-type">Download</span>
<span class="downloadItem-metadata-item is-filetype">Unknown</span>
<span class="downloadItem-metadata-item is-filesize">1.024 KB</span>
</div>
<div class="downloadItem-title">
<a href="#" title="Download Datei"><strong>Ich bin der Titel</strong></a>
</div>
<div class="downloadItem-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>
<div class="downloadItem-interactions">
<a href="#" class="button is-icon-only"><svg class="icon is-download-simple">
<use href="../../icons/icons-bold.svg#icon--download-simple" xlink:href="../../icons/icons-bold.svg#icon--download-simple"></use>
</svg>
<span class="button-label">Download Datei</span></a>
<a href="#" class="button is-secondary is-icon-only"><svg class="icon is-share-fat">
<use href="../../icons/icons-bold.svg#icon--share-fat" xlink:href="../../icons/icons-bold.svg#icon--share-fat"></use>
</svg>
<span class="button-label">Versenden</span></a>
</div>
</div>
</div>
<div class="teaserList-item">
<div class="downloadItem is-large" data-type="document">
<div class="downloadItem-image">
<a href="#" title="Download Datei">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-document.jpg" alt="Beschreibung des Teaser Images" />
</figure>
</a>
</div>
<div class="downloadItem-content">
<div class="downloadItem-metadata">
<span class="downloadItem-metadata-item is-topic">Topic</span>
<span class="downloadItem-metadata-item is-type">Download</span>
<span class="downloadItem-metadata-item is-filetype">Unknown</span>
<span class="downloadItem-metadata-item is-filesize">1.024 KB</span>
</div>
<div class="downloadItem-title">
<a href="#" title="Download Datei"><strong>Ich bin der Titel</strong></a>
</div>
<div class="downloadItem-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>
<div class="downloadItem-interactions">
<a href="#" class="button is-icon-only"><svg class="icon is-download-simple">
<use href="../../icons/icons-bold.svg#icon--download-simple" xlink:href="../../icons/icons-bold.svg#icon--download-simple"></use>
</svg>
<span class="button-label">Download Datei</span></a>
<a href="#" class="button is-secondary is-icon-only"><svg class="icon is-share-fat">
<use href="../../icons/icons-bold.svg#icon--share-fat" xlink:href="../../icons/icons-bold.svg#icon--share-fat"></use>
</svg>
<span class="button-label">Versenden</span></a>
</div>
</div>
</div>
<div class="teaserList-item">
<div class="downloadItem is-large" data-type="document">
<div class="downloadItem-image">
<a href="#" title="Download Datei">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-document.jpg" alt="Beschreibung des Teaser Images" />
</figure>
</a>
</div>
<div class="downloadItem-content">
<div class="downloadItem-metadata">
<span class="downloadItem-metadata-item is-topic">Topic</span>
<span class="downloadItem-metadata-item is-type">Download</span>
<span class="downloadItem-metadata-item is-filetype">Unknown</span>
<span class="downloadItem-metadata-item is-filesize">1.024 KB</span>
</div>
<div class="downloadItem-title">
<a href="#" title="Download Datei"><strong>Ich bin der Titel</strong></a>
</div>
<div class="downloadItem-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>
<div class="downloadItem-interactions">
<a href="#" class="button is-icon-only"><svg class="icon is-download-simple">
<use href="../../icons/icons-bold.svg#icon--download-simple" xlink:href="../../icons/icons-bold.svg#icon--download-simple"></use>
</svg>
<span class="button-label">Download Datei</span></a>
<a href="#" class="button is-secondary is-icon-only"><svg class="icon is-share-fat">
<use href="../../icons/icons-bold.svg#icon--share-fat" xlink:href="../../icons/icons-bold.svg#icon--share-fat"></use>
</svg>
<span class="button-label">Versenden</span></a>
</div>
</div>
</div>
</div>
</div>
<div class="teaserList">
<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="downloadItem">
<div class="downloadItem-image">
<a href="#" title="Download Datei">
</a>
</div>
<div class="downloadItem-content">
<div class="downloadItem-metadata">
<span class="downloadItem-metadata-item is-topic">Topic</span>
<span class="downloadItem-metadata-item is-type">Download</span>
<span class="downloadItem-metadata-item is-filetype">Unknown</span>
<span class="downloadItem-metadata-item is-filesize">1.024 KB</span>
</div>
<div class="downloadItem-title">
<a href="#" title="Download Datei"><strong>Ich bin der Titel</strong></a>
</div>
<div class="downloadItem-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>
<div class="downloadItem-interactions">
<a href="#" class="button is-icon-only"><svg class="icon is-download-simple">
<use href="../../icons/icons-bold.svg#icon--download-simple" xlink:href="../../icons/icons-bold.svg#icon--download-simple"></use>
</svg>
<span class="button-label">Download Datei</span></a>
<a href="#" class="button is-secondary is-icon-only"><svg class="icon is-share-fat">
<use href="../../icons/icons-bold.svg#icon--share-fat" xlink:href="../../icons/icons-bold.svg#icon--share-fat"></use>
</svg>
<span class="button-label">Versenden</span></a>
</div>
</div>
</div>
<div class="teaserList-item">
<div class="downloadItem">
<div class="downloadItem-image">
<a href="#" title="Download Datei">
</a>
</div>
<div class="downloadItem-content">
<div class="downloadItem-metadata">
<span class="downloadItem-metadata-item is-topic">Topic</span>
<span class="downloadItem-metadata-item is-type">Download</span>
<span class="downloadItem-metadata-item is-filetype">Unknown</span>
<span class="downloadItem-metadata-item is-filesize">1.024 KB</span>
</div>
<div class="downloadItem-title">
<a href="#" title="Download Datei"><strong>Ich bin der Titel</strong></a>
</div>
<div class="downloadItem-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>
<div class="downloadItem-interactions">
<a href="#" class="button is-icon-only"><svg class="icon is-download-simple">
<use href="../../icons/icons-bold.svg#icon--download-simple" xlink:href="../../icons/icons-bold.svg#icon--download-simple"></use>
</svg>
<span class="button-label">Download Datei</span></a>
<a href="#" class="button is-secondary is-icon-only"><svg class="icon is-share-fat">
<use href="../../icons/icons-bold.svg#icon--share-fat" xlink:href="../../icons/icons-bold.svg#icon--share-fat"></use>
</svg>
<span class="button-label">Versenden</span></a>
</div>
</div>
</div>
<div class="teaserList-item">
<div class="downloadItem">
<div class="downloadItem-image">
<a href="#" title="Download Datei">
</a>
</div>
<div class="downloadItem-content">
<div class="downloadItem-metadata">
<span class="downloadItem-metadata-item is-topic">Topic</span>
<span class="downloadItem-metadata-item is-type">Download</span>
<span class="downloadItem-metadata-item is-filetype">Unknown</span>
<span class="downloadItem-metadata-item is-filesize">1.024 KB</span>
</div>
<div class="downloadItem-title">
<a href="#" title="Download Datei"><strong>Ich bin der Titel</strong></a>
</div>
<div class="downloadItem-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>
<div class="downloadItem-interactions">
<a href="#" class="button is-icon-only"><svg class="icon is-download-simple">
<use href="../../icons/icons-bold.svg#icon--download-simple" xlink:href="../../icons/icons-bold.svg#icon--download-simple"></use>
</svg>
<span class="button-label">Download Datei</span></a>
<a href="#" class="button is-secondary is-icon-only"><svg class="icon is-share-fat">
<use href="../../icons/icons-bold.svg#icon--share-fat" xlink:href="../../icons/icons-bold.svg#icon--share-fat"></use>
</svg>
<span class="button-label">Versenden</span></a>
</div>
</div>
</div>
</div>
</div>
<div class="teaserList">
<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="downloadItem is-small">
<div class="downloadItem-image">
<a href="#" title="Download Datei">
</a>
</div>
<div class="downloadItem-content">
<div class="downloadItem-metadata">
<span class="downloadItem-metadata-item is-topic">Topic</span>
<span class="downloadItem-metadata-item is-type">Download</span>
<span class="downloadItem-metadata-item is-filetype">Unknown</span>
<span class="downloadItem-metadata-item is-filesize">1.024 KB</span>
</div>
<div class="downloadItem-title">
<a href="#" title="Download Datei"><strong>Ich bin der Titel</strong></a>
</div>
<div class="downloadItem-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>
<div class="downloadItem-interactions">
<a href="#" class="button is-icon-only"><svg class="icon is-download-simple">
<use href="../../icons/icons-bold.svg#icon--download-simple" xlink:href="../../icons/icons-bold.svg#icon--download-simple"></use>
</svg>
<span class="button-label">Download Datei</span></a>
<a href="#" class="button is-secondary is-icon-only"><svg class="icon is-share-fat">
<use href="../../icons/icons-bold.svg#icon--share-fat" xlink:href="../../icons/icons-bold.svg#icon--share-fat"></use>
</svg>
<span class="button-label">Versenden</span></a>
</div>
</div>
</div>
<div class="teaserList-item">
<div class="downloadItem is-small">
<div class="downloadItem-image">
<a href="#" title="Download Datei">
</a>
</div>
<div class="downloadItem-content">
<div class="downloadItem-metadata">
<span class="downloadItem-metadata-item is-topic">Topic</span>
<span class="downloadItem-metadata-item is-type">Download</span>
<span class="downloadItem-metadata-item is-filetype">Unknown</span>
<span class="downloadItem-metadata-item is-filesize">1.024 KB</span>
</div>
<div class="downloadItem-title">
<a href="#" title="Download Datei"><strong>Ich bin ein sehr langer und deshalb unter bestimmten Voraussetzungen mehrzeiliger Titel</strong></a>
</div>
<div class="downloadItem-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>
<div class="downloadItem-interactions">
<a href="#" class="button is-icon-only"><svg class="icon is-download-simple">
<use href="../../icons/icons-bold.svg#icon--download-simple" xlink:href="../../icons/icons-bold.svg#icon--download-simple"></use>
</svg>
<span class="button-label">Download Datei</span></a>
<a href="#" class="button is-secondary is-icon-only"><svg class="icon is-share-fat">
<use href="../../icons/icons-bold.svg#icon--share-fat" xlink:href="../../icons/icons-bold.svg#icon--share-fat"></use>
</svg>
<span class="button-label">Versenden</span></a>
</div>
</div>
</div>
<div class="teaserList-item">
<div class="downloadItem is-small">
<div class="downloadItem-image">
<a href="#" title="Download Datei">
</a>
</div>
<div class="downloadItem-content">
<div class="downloadItem-metadata">
<span class="downloadItem-metadata-item is-topic">Topic</span>
<span class="downloadItem-metadata-item is-type">Download</span>
<span class="downloadItem-metadata-item is-filetype">Unknown</span>
<span class="downloadItem-metadata-item is-filesize">1.024 KB</span>
</div>
<div class="downloadItem-title">
<a href="#" title="Download Datei"><strong>Ich bin der Titel</strong></a>
</div>
<div class="downloadItem-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>
<div class="downloadItem-interactions">
<a href="#" class="button is-icon-only"><svg class="icon is-download-simple">
<use href="../../icons/icons-bold.svg#icon--download-simple" xlink:href="../../icons/icons-bold.svg#icon--download-simple"></use>
</svg>
<span class="button-label">Download Datei</span></a>
<a href="#" class="button is-secondary is-icon-only"><svg class="icon is-share-fat">
<use href="../../icons/icons-bold.svg#icon--share-fat" xlink:href="../../icons/icons-bold.svg#icon--share-fat"></use>
</svg>
<span class="button-label">Versenden</span></a>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="doc-variant">
<header class="doc-variant-header">
<h2 class="doc-title">With News Teasers</h2>
<div class="doc-variant-configuration">
</div>
</header>
<div class="teaserList has-newsteasers">
<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>
<nav class="paginationBar" aria-label="pagination">
<ul class="paginationBar-list">
<li class="paginationBar-item" data-direction="previous">
<span>Vorherige Seite</span>
</li>
<li class="paginationBar-item">
<a href="#" title="1">1</a>
</li>
<li class="paginationBar-item" aria-current="page">
<a href="#" title="2">2</a>
</li>
<li class="paginationBar-item">
<a href="#" title="3">3</a>
</li>
<li class="paginationBar-item">
<span>…</span>
</li>
<li class="paginationBar-item">
<a href="#" title="150">150</a>
</li>
<li class="paginationBar-item" data-direction="next">
<a href="#" title="Nächste Seite">Nächste Seite</a>
</li>
</ul>
</nav>
<div class="teaserList-list">
<div class="teaserList-item">
<div class="newsTeaser">
<div class="newsTeaser-content">
<div class="newsTeaser-metadata">
<span class="newsTeaser-metadata-item is-date">01.01.2024</span>
</div>
<div class="newsTeaser-notice">
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.
</div>
<div class="newsTeaser-title">
<strong>Ich bin der Titel</strong>
</div>
</div>
<div class="newsTeaser-interactions">
<a href="#" class="button is-small is-icon-only"><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">News anzeigen</span></a>
</div>
</div>
</div>
<div class="teaserList-item">
<div class="newsTeaser">
<div class="newsTeaser-content">
<div class="newsTeaser-metadata">
<span class="newsTeaser-metadata-item is-date">01.01.2024</span>
</div>
<div class="newsTeaser-notice">
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.
</div>
<div class="newsTeaser-title">
<strong>Ich bin der Titel</strong>
</div>
</div>
<div class="newsTeaser-interactions">
<a href="#" class="button is-small is-icon-only"><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">News anzeigen</span></a>
</div>
</div>
</div>
<div class="teaserList-item">
<div class="newsTeaser">
<div class="newsTeaser-content">
<div class="newsTeaser-metadata">
<span class="newsTeaser-metadata-item is-date">01.01.2024</span>
</div>
<div class="newsTeaser-notice">
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.
</div>
<div class="newsTeaser-title">
<strong>Ich bin der Titel</strong>
</div>
</div>
<div class="newsTeaser-interactions">
<a href="#" class="button is-small is-icon-only"><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">News anzeigen</span></a>
</div>
</div>
</div>
</div>
<nav class="paginationBar" aria-label="pagination">
<ul class="paginationBar-list">
<li class="paginationBar-item" data-direction="previous">
<span>Vorherige Seite</span>
</li>
<li class="paginationBar-item">
<a href="#" title="1">1</a>
</li>
<li class="paginationBar-item" aria-current="page">
<a href="#" title="2">2</a>
</li>
<li class="paginationBar-item">
<a href="#" title="3">3</a>
</li>
<li class="paginationBar-item">
<span>…</span>
</li>
<li class="paginationBar-item">
<a href="#" title="150">150</a>
</li>
<li class="paginationBar-item" data-direction="next">
<a href="#" title="Nächste Seite">Nächste Seite</a>
</li>
</ul>
</nav>
</div>
</section>
<section class="doc-variant">
<header class="doc-variant-header">
<h2 class="doc-title">With Event Teasers</h2>
<div class="doc-variant-configuration">
</div>
</header>
<div class="teaserList has-eventteasers">
<div class="teaserList-list">
<div class="teaserList-item">
<div class="eventTeaser">
<div class="eventTeaser-image">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Beschreibung des Teaser Images" />
</figure>
</div>
<div class="eventTeaser-content">
<header class="eventTeaser-header">
<div class="dateBadge">
<time datetime="2024-02-28" class="dateBadge-start">28 Feb 2024</time> <span class="dateBadge-separator">–</span> <time datetime="2024-03-03" class="dateBadge-end">3 Mär 2024</time>
</div>
<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-square-out">
<use href="../../icons/icons-bold.svg#icon--arrow-square-out" xlink:href="../../icons/icons-bold.svg#icon--arrow-square-out"></use>
</svg>
<span class="button-label">Zur Website</span></a>
<a href="#" class="button is-secondary" data-icon-position="right"><svg class="icon is-calendar-plus">
<use href="../../icons/icons-bold.svg#icon--calendar-plus" xlink:href="../../icons/icons-bold.svg#icon--calendar-plus"></use>
</svg>
<span class="button-label">Termin speichern</span></a>
</div>
</footer>
</div>
</div>
</div>
<div class="teaserList-item">
<div class="eventTeaser">
<div class="eventTeaser-image">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Beschreibung des Teaser Images" />
</figure>
</div>
<div class="eventTeaser-content">
<header class="eventTeaser-header">
<div class="dateBadge">
<time datetime="2024-02-28" class="dateBadge-start">28 Feb 2024</time> <span class="dateBadge-separator">–</span> <time datetime="2024-03-03" class="dateBadge-end">3 Mär 2024</time>
</div>
<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-square-out">
<use href="../../icons/icons-bold.svg#icon--arrow-square-out" xlink:href="../../icons/icons-bold.svg#icon--arrow-square-out"></use>
</svg>
<span class="button-label">Zur Website</span></a>
<a href="#" class="button is-secondary" data-icon-position="right"><svg class="icon is-calendar-plus">
<use href="../../icons/icons-bold.svg#icon--calendar-plus" xlink:href="../../icons/icons-bold.svg#icon--calendar-plus"></use>
</svg>
<span class="button-label">Termin speichern</span></a>
</div>
</footer>
</div>
</div>
</div>
<div class="teaserList-item">
<div class="eventTeaser">
<div class="eventTeaser-image">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Beschreibung des Teaser Images" />
</figure>
</div>
<div class="eventTeaser-content">
<header class="eventTeaser-header">
<div class="dateBadge">
<time datetime="2024-02-28" class="dateBadge-start">28 Feb 2024</time> <span class="dateBadge-separator">–</span> <time datetime="2024-03-03" class="dateBadge-end">3 Mär 2024</time>
</div>
<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-square-out">
<use href="../../icons/icons-bold.svg#icon--arrow-square-out" xlink:href="../../icons/icons-bold.svg#icon--arrow-square-out"></use>
</svg>
<span class="button-label">Zur Website</span></a>
<a href="#" class="button is-secondary" data-icon-position="right"><svg class="icon is-calendar-plus">
<use href="../../icons/icons-bold.svg#icon--calendar-plus" xlink:href="../../icons/icons-bold.svg#icon--calendar-plus"></use>
</svg>
<span class="button-label">Termin speichern</span></a>
</div>
</footer>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="doc-variant">
<header class="doc-variant-header">
<h2 class="doc-title">With Pagination</h2>
<div class="doc-variant-configuration">
</div>
</header>
<div class="teaserList">
<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>
<nav class="paginationBar" aria-label="pagination">
<ul class="paginationBar-list">
<li class="paginationBar-item" data-direction="previous">
<span>Vorherige Seite</span>
</li>
<li class="paginationBar-item">
<a href="#" title="1">1</a>
</li>
<li class="paginationBar-item" aria-current="page">
<a href="#" title="2">2</a>
</li>
<li class="paginationBar-item">
<a href="#" title="3">3</a>
</li>
<li class="paginationBar-item">
<span>…</span>
</li>
<li class="paginationBar-item">
<a href="#" title="150">150</a>
</li>
<li class="paginationBar-item" data-direction="next">
<a href="#" title="Nächste Seite">Nächste Seite</a>
</li>
</ul>
</nav>
<div class="teaserList-list">
<div class="teaserList-item">
<div class="teaserInset is-clickable">
<div class="teaserInset-image">
<a href="#" title="Weiter zum Artikel">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Beschreibung des Teaser Images" />
</figure>
</a>
</div>
<div class="teaserInset-content">
<h3 class="teaserInset-heading">
<span class="kicker">
Thema
</span>
<span class="teaserInset-title">
<a href="#" title="Weiter zum Artikel">Ich bin der Titel</a>
</span>
</h3>
<div class="teaserInset-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="teaserInset-cta">
<a href="#" class="button"><span class="button-label">Weiter zum Artikel</span></a>
</div>
</div>
</div>
</div>
<div class="teaserList-item">
<div class="teaserInset is-clickable">
<div class="teaserInset-image">
<a href="#" title="Weiter zum Artikel">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Beschreibung des Teaser Images" />
</figure>
</a>
</div>
<div class="teaserInset-content">
<h3 class="teaserInset-heading">
<span class="kicker">
Thema
</span>
<span class="teaserInset-title">
<a href="#" title="Weiter zum Artikel">Ich bin der Titel</a>
</span>
</h3>
<div class="teaserInset-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="teaserInset-cta">
<a href="#" class="button"><span class="button-label">Weiter zum Artikel</span></a>
</div>
</div>
</div>
</div>
<div class="teaserList-item">
<div class="teaserInset is-clickable">
<div class="teaserInset-image">
<a href="#" title="Weiter zum Artikel">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Beschreibung des Teaser Images" />
</figure>
</a>
</div>
<div class="teaserInset-content">
<h3 class="teaserInset-heading">
<span class="kicker">
Thema
</span>
<span class="teaserInset-title">
<a href="#" title="Weiter zum Artikel">Ich bin der Titel</a>
</span>
</h3>
<div class="teaserInset-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="teaserInset-cta">
<a href="#" class="button"><span class="button-label">Weiter zum Artikel</span></a>
</div>
</div>
</div>
</div>
</div>
<nav class="paginationBar" aria-label="pagination">
<ul class="paginationBar-list">
<li class="paginationBar-item" data-direction="previous">
<span>Vorherige Seite</span>
</li>
<li class="paginationBar-item">
<a href="#" title="1">1</a>
</li>
<li class="paginationBar-item" aria-current="page">
<a href="#" title="2">2</a>
</li>
<li class="paginationBar-item">
<a href="#" title="3">3</a>
</li>
<li class="paginationBar-item">
<span>…</span>
</li>
<li class="paginationBar-item">
<a href="#" title="150">150</a>
</li>
<li class="paginationBar-item" data-direction="next">
<a href="#" title="Nächste Seite">Nächste Seite</a>
</li>
</ul>
</nav>
</div>
</section>
<!-- Default -->
<div class="teaserList{{#if newsteasers}} has-newsteasers{{/if}}{{#if eventteasers}} has-eventteasers{{/if}}{{#if teaserinsets.[0].linklist}} has-linklists{{/if}}{{#modifier}} {{.}}{{/modifier}}">
{{#title}}
<h3 class="teaserList-title">{{{.}}}</h3>
{{/title}}
{{#description}}
<div class="teaserList-description">
{{{.}}}
</div>
{{/description}}
{{#paginationbar}}
{{render '@paginationbar' (contextData '@teaserlist' this) merge=true}}
{{/paginationbar}}
<div class="teaserList-list">
{{#downloaditems}}
<div class="teaserList-item">
{{render '@downloaditem' (contextData '@teaserlist' this) merge=true}}
</div>
{{/downloaditems}}
{{#eventteasers}}
<div class="teaserList-item">
{{render '@eventteaser' (contextData '@teaserlist' this) merge=true}}
</div>
{{/eventteasers}}
{{#newsteasers}}
<div class="teaserList-item">
{{render '@newsteaser' (contextData '@teaserlist' this) merge=true}}
</div>
{{/newsteasers}}
{{#teaserinsets}}
<div class="teaserList-item">
{{render '@teaserinset' (contextData '@teaserlist' this) merge=true}}
</div>
{{/teaserinsets}}
</div>
{{#paginationbar}}
{{render '@paginationbar' (contextData '@teaserlist' this) merge=true}}
{{/paginationbar}}
</div>
<!-- With Teaserinsets -->
<div class="teaserList{{#if newsteasers}} has-newsteasers{{/if}}{{#if eventteasers}} has-eventteasers{{/if}}{{#if teaserinsets.[0].linklist}} has-linklists{{/if}}{{#modifier}} {{.}}{{/modifier}}">
{{#title}}
<h3 class="teaserList-title">{{{.}}}</h3>
{{/title}}
{{#description}}
<div class="teaserList-description">
{{{.}}}
</div>
{{/description}}
{{#paginationbar}}
{{render '@paginationbar' (contextData '@teaserlist' this) merge=true}}
{{/paginationbar}}
<div class="teaserList-list">
{{#downloaditems}}
<div class="teaserList-item">
{{render '@downloaditem' (contextData '@teaserlist' this) merge=true}}
</div>
{{/downloaditems}}
{{#eventteasers}}
<div class="teaserList-item">
{{render '@eventteaser' (contextData '@teaserlist' this) merge=true}}
</div>
{{/eventteasers}}
{{#newsteasers}}
<div class="teaserList-item">
{{render '@newsteaser' (contextData '@teaserlist' this) merge=true}}
</div>
{{/newsteasers}}
{{#teaserinsets}}
<div class="teaserList-item">
{{render '@teaserinset' (contextData '@teaserlist' this) merge=true}}
</div>
{{/teaserinsets}}
</div>
{{#paginationbar}}
{{render '@paginationbar' (contextData '@teaserlist' this) merge=true}}
{{/paginationbar}}
</div>
<!-- With Teaserinsets Full Width -->
<div class="teaserList{{#if newsteasers}} has-newsteasers{{/if}}{{#if eventteasers}} has-eventteasers{{/if}}{{#if teaserinsets.[0].linklist}} has-linklists{{/if}}{{#modifier}} {{.}}{{/modifier}}">
{{#title}}
<h3 class="teaserList-title">{{{.}}}</h3>
{{/title}}
{{#description}}
<div class="teaserList-description">
{{{.}}}
</div>
{{/description}}
{{#paginationbar}}
{{render '@paginationbar' (contextData '@teaserlist' this) merge=true}}
{{/paginationbar}}
<div class="teaserList-list">
{{#downloaditems}}
<div class="teaserList-item">
{{render '@downloaditem' (contextData '@teaserlist' this) merge=true}}
</div>
{{/downloaditems}}
{{#eventteasers}}
<div class="teaserList-item">
{{render '@eventteaser' (contextData '@teaserlist' this) merge=true}}
</div>
{{/eventteasers}}
{{#newsteasers}}
<div class="teaserList-item">
{{render '@newsteaser' (contextData '@teaserlist' this) merge=true}}
</div>
{{/newsteasers}}
{{#teaserinsets}}
<div class="teaserList-item">
{{render '@teaserinset' (contextData '@teaserlist' this) merge=true}}
</div>
{{/teaserinsets}}
</div>
{{#paginationbar}}
{{render '@paginationbar' (contextData '@teaserlist' this) merge=true}}
{{/paginationbar}}
</div>
<!-- With Teaserinsets With Linklist -->
<div class="teaserList{{#if newsteasers}} has-newsteasers{{/if}}{{#if eventteasers}} has-eventteasers{{/if}}{{#if teaserinsets.[0].linklist}} has-linklists{{/if}}{{#modifier}} {{.}}{{/modifier}}">
{{#title}}
<h3 class="teaserList-title">{{{.}}}</h3>
{{/title}}
{{#description}}
<div class="teaserList-description">
{{{.}}}
</div>
{{/description}}
{{#paginationbar}}
{{render '@paginationbar' (contextData '@teaserlist' this) merge=true}}
{{/paginationbar}}
<div class="teaserList-list">
{{#downloaditems}}
<div class="teaserList-item">
{{render '@downloaditem' (contextData '@teaserlist' this) merge=true}}
</div>
{{/downloaditems}}
{{#eventteasers}}
<div class="teaserList-item">
{{render '@eventteaser' (contextData '@teaserlist' this) merge=true}}
</div>
{{/eventteasers}}
{{#newsteasers}}
<div class="teaserList-item">
{{render '@newsteaser' (contextData '@teaserlist' this) merge=true}}
</div>
{{/newsteasers}}
{{#teaserinsets}}
<div class="teaserList-item">
{{render '@teaserinset' (contextData '@teaserlist' this) merge=true}}
</div>
{{/teaserinsets}}
</div>
{{#paginationbar}}
{{render '@paginationbar' (contextData '@teaserlist' this) merge=true}}
{{/paginationbar}}
</div>
<!-- With Downloaditems Large -->
<div class="teaserList{{#if newsteasers}} has-newsteasers{{/if}}{{#if eventteasers}} has-eventteasers{{/if}}{{#if teaserinsets.[0].linklist}} has-linklists{{/if}}{{#modifier}} {{.}}{{/modifier}}">
{{#title}}
<h3 class="teaserList-title">{{{.}}}</h3>
{{/title}}
{{#description}}
<div class="teaserList-description">
{{{.}}}
</div>
{{/description}}
{{#paginationbar}}
{{render '@paginationbar' (contextData '@teaserlist' this) merge=true}}
{{/paginationbar}}
<div class="teaserList-list">
{{#downloaditems}}
<div class="teaserList-item">
{{render '@downloaditem' (contextData '@teaserlist' this) merge=true}}
</div>
{{/downloaditems}}
{{#eventteasers}}
<div class="teaserList-item">
{{render '@eventteaser' (contextData '@teaserlist' this) merge=true}}
</div>
{{/eventteasers}}
{{#newsteasers}}
<div class="teaserList-item">
{{render '@newsteaser' (contextData '@teaserlist' this) merge=true}}
</div>
{{/newsteasers}}
{{#teaserinsets}}
<div class="teaserList-item">
{{render '@teaserinset' (contextData '@teaserlist' this) merge=true}}
</div>
{{/teaserinsets}}
</div>
{{#paginationbar}}
{{render '@paginationbar' (contextData '@teaserlist' this) merge=true}}
{{/paginationbar}}
</div>
<!-- With Downloaditems -->
<div class="teaserList{{#if newsteasers}} has-newsteasers{{/if}}{{#if eventteasers}} has-eventteasers{{/if}}{{#if teaserinsets.[0].linklist}} has-linklists{{/if}}{{#modifier}} {{.}}{{/modifier}}">
{{#title}}
<h3 class="teaserList-title">{{{.}}}</h3>
{{/title}}
{{#description}}
<div class="teaserList-description">
{{{.}}}
</div>
{{/description}}
{{#paginationbar}}
{{render '@paginationbar' (contextData '@teaserlist' this) merge=true}}
{{/paginationbar}}
<div class="teaserList-list">
{{#downloaditems}}
<div class="teaserList-item">
{{render '@downloaditem' (contextData '@teaserlist' this) merge=true}}
</div>
{{/downloaditems}}
{{#eventteasers}}
<div class="teaserList-item">
{{render '@eventteaser' (contextData '@teaserlist' this) merge=true}}
</div>
{{/eventteasers}}
{{#newsteasers}}
<div class="teaserList-item">
{{render '@newsteaser' (contextData '@teaserlist' this) merge=true}}
</div>
{{/newsteasers}}
{{#teaserinsets}}
<div class="teaserList-item">
{{render '@teaserinset' (contextData '@teaserlist' this) merge=true}}
</div>
{{/teaserinsets}}
</div>
{{#paginationbar}}
{{render '@paginationbar' (contextData '@teaserlist' this) merge=true}}
{{/paginationbar}}
</div>
<!-- With Downloaditems Small -->
<div class="teaserList{{#if newsteasers}} has-newsteasers{{/if}}{{#if eventteasers}} has-eventteasers{{/if}}{{#if teaserinsets.[0].linklist}} has-linklists{{/if}}{{#modifier}} {{.}}{{/modifier}}">
{{#title}}
<h3 class="teaserList-title">{{{.}}}</h3>
{{/title}}
{{#description}}
<div class="teaserList-description">
{{{.}}}
</div>
{{/description}}
{{#paginationbar}}
{{render '@paginationbar' (contextData '@teaserlist' this) merge=true}}
{{/paginationbar}}
<div class="teaserList-list">
{{#downloaditems}}
<div class="teaserList-item">
{{render '@downloaditem' (contextData '@teaserlist' this) merge=true}}
</div>
{{/downloaditems}}
{{#eventteasers}}
<div class="teaserList-item">
{{render '@eventteaser' (contextData '@teaserlist' this) merge=true}}
</div>
{{/eventteasers}}
{{#newsteasers}}
<div class="teaserList-item">
{{render '@newsteaser' (contextData '@teaserlist' this) merge=true}}
</div>
{{/newsteasers}}
{{#teaserinsets}}
<div class="teaserList-item">
{{render '@teaserinset' (contextData '@teaserlist' this) merge=true}}
</div>
{{/teaserinsets}}
</div>
{{#paginationbar}}
{{render '@paginationbar' (contextData '@teaserlist' this) merge=true}}
{{/paginationbar}}
</div>
<!-- With Newsteaser -->
<div class="teaserList{{#if newsteasers}} has-newsteasers{{/if}}{{#if eventteasers}} has-eventteasers{{/if}}{{#if teaserinsets.[0].linklist}} has-linklists{{/if}}{{#modifier}} {{.}}{{/modifier}}">
{{#title}}
<h3 class="teaserList-title">{{{.}}}</h3>
{{/title}}
{{#description}}
<div class="teaserList-description">
{{{.}}}
</div>
{{/description}}
{{#paginationbar}}
{{render '@paginationbar' (contextData '@teaserlist' this) merge=true}}
{{/paginationbar}}
<div class="teaserList-list">
{{#downloaditems}}
<div class="teaserList-item">
{{render '@downloaditem' (contextData '@teaserlist' this) merge=true}}
</div>
{{/downloaditems}}
{{#eventteasers}}
<div class="teaserList-item">
{{render '@eventteaser' (contextData '@teaserlist' this) merge=true}}
</div>
{{/eventteasers}}
{{#newsteasers}}
<div class="teaserList-item">
{{render '@newsteaser' (contextData '@teaserlist' this) merge=true}}
</div>
{{/newsteasers}}
{{#teaserinsets}}
<div class="teaserList-item">
{{render '@teaserinset' (contextData '@teaserlist' this) merge=true}}
</div>
{{/teaserinsets}}
</div>
{{#paginationbar}}
{{render '@paginationbar' (contextData '@teaserlist' this) merge=true}}
{{/paginationbar}}
</div>
<!-- With Eventteasers -->
<div class="teaserList{{#if newsteasers}} has-newsteasers{{/if}}{{#if eventteasers}} has-eventteasers{{/if}}{{#if teaserinsets.[0].linklist}} has-linklists{{/if}}{{#modifier}} {{.}}{{/modifier}}">
{{#title}}
<h3 class="teaserList-title">{{{.}}}</h3>
{{/title}}
{{#description}}
<div class="teaserList-description">
{{{.}}}
</div>
{{/description}}
{{#paginationbar}}
{{render '@paginationbar' (contextData '@teaserlist' this) merge=true}}
{{/paginationbar}}
<div class="teaserList-list">
{{#downloaditems}}
<div class="teaserList-item">
{{render '@downloaditem' (contextData '@teaserlist' this) merge=true}}
</div>
{{/downloaditems}}
{{#eventteasers}}
<div class="teaserList-item">
{{render '@eventteaser' (contextData '@teaserlist' this) merge=true}}
</div>
{{/eventteasers}}
{{#newsteasers}}
<div class="teaserList-item">
{{render '@newsteaser' (contextData '@teaserlist' this) merge=true}}
</div>
{{/newsteasers}}
{{#teaserinsets}}
<div class="teaserList-item">
{{render '@teaserinset' (contextData '@teaserlist' this) merge=true}}
</div>
{{/teaserinsets}}
</div>
{{#paginationbar}}
{{render '@paginationbar' (contextData '@teaserlist' this) merge=true}}
{{/paginationbar}}
</div>
<!-- With Pagination -->
<div class="teaserList{{#if newsteasers}} has-newsteasers{{/if}}{{#if eventteasers}} has-eventteasers{{/if}}{{#if teaserinsets.[0].linklist}} has-linklists{{/if}}{{#modifier}} {{.}}{{/modifier}}">
{{#title}}
<h3 class="teaserList-title">{{{.}}}</h3>
{{/title}}
{{#description}}
<div class="teaserList-description">
{{{.}}}
</div>
{{/description}}
{{#paginationbar}}
{{render '@paginationbar' (contextData '@teaserlist' this) merge=true}}
{{/paginationbar}}
<div class="teaserList-list">
{{#downloaditems}}
<div class="teaserList-item">
{{render '@downloaditem' (contextData '@teaserlist' this) merge=true}}
</div>
{{/downloaditems}}
{{#eventteasers}}
<div class="teaserList-item">
{{render '@eventteaser' (contextData '@teaserlist' this) merge=true}}
</div>
{{/eventteasers}}
{{#newsteasers}}
<div class="teaserList-item">
{{render '@newsteaser' (contextData '@teaserlist' this) merge=true}}
</div>
{{/newsteasers}}
{{#teaserinsets}}
<div class="teaserList-item">
{{render '@teaserinset' (contextData '@teaserlist' this) merge=true}}
</div>
{{/teaserinsets}}
</div>
{{#paginationbar}}
{{render '@paginationbar' (contextData '@teaserlist' this) merge=true}}
{{/paginationbar}}
</div>
<!-- Doc Only -->
{{#variants}}
<section class="doc-variant{{#if narrow-preview}} doc-narrow-content{{/if}}">
<header class="doc-variant-header">
{{#title}}
<h2 class="doc-title">{{{.}}}</h2>
{{/title}}
<div class="doc-variant-configuration">
{{#if modifiers}}
<ul data-label="Modifier">
{{#modifiers}}
<li>{{{.}}}</li>
{{/modifiers}}
</ul>
{{/if}}
</div>
</header>
{{#samples}}
{{render '@teaserlist' (contextData '@teaserlist' this) merge=true}}
{{/samples}}
</section>
{{/variants}}
/* Default */
{
"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"
}
/* With Teaserinsets */
{
"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",
"teaserinsets": [
{
"image": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Beschreibung des Teaser Images"
},
"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": {
"url": "#",
"label": "Weiter zum Artikel"
}
},
{
"image": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Beschreibung des Teaser Images"
},
"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": {
"url": "#",
"label": "Weiter zum Artikel"
}
},
{
"image": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Beschreibung des Teaser Images"
},
"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": {
"url": "#",
"label": "Weiter zum Artikel"
}
}
]
}
/* With Teaserinsets Full Width */
{
"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",
"modifier": "is-full-width",
"teaserinsets": [
{
"image": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Beschreibung des Teaser Images"
},
"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": {
"url": "#",
"label": "Weiter zum Artikel"
}
},
{
"image": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Beschreibung des Teaser Images"
},
"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": {
"url": "#",
"label": "Weiter zum Artikel"
}
},
{
"image": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Beschreibung des Teaser Images"
},
"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": {
"url": "#",
"label": "Weiter zum Artikel"
}
}
]
}
/* With Teaserinsets With Linklist */
{
"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",
"teaserinsets": [
{
"image": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Beschreibung des Teaser Images"
},
"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": {
"url": "#",
"label": "Weiter zum Artikel"
},
"linklist": {
"label": "Zugehörige Links",
"items": [
{
"link": {
"label": "Ich bin ein Link",
"modifier": null,
"icon": {
"id": "arrow-right"
}
}
},
{
"link": {
"label": "Noch ein zweiter Link",
"modifier": null,
"icon": {
"id": "arrow-right"
}
}
},
{
"link": {
"label": "Ein Weiterer",
"modifier": null,
"icon": {
"id": "arrow-right"
}
}
}
]
}
},
{
"linklist": {
"items": [
{
"link": {
"label": "Ich bin ein Link",
"modifier": null,
"icon": {
"id": "arrow-right"
}
}
}
]
}
},
{
"image": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Beschreibung des Teaser Images"
},
"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": {
"url": "#",
"label": "Weiter zum Artikel"
},
"linklist": {
"label": "Zugehörige Links",
"items": [
{
"link": {
"label": "Ich bin ein Link",
"modifier": null,
"icon": {
"id": "arrow-right"
}
}
},
{
"link": {
"label": "Noch ein zweiter Link",
"modifier": null,
"icon": {
"id": "arrow-right"
}
}
},
{
"link": {
"label": "Ein Weiterer",
"modifier": null,
"icon": {
"id": "arrow-right"
}
}
}
]
}
}
]
}
/* With Downloaditems Large */
{
"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",
"downloaditems": [
{
"metadata": {
"topics": [
"Topic"
],
"type": "Download",
"filetype": "Unknown",
"filesize": "1.024 KB"
},
"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",
"ctas": [
{
"is-icon-only": true,
"label": "Download Datei",
"url": "#",
"icon": {
"id": "download-simple",
"weight": "bold"
}
},
{
"is-icon-only": true,
"label": "Versenden",
"modifier": "is-secondary",
"url": "#",
"icon": {
"id": "share-fat",
"weight": "bold"
}
}
],
"modifier": "is-large",
"type": "document",
"image": {
"src": "/images/placeholder/dummy-document.jpg",
"alt": "Beschreibung des Teaser Images"
}
},
{
"metadata": {
"topics": [
"Topic"
],
"type": "Download",
"filetype": "Unknown",
"filesize": "1.024 KB"
},
"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",
"ctas": [
{
"is-icon-only": true,
"label": "Download Datei",
"url": "#",
"icon": {
"id": "download-simple",
"weight": "bold"
}
},
{
"is-icon-only": true,
"label": "Versenden",
"modifier": "is-secondary",
"url": "#",
"icon": {
"id": "share-fat",
"weight": "bold"
}
}
],
"modifier": "is-large",
"type": "document",
"image": {
"src": "/images/placeholder/dummy-document.jpg",
"alt": "Beschreibung des Teaser Images"
}
},
{
"metadata": {
"topics": [
"Topic"
],
"type": "Download",
"filetype": "Unknown",
"filesize": "1.024 KB"
},
"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",
"ctas": [
{
"is-icon-only": true,
"label": "Download Datei",
"url": "#",
"icon": {
"id": "download-simple",
"weight": "bold"
}
},
{
"is-icon-only": true,
"label": "Versenden",
"modifier": "is-secondary",
"url": "#",
"icon": {
"id": "share-fat",
"weight": "bold"
}
}
],
"modifier": "is-large",
"type": "document",
"image": {
"src": "/images/placeholder/dummy-document.jpg",
"alt": "Beschreibung des Teaser Images"
}
}
]
}
/* With Downloaditems */
{
"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",
"downloaditems": [
{
"metadata": {
"topics": [
"Topic"
],
"type": "Download",
"filetype": "Unknown",
"filesize": "1.024 KB"
},
"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",
"ctas": [
{
"is-icon-only": true,
"label": "Download Datei",
"url": "#",
"icon": {
"id": "download-simple",
"weight": "bold"
}
},
{
"is-icon-only": true,
"label": "Versenden",
"modifier": "is-secondary",
"url": "#",
"icon": {
"id": "share-fat",
"weight": "bold"
}
}
]
},
{
"metadata": {
"topics": [
"Topic"
],
"type": "Download",
"filetype": "Unknown",
"filesize": "1.024 KB"
},
"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",
"ctas": [
{
"is-icon-only": true,
"label": "Download Datei",
"url": "#",
"icon": {
"id": "download-simple",
"weight": "bold"
}
},
{
"is-icon-only": true,
"label": "Versenden",
"modifier": "is-secondary",
"url": "#",
"icon": {
"id": "share-fat",
"weight": "bold"
}
}
]
},
{
"metadata": {
"topics": [
"Topic"
],
"type": "Download",
"filetype": "Unknown",
"filesize": "1.024 KB"
},
"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",
"ctas": [
{
"is-icon-only": true,
"label": "Download Datei",
"url": "#",
"icon": {
"id": "download-simple",
"weight": "bold"
}
},
{
"is-icon-only": true,
"label": "Versenden",
"modifier": "is-secondary",
"url": "#",
"icon": {
"id": "share-fat",
"weight": "bold"
}
}
]
}
]
}
/* With Downloaditems Small */
{
"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",
"downloaditems": [
{
"metadata": {
"topics": [
"Topic"
],
"type": "Download",
"filetype": "Unknown",
"filesize": "1.024 KB"
},
"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",
"ctas": [
{
"is-icon-only": true,
"label": "Download Datei",
"url": "#",
"icon": {
"id": "download-simple",
"weight": "bold"
}
},
{
"is-icon-only": true,
"label": "Versenden",
"modifier": "is-secondary",
"url": "#",
"icon": {
"id": "share-fat",
"weight": "bold"
}
}
],
"modifier": "is-small"
},
{
"modifier": "is-small",
"title": "Ich bin ein sehr langer und deshalb unter bestimmten Voraussetzungen mehrzeiliger Titel"
},
{
"metadata": {
"topics": [
"Topic"
],
"type": "Download",
"filetype": "Unknown",
"filesize": "1.024 KB"
},
"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",
"ctas": [
{
"is-icon-only": true,
"label": "Download Datei",
"url": "#",
"icon": {
"id": "download-simple",
"weight": "bold"
}
},
{
"is-icon-only": true,
"label": "Versenden",
"modifier": "is-secondary",
"url": "#",
"icon": {
"id": "share-fat",
"weight": "bold"
}
}
],
"modifier": "is-small"
}
]
}
/* With Newsteaser */
{
"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",
"paginationbar": {
"title": null
},
"newsteasers": [
{
"metadata": {
"date": "01.01.2024",
"media": null
},
"title": "Ich bin der Titel",
"description": null,
"ctas": [
{
"is-icon-only": true,
"modifier": "is-small",
"label": "News anzeigen",
"icon": {
"id": "arrow-right",
"weight": "bold"
}
}
],
"notice": "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."
},
{
"metadata": {
"date": "01.01.2024",
"media": null
},
"title": "Ich bin der Titel",
"description": null,
"ctas": [
{
"is-icon-only": true,
"modifier": "is-small",
"label": "News anzeigen",
"icon": {
"id": "arrow-right",
"weight": "bold"
}
}
],
"notice": "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."
},
{
"metadata": {
"date": "01.01.2024",
"media": null
},
"title": "Ich bin der Titel",
"description": null,
"ctas": [
{
"is-icon-only": true,
"modifier": "is-small",
"label": "News anzeigen",
"icon": {
"id": "arrow-right",
"weight": "bold"
}
}
],
"notice": "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."
}
]
}
/* With Eventteasers */
{
"title": null,
"description": null,
"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": "Zur Website",
"icon": {
"position": "right",
"id": "arrow-square-out",
"weight": "bold"
}
},
{
"label": "Termin speichern",
"modifier": "is-secondary",
"icon": {
"position": "right",
"id": "calendar-plus",
"weight": "bold"
}
}
],
"image": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Beschreibung des Teaser Images"
},
"datebadge": {
"start": {
"datetime": "2024-02-28",
"day": 28,
"month": "Feb",
"year": 2024
},
"end": {
"datetime": "2024-03-03",
"day": 3,
"month": "Mär",
"year": 2024
}
}
},
{
"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": "Zur Website",
"icon": {
"position": "right",
"id": "arrow-square-out",
"weight": "bold"
}
},
{
"label": "Termin speichern",
"modifier": "is-secondary",
"icon": {
"position": "right",
"id": "calendar-plus",
"weight": "bold"
}
}
],
"image": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Beschreibung des Teaser Images"
},
"datebadge": {
"start": {
"datetime": "2024-02-28",
"day": 28,
"month": "Feb",
"year": 2024
},
"end": {
"datetime": "2024-03-03",
"day": 3,
"month": "Mär",
"year": 2024
}
}
},
{
"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": "Zur Website",
"icon": {
"position": "right",
"id": "arrow-square-out",
"weight": "bold"
}
},
{
"label": "Termin speichern",
"modifier": "is-secondary",
"icon": {
"position": "right",
"id": "calendar-plus",
"weight": "bold"
}
}
],
"image": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Beschreibung des Teaser Images"
},
"datebadge": {
"start": {
"datetime": "2024-02-28",
"day": 28,
"month": "Feb",
"year": 2024
},
"end": {
"datetime": "2024-03-03",
"day": 3,
"month": "Mär",
"year": 2024
}
}
}
]
}
/* With Pagination */
{
"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",
"teaserinsets": [
{
"image": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Beschreibung des Teaser Images"
},
"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": {
"url": "#",
"label": "Weiter zum Artikel"
}
},
{
"image": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Beschreibung des Teaser Images"
},
"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": {
"url": "#",
"label": "Weiter zum Artikel"
}
},
{
"image": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Beschreibung des Teaser Images"
},
"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": {
"url": "#",
"label": "Weiter zum Artikel"
}
}
],
"paginationbar": {
"title": null,
"prev": {
"label": "Vorherige Seite"
},
"next": {
"label": "Nächste Seite",
"url": "#"
},
"items": [
{
"label": 1,
"url": "#"
},
{
"label": 2,
"url": "#",
"is-current": true
},
{
"label": 3,
"url": "#"
},
{
"label": "…"
},
{
"label": 150,
"url": "#"
}
]
}
}
/* Doc Only */
{
"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",
"variants": [
{
"title": "With Teaser Insets",
"samples": [
{
"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",
"teaserinsets": [
{
"image": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Beschreibung des Teaser Images"
},
"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": {
"url": "#",
"label": "Weiter zum Artikel"
}
},
{
"image": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Beschreibung des Teaser Images"
},
"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": {
"url": "#",
"label": "Weiter zum Artikel"
}
},
{
"image": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Beschreibung des Teaser Images"
},
"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": {
"url": "#",
"label": "Weiter zum Artikel"
}
}
]
},
{
"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",
"modifier": "is-full-width",
"teaserinsets": [
{
"image": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Beschreibung des Teaser Images"
},
"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": {
"url": "#",
"label": "Weiter zum Artikel"
}
},
{
"image": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Beschreibung des Teaser Images"
},
"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": {
"url": "#",
"label": "Weiter zum Artikel"
}
},
{
"image": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Beschreibung des Teaser Images"
},
"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": {
"url": "#",
"label": "Weiter zum Artikel"
}
}
]
},
{
"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",
"teaserinsets": [
{
"image": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Beschreibung des Teaser Images"
},
"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": {
"url": "#",
"label": "Weiter zum Artikel"
},
"linklist": {
"label": "Zugehörige Links",
"items": [
{
"link": {
"label": "Ich bin ein Link",
"modifier": null,
"icon": {
"id": "arrow-right"
}
}
},
{
"link": {
"label": "Noch ein zweiter Link",
"modifier": null,
"icon": {
"id": "arrow-right"
}
}
},
{
"link": {
"label": "Ein Weiterer",
"modifier": null,
"icon": {
"id": "arrow-right"
}
}
}
]
}
},
{
"linklist": {
"items": [
{
"link": {
"label": "Ich bin ein Link",
"modifier": null,
"icon": {
"id": "arrow-right"
}
}
}
]
}
},
{
"image": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Beschreibung des Teaser Images"
},
"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": {
"url": "#",
"label": "Weiter zum Artikel"
},
"linklist": {
"label": "Zugehörige Links",
"items": [
{
"link": {
"label": "Ich bin ein Link",
"modifier": null,
"icon": {
"id": "arrow-right"
}
}
},
{
"link": {
"label": "Noch ein zweiter Link",
"modifier": null,
"icon": {
"id": "arrow-right"
}
}
},
{
"link": {
"label": "Ein Weiterer",
"modifier": null,
"icon": {
"id": "arrow-right"
}
}
}
]
}
}
]
}
]
},
{
"title": "With Download Items",
"samples": [
{
"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",
"downloaditems": [
{
"metadata": {
"topics": [
"Topic"
],
"type": "Download",
"filetype": "Unknown",
"filesize": "1.024 KB"
},
"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",
"ctas": [
{
"is-icon-only": true,
"label": "Download Datei",
"url": "#",
"icon": {
"id": "download-simple",
"weight": "bold"
}
},
{
"is-icon-only": true,
"label": "Versenden",
"modifier": "is-secondary",
"url": "#",
"icon": {
"id": "share-fat",
"weight": "bold"
}
}
],
"modifier": "is-large",
"type": "document",
"image": {
"src": "/images/placeholder/dummy-document.jpg",
"alt": "Beschreibung des Teaser Images"
}
},
{
"metadata": {
"topics": [
"Topic"
],
"type": "Download",
"filetype": "Unknown",
"filesize": "1.024 KB"
},
"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",
"ctas": [
{
"is-icon-only": true,
"label": "Download Datei",
"url": "#",
"icon": {
"id": "download-simple",
"weight": "bold"
}
},
{
"is-icon-only": true,
"label": "Versenden",
"modifier": "is-secondary",
"url": "#",
"icon": {
"id": "share-fat",
"weight": "bold"
}
}
],
"modifier": "is-large",
"type": "document",
"image": {
"src": "/images/placeholder/dummy-document.jpg",
"alt": "Beschreibung des Teaser Images"
}
},
{
"metadata": {
"topics": [
"Topic"
],
"type": "Download",
"filetype": "Unknown",
"filesize": "1.024 KB"
},
"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",
"ctas": [
{
"is-icon-only": true,
"label": "Download Datei",
"url": "#",
"icon": {
"id": "download-simple",
"weight": "bold"
}
},
{
"is-icon-only": true,
"label": "Versenden",
"modifier": "is-secondary",
"url": "#",
"icon": {
"id": "share-fat",
"weight": "bold"
}
}
],
"modifier": "is-large",
"type": "document",
"image": {
"src": "/images/placeholder/dummy-document.jpg",
"alt": "Beschreibung des Teaser Images"
}
}
]
},
{
"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",
"downloaditems": [
{
"metadata": {
"topics": [
"Topic"
],
"type": "Download",
"filetype": "Unknown",
"filesize": "1.024 KB"
},
"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",
"ctas": [
{
"is-icon-only": true,
"label": "Download Datei",
"url": "#",
"icon": {
"id": "download-simple",
"weight": "bold"
}
},
{
"is-icon-only": true,
"label": "Versenden",
"modifier": "is-secondary",
"url": "#",
"icon": {
"id": "share-fat",
"weight": "bold"
}
}
]
},
{
"metadata": {
"topics": [
"Topic"
],
"type": "Download",
"filetype": "Unknown",
"filesize": "1.024 KB"
},
"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",
"ctas": [
{
"is-icon-only": true,
"label": "Download Datei",
"url": "#",
"icon": {
"id": "download-simple",
"weight": "bold"
}
},
{
"is-icon-only": true,
"label": "Versenden",
"modifier": "is-secondary",
"url": "#",
"icon": {
"id": "share-fat",
"weight": "bold"
}
}
]
},
{
"metadata": {
"topics": [
"Topic"
],
"type": "Download",
"filetype": "Unknown",
"filesize": "1.024 KB"
},
"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",
"ctas": [
{
"is-icon-only": true,
"label": "Download Datei",
"url": "#",
"icon": {
"id": "download-simple",
"weight": "bold"
}
},
{
"is-icon-only": true,
"label": "Versenden",
"modifier": "is-secondary",
"url": "#",
"icon": {
"id": "share-fat",
"weight": "bold"
}
}
]
}
]
},
{
"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",
"downloaditems": [
{
"metadata": {
"topics": [
"Topic"
],
"type": "Download",
"filetype": "Unknown",
"filesize": "1.024 KB"
},
"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",
"ctas": [
{
"is-icon-only": true,
"label": "Download Datei",
"url": "#",
"icon": {
"id": "download-simple",
"weight": "bold"
}
},
{
"is-icon-only": true,
"label": "Versenden",
"modifier": "is-secondary",
"url": "#",
"icon": {
"id": "share-fat",
"weight": "bold"
}
}
],
"modifier": "is-small"
},
{
"modifier": "is-small",
"title": "Ich bin ein sehr langer und deshalb unter bestimmten Voraussetzungen mehrzeiliger Titel"
},
{
"metadata": {
"topics": [
"Topic"
],
"type": "Download",
"filetype": "Unknown",
"filesize": "1.024 KB"
},
"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",
"ctas": [
{
"is-icon-only": true,
"label": "Download Datei",
"url": "#",
"icon": {
"id": "download-simple",
"weight": "bold"
}
},
{
"is-icon-only": true,
"label": "Versenden",
"modifier": "is-secondary",
"url": "#",
"icon": {
"id": "share-fat",
"weight": "bold"
}
}
],
"modifier": "is-small"
}
]
}
]
},
{
"title": "With News Teasers",
"samples": [
{
"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",
"paginationbar": {
"title": null
},
"newsteasers": [
{
"metadata": {
"date": "01.01.2024",
"media": null
},
"title": "Ich bin der Titel",
"description": null,
"ctas": [
{
"is-icon-only": true,
"modifier": "is-small",
"label": "News anzeigen",
"icon": {
"id": "arrow-right",
"weight": "bold"
}
}
],
"notice": "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."
},
{
"metadata": {
"date": "01.01.2024",
"media": null
},
"title": "Ich bin der Titel",
"description": null,
"ctas": [
{
"is-icon-only": true,
"modifier": "is-small",
"label": "News anzeigen",
"icon": {
"id": "arrow-right",
"weight": "bold"
}
}
],
"notice": "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."
},
{
"metadata": {
"date": "01.01.2024",
"media": null
},
"title": "Ich bin der Titel",
"description": null,
"ctas": [
{
"is-icon-only": true,
"modifier": "is-small",
"label": "News anzeigen",
"icon": {
"id": "arrow-right",
"weight": "bold"
}
}
],
"notice": "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."
}
]
}
]
},
{
"title": "With Event Teasers",
"samples": [
{
"title": null,
"description": null,
"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": "Zur Website",
"icon": {
"position": "right",
"id": "arrow-square-out",
"weight": "bold"
}
},
{
"label": "Termin speichern",
"modifier": "is-secondary",
"icon": {
"position": "right",
"id": "calendar-plus",
"weight": "bold"
}
}
],
"image": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Beschreibung des Teaser Images"
},
"datebadge": {
"start": {
"datetime": "2024-02-28",
"day": 28,
"month": "Feb",
"year": 2024
},
"end": {
"datetime": "2024-03-03",
"day": 3,
"month": "Mär",
"year": 2024
}
}
},
{
"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": "Zur Website",
"icon": {
"position": "right",
"id": "arrow-square-out",
"weight": "bold"
}
},
{
"label": "Termin speichern",
"modifier": "is-secondary",
"icon": {
"position": "right",
"id": "calendar-plus",
"weight": "bold"
}
}
],
"image": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Beschreibung des Teaser Images"
},
"datebadge": {
"start": {
"datetime": "2024-02-28",
"day": 28,
"month": "Feb",
"year": 2024
},
"end": {
"datetime": "2024-03-03",
"day": 3,
"month": "Mär",
"year": 2024
}
}
},
{
"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": "Zur Website",
"icon": {
"position": "right",
"id": "arrow-square-out",
"weight": "bold"
}
},
{
"label": "Termin speichern",
"modifier": "is-secondary",
"icon": {
"position": "right",
"id": "calendar-plus",
"weight": "bold"
}
}
],
"image": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Beschreibung des Teaser Images"
},
"datebadge": {
"start": {
"datetime": "2024-02-28",
"day": 28,
"month": "Feb",
"year": 2024
},
"end": {
"datetime": "2024-03-03",
"day": 3,
"month": "Mär",
"year": 2024
}
}
}
]
}
]
},
{
"title": "With Pagination",
"samples": [
{
"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",
"teaserinsets": [
{
"image": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Beschreibung des Teaser Images"
},
"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": {
"url": "#",
"label": "Weiter zum Artikel"
}
},
{
"image": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Beschreibung des Teaser Images"
},
"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": {
"url": "#",
"label": "Weiter zum Artikel"
}
},
{
"image": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Beschreibung des Teaser Images"
},
"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": {
"url": "#",
"label": "Weiter zum Artikel"
}
}
],
"paginationbar": {
"title": null,
"prev": {
"label": "Vorherige Seite"
},
"next": {
"label": "Nächste Seite",
"url": "#"
},
"items": [
{
"label": 1,
"url": "#"
},
{
"label": 2,
"url": "#",
"is-current": true
},
{
"label": 3,
"url": "#"
},
{
"label": "…"
},
{
"label": 150,
"url": "#"
}
]
}
}
]
}
]
}
@import "_teaserList.styles";
%teaserList {
@include stack-spacing(section);
.teaserInset {
width: 100% !important;
}
&-title {
@extend %heading;
@include stack-spacing(0);
@include stack-spacing(default, margin-bottom);
}
&-description {
margin-bottom: calc(.8 * var(--bp-large));
}
&:has(.downloadItem:not(.is-large)) &-description {
margin-bottom: calc(.8 * var(--sp-large));
}
.paginationBar {
@include stack-spacing(0);
}
&-title:has(+ .paginationBar) {
margin-bottom: calc(var(--bp-large) - .25em);
}
&-list {
border: var(--bw) $_accent-color;
border-style: solid none;
}
.paginationBar + &-list {
margin-top: var(--bp-large);
}
&-list + .paginationBar {
margin-top: var(--bp-large);
}
&-item {
border-top: var(--bw-small) $_accent-color solid;
margin-top: calc(-1 * var(--bw-small));
&:has(.downloadItem.is-large),
&:has(.teaserInset) {
border-width: var(--bw);
margin-top: calc(-1 * var(--bw));
}
> * {
margin-top: 0 !important;
margin-bottom: 0 !important;
border: none !important;
}
}
&:has(.eventTeaser) &,
&:has(.newsTeaser) &,
&.has-eventteasers &,
&.has-newsteasers & {
&-list {
border: none;
}
&-item {
border: none;
}
}
&:has(.newsTeaser) .paginationBar + &-list,
&.has-newsteasers .paginationBar + &-list,
&:has(.newsTeaser) &-list + .paginationBar,
&.has-newsteasers &-list +.paginationBar {
margin-top: calc(2 * var(--sp));
}
&:has(.newsTeaser) &-item:not(:first-child),
&.has-newsteasers &-item:not(:first-child) {
@include stack-spacing();
}
&:has(.eventTeaser) .paginationBar + &-list,
&.has-eventteasers .paginationBar + &-list {
margin-top: var(--sp);
padding-top: 1px;
}
&:has(.eventTeaser) &-list + .paginationBar,
&.has-eventteasers &-list +.paginationBar {
margin-top: calc(var(--sp-large) + var(--sp));
}
&:has(.eventTeaser) &-item:not(:first-child),
&.has-eventteasers &-item:not(:first-child) {
@include stack-spacing(large);
}
.paginationBar {
@include stack-spacing(0);
}
&-title + .paginationBar {
margin-top: calc(var(--sp-component) - (.33 * var(--fs-hl)));
}
.paginationBar + &-list {
@include stack-spacing(component);
}
&-list + .paginationBar {
@include stack-spacing(component);
}
@include only-on-desktop(){
width: get-columns-width(8);
margin-left: auto;
margin-right: auto;
}
}
%teaserList--full-width {
@include only-on-desktop(){
width: 100%;
&.is-full-width %teaserList-description {
width: get-columns-width(8);
}
.teaserInset {
&-image {
flex: 0 0 auto;
width: get-columns-width(3, 12);
}
}
}
}
%teaserList {
&:has(.eventTeaser),
&.has-eventteasers {
@extend %teaserList--full-width;
}
&:has(.teaserInset-linklist),
&.has-linklists {
@extend %teaserList--full-width;
}
@include only-on-desktop(){
&:has(.teaserInset-linklist) &,
&.has-linklists & {
&-list {
display: grid;
grid-template-columns: get-columns-width(3, 12) 1fr max-content;
grid-template-areas: "image content linklist";
}
&-item {
grid-column: 1 / -1;
display: grid;
grid-template-columns: subgrid;
}
}
&:has(.teaserInset-linklist),
&.has-linklists {
.teaserInset {
grid-column: 1 / -1;
display: grid;
grid-template-columns: subgrid;
&-image {
width: 100%;
grid-area: image;
}
&-content {
grid-area: content;
}
&-linklist {
grid-area: linklist;
}
}
}
}
}
.teaserList {
@extend %teaserList;
&-title {
@extend %teaserList-title;
}
&-description {
@extend %teaserList-description;
}
&-list {
@extend %teaserList-list;
}
&-item {
@extend %teaserList-item;
}
&.is-full-width {
@extend %teaserList--full-width;
}
}