<!-- News -->
<div class="news">
<div class="news__inner">
<div class="news__tabs">
<div class="tab-bar"><a class="tab-bar__item tab-bar__item--active" href="#"><span class="tab-bar__item__text">News</span></a><a class="tab-bar__item" href="#"><span class="tab-bar__item__text">Aus der Forschung</span></a></div>
</div>
<div class="news__filter">
<div class="filter filter--single">
<div class="filter__button-open"><button class="button button--secondary" type="button"><span class="button__inner"><span class="button__text">Filter</span></span></button></div>
<div class="filter__button-close"><button class="button button--secondary" type="button"><span class="button__inner"><span class="button__text">Filter schließen</span></span></button></div>
<div class="filter__filter">
<form class="filter__filter__form" action="#">
<div class="filter__filter__item">
<div class="select"><select class="select__select">
<option value="" disabled="" selected="">Alle Meldungen</option>
<option value="">Lorem ipsum dolor sit amet sit amet</option>
<option value="">Lorem ipsum 2</option>
<option value="">Lorem ipsum 3</option>
</select></div>
</div>
</form>
</div>
</div>
</div>
<div class="news__grid">
<div class="news__grid__sizer"></div>
<div class="news__grid__item news__grid__item--large"><a class="list-item-news" href="#">
<div class="list-item-news__image">
<div class="image loading" style="padding-top: 100%;"><noscript><img class="image__fallback" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." width="600" height="600" src="https://via.placeholder.com/600x600/A0A0A6/FFFFFF.png?text=600x600" /></noscript><img class="image__img js-lazyload" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." width="600" height="600" data-src="https://via.placeholder.com/600x600/A0A0A6/FFFFFF.png?text=600x600" /></div>
</div>
<div class="list-item-news__meta"></div>
<div class="list-item-news__headline">
<h3 class="headline headline--4">Ich bin die Headline einer News</h3>
</div>
<div class="list-item-news__date">19.01.2021</div>
<div class="list-item-news__text">
<p class="bodytext">Das ist ein Teasertext lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore ipsum dolor sit amet, consetetur.</p>
</div>
<div class="list-item-news__icon"><svg class="icon icon--arrow-right" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-arrow-right"></use>
</svg></div>
</a></div>
<div class="news__grid__item"><a class="list-item-news" href="#">
<div class="list-item-news__image">
<div class="image loading" style="padding-top: 100%;"><noscript><img class="image__fallback" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." width="600" height="600" src="https://via.placeholder.com/600x600/A0A0A6/FFFFFF.png?text=600x600" /></noscript><img class="image__img js-lazyload" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." width="600" height="600" data-src="https://via.placeholder.com/600x600/A0A0A6/FFFFFF.png?text=600x600" /></div>
</div>
<div class="list-item-news__meta"></div>
<div class="list-item-news__headline">
<h3 class="headline headline--4">Ich bin die Headline einer News</h3>
</div>
<div class="list-item-news__date">19.01.2021</div>
<div class="list-item-news__text">
<p class="bodytext">Das ist ein Teasertext lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore ipsum dolor sit amet, consetetur.</p>
</div>
<div class="list-item-news__icon"><svg class="icon icon--arrow-right" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-arrow-right"></use>
</svg></div>
</a></div>
<div class="news__grid__item"><a class="list-item-news" href="#">
<div class="list-item-news__image">
<div class="image loading" style="padding-top: 100%;"><noscript><img class="image__fallback" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." width="600" height="600" src="https://via.placeholder.com/600x600/A0A0A6/FFFFFF.png?text=600x600" /></noscript><img class="image__img js-lazyload" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." width="600" height="600" data-src="https://via.placeholder.com/600x600/A0A0A6/FFFFFF.png?text=600x600" /></div>
</div>
<div class="list-item-news__meta"></div>
<div class="list-item-news__headline">
<h3 class="headline headline--4">Ich bin die Headline einer News</h3>
</div>
<div class="list-item-news__date">19.01.2021</div>
<div class="list-item-news__text">
<p class="bodytext">Das ist ein Teasertext lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore ipsum dolor sit amet, consetetur.</p>
</div>
<div class="list-item-news__icon"><svg class="icon icon--arrow-right" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-arrow-right"></use>
</svg></div>
</a></div>
<div class="news__grid__item"><a class="list-item-news" href="#">
<div class="list-item-news__meta">
<div class="list-item-news__badge">Extern</div>
<div class="list-item-news__kicker">Name Helmholtz Zentrum</div>
</div>
<div class="list-item-news__headline">
<h3 class="headline headline--4">Ich bin die Headline einer News</h3>
</div>
<div class="list-item-news__date">19.01.2021</div>
<div class="list-item-news__text">
<p class="bodytext">Das ist ein Teasertext lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore ipsum dolor sit amet, consetetur.</p>
</div>
<div class="list-item-news__icon"><svg class="icon icon--arrow-up-right" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-arrow-up-right"></use>
</svg></div>
</a></div>
<div class="news__grid__item"><a class="list-item-news" href="#">
<div class="list-item-news__meta">
<div class="list-item-news__badge">Extern</div>
<div class="list-item-news__kicker">Name Helmholtz Zentrum</div>
</div>
<div class="list-item-news__headline">
<h3 class="headline headline--4">Ich bin die Headline einer News</h3>
</div>
<div class="list-item-news__date">19.01.2021</div>
<div class="list-item-news__text">
<p class="bodytext">Das ist ein Teasertext lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore ipsum dolor sit amet, consetetur.</p>
</div>
<div class="list-item-news__icon"><svg class="icon icon--arrow-up-right" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-arrow-up-right"></use>
</svg></div>
</a></div>
<div class="news__grid__item"><a class="list-item-news" href="#">
<div class="list-item-news__meta">
<div class="list-item-news__badge">Extern</div>
<div class="list-item-news__kicker">Name Helmholtz Zentrum</div>
</div>
<div class="list-item-news__headline">
<h3 class="headline headline--4">Ich bin die Headline einer News</h3>
</div>
<div class="list-item-news__date">19.01.2021</div>
<div class="list-item-news__text">
<p class="bodytext">Das ist ein Teasertext lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore ipsum dolor sit amet, consetetur.</p>
</div>
<div class="list-item-news__icon"><svg class="icon icon--arrow-up-right" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-arrow-up-right"></use>
</svg></div>
</a></div>
<div class="news__grid__item"><a class="list-item-news" href="#">
<div class="list-item-news__image">
<div class="image loading" style="padding-top: 100%;"><noscript><img class="image__fallback" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." width="600" height="600" src="https://via.placeholder.com/600x600/A0A0A6/FFFFFF.png?text=600x600" /></noscript><img class="image__img js-lazyload" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." width="600" height="600" data-src="https://via.placeholder.com/600x600/A0A0A6/FFFFFF.png?text=600x600" /></div>
</div>
<div class="list-item-news__meta"></div>
<div class="list-item-news__headline">
<h3 class="headline headline--4">Ich bin die Headline einer News</h3>
</div>
<div class="list-item-news__date">19.01.2021</div>
<div class="list-item-news__text">
<p class="bodytext">Das ist ein Teasertext lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore ipsum dolor sit amet, consetetur.</p>
</div>
<div class="list-item-news__icon"><svg class="icon icon--arrow-right" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-arrow-right"></use>
</svg></div>
</a></div>
<div class="news__grid__item"><a class="list-item-news" href="#">
<div class="list-item-news__image">
<div class="image loading" style="padding-top: 100%;"><noscript><img class="image__fallback" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." width="600" height="600" src="https://via.placeholder.com/600x600/A0A0A6/FFFFFF.png?text=600x600" /></noscript><img class="image__img js-lazyload" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." width="600" height="600" data-src="https://via.placeholder.com/600x600/A0A0A6/FFFFFF.png?text=600x600" /></div>
</div>
<div class="list-item-news__meta"></div>
<div class="list-item-news__headline">
<h3 class="headline headline--4">Ich bin die Headline einer News</h3>
</div>
<div class="list-item-news__date">19.01.2021</div>
<div class="list-item-news__text">
<p class="bodytext">Das ist ein Teasertext lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore ipsum dolor sit amet, consetetur.</p>
</div>
<div class="list-item-news__icon"><svg class="icon icon--arrow-right" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-arrow-right"></use>
</svg></div>
</a></div>
<div class="news__grid__item news__grid__item--large"><a class="list-item-news" href="#">
<div class="list-item-news__image">
<div class="image loading" style="padding-top: 100%;"><noscript><img class="image__fallback" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." width="600" height="600" src="https://via.placeholder.com/600x600/A0A0A6/FFFFFF.png?text=600x600" /></noscript><img class="image__img js-lazyload" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." width="600" height="600" data-src="https://via.placeholder.com/600x600/A0A0A6/FFFFFF.png?text=600x600" /></div>
</div>
<div class="list-item-news__meta"></div>
<div class="list-item-news__headline">
<h3 class="headline headline--4">Ich bin die Headline einer News</h3>
</div>
<div class="list-item-news__date">19.01.2021</div>
<div class="list-item-news__text">
<p class="bodytext">Das ist ein Teasertext lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore ipsum dolor sit amet, consetetur.</p>
</div>
<div class="list-item-news__icon"><svg class="icon icon--arrow-right" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-arrow-right"></use>
</svg></div>
</a></div>
<div class="news__grid__item"><a class="list-item-news" href="#">
<div class="list-item-news__meta">
<div class="list-item-news__badge">Extern</div>
<div class="list-item-news__kicker">Name Helmholtz Zentrum</div>
</div>
<div class="list-item-news__headline">
<h3 class="headline headline--4">Ich bin die Headline einer News</h3>
</div>
<div class="list-item-news__date">19.01.2021</div>
<div class="list-item-news__text">
<p class="bodytext">Das ist ein Teasertext lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore ipsum dolor sit amet, consetetur.</p>
</div>
<div class="list-item-news__icon"><svg class="icon icon--arrow-up-right" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-arrow-up-right"></use>
</svg></div>
</a></div>
<div class="news__grid__item"><a class="list-item-news" href="#">
<div class="list-item-news__meta">
<div class="list-item-news__badge">Extern</div>
<div class="list-item-news__kicker">Name Helmholtz Zentrum</div>
</div>
<div class="list-item-news__headline">
<h3 class="headline headline--4">Ich bin die Headline einer News</h3>
</div>
<div class="list-item-news__date">19.01.2021</div>
<div class="list-item-news__text">
<p class="bodytext">Das ist ein Teasertext lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore ipsum dolor sit amet, consetetur.</p>
</div>
<div class="list-item-news__icon"><svg class="icon icon--arrow-up-right" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-arrow-up-right"></use>
</svg></div>
</a></div>
<div class="news__grid__item"><a class="list-item-news" href="#">
<div class="list-item-news__meta">
<div class="list-item-news__badge">Extern</div>
<div class="list-item-news__kicker">Name Helmholtz Zentrum</div>
</div>
<div class="list-item-news__headline">
<h3 class="headline headline--4">Ich bin die Headline einer News</h3>
</div>
<div class="list-item-news__date">19.01.2021</div>
<div class="list-item-news__text">
<p class="bodytext">Das ist ein Teasertext lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore ipsum dolor sit amet, consetetur.</p>
</div>
<div class="list-item-news__icon"><svg class="icon icon--arrow-up-right" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-arrow-up-right"></use>
</svg></div>
</a></div>
<div class="news__grid__item"><a class="list-item-news" href="#">
<div class="list-item-news__meta">
<div class="list-item-news__badge">Extern</div>
<div class="list-item-news__kicker">Name Helmholtz Zentrum</div>
</div>
<div class="list-item-news__headline">
<h3 class="headline headline--4">Ich bin die Headline einer News</h3>
</div>
<div class="list-item-news__date">19.01.2021</div>
<div class="list-item-news__text">
<p class="bodytext">Das ist ein Teasertext lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore ipsum dolor sit amet, consetetur.</p>
</div>
<div class="list-item-news__icon"><svg class="icon icon--arrow-up-right" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-arrow-up-right"></use>
</svg></div>
</a></div>
<div class="news__grid__item"><a class="list-item-news" href="#">
<div class="list-item-news__meta">
<div class="list-item-news__badge">Extern</div>
<div class="list-item-news__kicker">Name Helmholtz Zentrum</div>
</div>
<div class="list-item-news__headline">
<h3 class="headline headline--4">Ich bin die Headline einer News</h3>
</div>
<div class="list-item-news__date">19.01.2021</div>
<div class="list-item-news__text">
<p class="bodytext">Das ist ein Teasertext lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore ipsum dolor sit amet, consetetur.</p>
</div>
<div class="list-item-news__icon"><svg class="icon icon--arrow-up-right" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-arrow-up-right"></use>
</svg></div>
</a></div>
<div class="news__grid__item"><a class="list-item-news" href="#">
<div class="list-item-news__image">
<div class="image loading" style="padding-top: 100%;"><noscript><img class="image__fallback" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." width="600" height="600" src="https://via.placeholder.com/600x600/A0A0A6/FFFFFF.png?text=600x600" /></noscript><img class="image__img js-lazyload" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." width="600" height="600" data-src="https://via.placeholder.com/600x600/A0A0A6/FFFFFF.png?text=600x600" /></div>
</div>
<div class="list-item-news__meta"></div>
<div class="list-item-news__headline">
<h3 class="headline headline--4">Ich bin die Headline einer News</h3>
</div>
<div class="list-item-news__date">19.01.2021</div>
<div class="list-item-news__text">
<p class="bodytext">Das ist ein Teasertext lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore ipsum dolor sit amet, consetetur.</p>
</div>
<div class="list-item-news__icon"><svg class="icon icon--arrow-right" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-arrow-right"></use>
</svg></div>
</a></div>
<div class="news__grid__item"><a class="list-item-news" href="#">
<div class="list-item-news__image">
<div class="image loading" style="padding-top: 100%;"><noscript><img class="image__fallback" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." width="600" height="600" src="https://via.placeholder.com/600x600/A0A0A6/FFFFFF.png?text=600x600" /></noscript><img class="image__img js-lazyload" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." width="600" height="600" data-src="https://via.placeholder.com/600x600/A0A0A6/FFFFFF.png?text=600x600" /></div>
</div>
<div class="list-item-news__meta"></div>
<div class="list-item-news__headline">
<h3 class="headline headline--4">Ich bin die Headline einer News</h3>
</div>
<div class="list-item-news__date">19.01.2021</div>
<div class="list-item-news__text">
<p class="bodytext">Das ist ein Teasertext lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore ipsum dolor sit amet, consetetur.</p>
</div>
<div class="list-item-news__icon"><svg class="icon icon--arrow-right" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-arrow-right"></use>
</svg></div>
</a></div>
<div class="news__grid__item"><a class="list-item-news" href="#">
<div class="list-item-news__image">
<div class="image loading" style="padding-top: 100%;"><noscript><img class="image__fallback" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." width="600" height="600" src="https://via.placeholder.com/600x600/A0A0A6/FFFFFF.png?text=600x600" /></noscript><img class="image__img js-lazyload" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." width="600" height="600" data-src="https://via.placeholder.com/600x600/A0A0A6/FFFFFF.png?text=600x600" /></div>
</div>
<div class="list-item-news__meta"></div>
<div class="list-item-news__headline">
<h3 class="headline headline--4">Ich bin die Headline einer News</h3>
</div>
<div class="list-item-news__date">19.01.2021</div>
<div class="list-item-news__text">
<p class="bodytext">Das ist ein Teasertext lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore ipsum dolor sit amet, consetetur.</p>
</div>
<div class="list-item-news__icon"><svg class="icon icon--arrow-right" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-arrow-right"></use>
</svg></div>
</a></div>
<div class="news__grid__item"><a class="list-item-news" href="#">
<div class="list-item-news__meta">
<div class="list-item-news__badge">Extern</div>
<div class="list-item-news__kicker">Name Helmholtz Zentrum</div>
</div>
<div class="list-item-news__headline">
<h3 class="headline headline--4">Ich bin die Headline einer News</h3>
</div>
<div class="list-item-news__date">19.01.2021</div>
<div class="list-item-news__text">
<p class="bodytext">Das ist ein Teasertext lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore ipsum dolor sit amet, consetetur.</p>
</div>
<div class="list-item-news__icon"><svg class="icon icon--arrow-up-right" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-arrow-up-right"></use>
</svg></div>
</a></div>
</div>
<div class="news__paging">
<nav class="paging">
<ul class="paging__ul">
<li class="paging__li"><a class="button button--primary" href="#" disabled="disabled"><span class="button__inner"><svg class="icon icon--chevron-left" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-chevron-left"></use>
</svg><span class="button__text">Zurück</span></span></a></li>
<li class="paging__li"><a class="paging__li__a paging__li__a--act" href="#">1</a></li>
<li class="paging__li"><a class="paging__li__a" href="#">2</a></li>
<li class="paging__li"><a class="paging__li__a" href="#">3</a></li>
<li class="paging__li"><span class="paging__li__span">…</span></li>
<li class="paging__li"><a class="paging__li__a" href="#">10</a></li>
<li class="paging__li"><a class="button button--primary" href="#"><span class="button__inner"><span class="button__text">Weiter</span><svg class="icon icon--chevron-right" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-chevron-right"></use>
</svg></span></a></li>
</ul>
</nav>
</div>
</div>
</div>
<!-- News with message -->
<div class="news">
<div class="news__inner">
<div class="news__tabs">
<div class="tab-bar"><a class="tab-bar__item tab-bar__item--active" href="#"><span class="tab-bar__item__text">News</span></a><a class="tab-bar__item" href="#"><span class="tab-bar__item__text">Aus der Forschung</span></a></div>
</div>
<div class="news__filter">
<div class="filter filter--single">
<div class="filter__button-open"><button class="button button--secondary" type="button"><span class="button__inner"><span class="button__text">Filter</span></span></button></div>
<div class="filter__button-close"><button class="button button--secondary" type="button"><span class="button__inner"><span class="button__text">Filter schließen</span></span></button></div>
<div class="filter__filter">
<form class="filter__filter__form" action="#">
<div class="filter__filter__item">
<div class="select"><select class="select__select">
<option value="" disabled="" selected="">Alle Meldungen</option>
<option value="">Lorem ipsum dolor sit amet sit amet</option>
<option value="">Lorem ipsum 2</option>
<option value="">Lorem ipsum 3</option>
</select></div>
</div>
</form>
</div>
</div>
</div>
<div class="news__grid">
<div class="news__grid__sizer"></div>
</div>
<div class="news__message">
<p class="bodytext">Keine Ergebnisse.</p>
</div>
</div>
</div>
#{tag || 'div'}.news()&attributes(attr)
.news__inner
if tabs
.news__tabs
+include('@tab-bar', tabs)
if filter
.news__filter
+include('@filter', filter)
.news__grid
.news__grid__sizer
if items
each item in items
.news__grid__item(class=item.large && 'news__grid__item--large')
+include(`@${item.use}`, item.settings || {})
if message
.news__message
+include('@paragraph', message)
if paging
.news__paging
+include('@paging', paging)
/* News */
{
"tabs": {
"items": [
{
"active": true,
"title": "News",
"href": "#"
},
{
"title": "Aus der Forschung",
"href": "#"
}
]
},
"filter": {
"variant": "single",
"items": [
{
"filter": "Alle Meldungen"
}
]
},
"paging": true,
"items": [
{
"use": "list-item-news",
"large": true
},
{
"use": "list-item-news"
},
{
"use": "list-item-news"
},
{
"use": "list-item-news--external"
},
{
"use": "list-item-news--external"
},
{
"use": "list-item-news--external"
},
{
"use": "list-item-news"
},
{
"use": "list-item-news"
},
{
"use": "list-item-news",
"large": true
},
{
"use": "list-item-news--external"
},
{
"use": "list-item-news--external"
},
{
"use": "list-item-news--external"
},
{
"use": "list-item-news--external"
},
{
"use": "list-item-news--external"
},
{
"use": "list-item-news"
},
{
"use": "list-item-news"
},
{
"use": "list-item-news"
},
{
"use": "list-item-news--external"
}
]
}
/* News with message */
{
"tabs": {
"items": [
{
"active": true,
"title": "News",
"href": "#"
},
{
"title": "Aus der Forschung",
"href": "#"
}
]
},
"filter": {
"variant": "single",
"items": [
{
"filter": "Alle Meldungen"
}
]
},
"paging": null,
"message": {
"text": "Keine Ergebnisse."
}
}
import Masonry from 'masonry-layout';
const newsGrid = document.querySelector('.news__grid');
if (newsGrid) {
const msnry = new Masonry(newsGrid, {
columnWidth: '.news__grid__sizer',
itemSelector: '.news__grid__item',
percentPosition: true,
});
msnry.once('layoutComplete', () => {
newsGrid.classList.add('.news__grid--loaded');
});
msnry.layout();
}
.news {
padding: 0 1.5rem;
@include mq($from: m) {
padding: 0 3rem;
}
@include mq($from: xl) {
padding: 0 9rem;
}
}
.news__inner {
margin: 0 auto;
max-width: 126rem;
}
.news__tabs {
margin-bottom: 2.5rem;
@include mq($from: m) {
margin-bottom: 4rem;
}
}
.news__filter {
margin-bottom: 3rem;
@include mq($from: m) {
margin-bottom: 2rem;
}
}
.news__grid {
margin: 0 -2rem;
position: relative;
z-index: 1;
@include mq($from: xl) {
margin: 0 -4rem;
}
}
.news__grid__sizer,
.news__grid__item {
width: 100%;
@include mq($from: m) {
width: 50%;
}
@include mq($from: l) {
width: 25%;
}
}
.news__grid__item--large {
@include mq($from: l) {
width: 50%;
}
}
.news__grid__item {
padding: 0.5rem 2rem 3rem;
@include mq($from: m) {
padding: 0 2rem 4rem;
}
@include mq($from: xl) {
padding: 0 4rem 4rem;
}
}
.news__paging {
margin-top: 3rem;
@include mq($from: m) {
margin-top: 6rem;
}
}
.news__message {
background: $color-blue-gray;
min-height: 20rem;
padding: 2rem;
@include mq($from: m) {
min-height: 50rem;
padding: 2.5rem;
}
}
There are no notes for this item.