<div class="grid-teaser grid-teaser">
<div class="grid-teaser__inner">
<div class="grid-teaser__headline">
<h2 class="headline headline--module-2">Das ist eine Überschrift</h2>
</div>
<ul class="grid-teaser__items">
<li class="grid-teaser__item"><a class="grid-teaser__item-link" href="#">
<div class="grid-teaser__item__image">
<div class="image loading" style="padding-top: 56.25%;"><noscript><img class="image__fallback" alt="Alternativ-Text" width="400" height="225" src="https://via.placeholder.com/400x225/A0A0A6/FFFFFF.png?text=400x225" /></noscript><img class="image__img js-lazyload" alt="Alternativ-Text" width="400" height="225" data-src="https://via.placeholder.com/400x225/A0A0A6/FFFFFF.png?text=400x225" /></div>
</div>
<div class="grid-teaser__item__inner">
<h3 class="headline headline--3">Das HIDA-Team</h3>
<p>Sie sind interessiert an den Aktivitäten von HIDA? Treten Sie mit uns in Kontakt. Wir unterstützen Sie.</p><svg class="icon icon--arrow-right" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-arrow-right"></use>
</svg>
</div>
</a></li>
<li class="grid-teaser__item"><a class="grid-teaser__item-link" href="#">
<div class="grid-teaser__item__image">
<div class="image loading" style="padding-top: 56.25%;"><noscript><img class="image__fallback" alt="Alternativ-Text" width="400" height="225" src="https://via.placeholder.com/400x225/A0A0A6/FFFFFF.png?text=400x225" /></noscript><img class="image__img js-lazyload" alt="Alternativ-Text" width="400" height="225" data-src="https://via.placeholder.com/400x225/A0A0A6/FFFFFF.png?text=400x225" /></div>
</div>
<div class="grid-teaser__item__inner">
<h3 class="headline headline--3">HIDA-News</h3>
<p>Sie sind interessiert an den Aktivitäten von HIDA? Treten Sie mit uns in Kontakt.</p><svg class="icon icon--arrow-right" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-arrow-right"></use>
</svg>
</div>
</a></li>
<li class="grid-teaser__item"><a class="grid-teaser__item-link" href="#">
<div class="grid-teaser__item__image">
<div class="image loading" style="padding-top: 56.25%;"><noscript><img class="image__fallback" alt="Alternativ-Text" width="400" height="225" src="https://via.placeholder.com/400x225/A0A0A6/FFFFFF.png?text=400x225" /></noscript><img class="image__img js-lazyload" alt="Alternativ-Text" width="400" height="225" data-src="https://via.placeholder.com/400x225/A0A0A6/FFFFFF.png?text=400x225" /></div>
</div>
<div class="grid-teaser__item__inner">
<h3 class="headline headline--3">Newsletter abonnieren</h3>
<p>Sie sind interessiert an den Aktivitäten von HIDA? Treten Sie mit uns in Kontakt. Wir unterstützen Sie.</p><svg class="icon icon--arrow-right" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-arrow-right"></use>
</svg>
</div>
</a></li>
<li class="grid-teaser__item"><a class="grid-teaser__item-link" href="#">
<div class="grid-teaser__item__image">
<div class="image loading" style="padding-top: 56.25%;"><noscript><img class="image__fallback" alt="Alternativ-Text" width="400" height="225" src="https://via.placeholder.com/400x225/A0A0A6/FFFFFF.png?text=400x225" /></noscript><img class="image__img js-lazyload" alt="Alternativ-Text" width="400" height="225" data-src="https://via.placeholder.com/400x225/A0A0A6/FFFFFF.png?text=400x225" /></div>
</div>
<div class="grid-teaser__item__inner">
<h3 class="headline headline--3">Kontakt</h3>
<p>Sie sind interessiert an den Aktivitäten von HIDA? Treten Sie mit uns in Kontakt. Wir unterstützen Sie in allen Fragen der Data Science Aus-und Weiterbildung.</p><svg class="icon icon--arrow-right" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-arrow-right"></use>
</svg>
</div>
</a></li>
</ul>
</div>
</div>
#{tag || 'div'}.grid-teaser(
class=classNames(
`grid-teaser`
)
)&attributes(attr)
.grid-teaser__inner
if headline
.grid-teaser__headline
+include('@headline--module-2', headline)
ul.grid-teaser__items
each item in items
li.grid-teaser__item
a(href=item.href).grid-teaser__item-link
if item.image
.grid-teaser__item__image
+include('@image', item.image)
.grid-teaser__item__inner
if item.headline
+include('@headline--headline-3', { text: item.headline })
if item.text
p #{item.text}
if item.icon
+include('@icon', { icon: item.icon })
/* No context defined for this component. */
.grid-teaser {
padding: 0 1.5rem;
@include mq($from: m) {
padding: 0 3rem;
}
@include mq($from: xl) {
padding: 0 9rem;
}
}
.grid-teaser__headline {
margin-bottom: 5rem;
}
.grid-teaser__inner {
margin: 0 auto;
max-width: 127rem;
}
.grid-teaser__items {
display: grid;
gap: 6rem 4rem;
padding: 0;
@include mq($from: m) {
grid-template-columns: repeat(2, 1fr);
}
@include mq($from: l) {
grid-template-columns: repeat(3, 1fr);
}
@include mq($from: xl) {
gap: 8rem 4rem;
}
}
.grid-teaser__item {
display: block;
margin: 0 auto;
max-width: 40rem;
position: relative;
@include mq($from: m) {
max-width: unset;
}
@media(hover: hover) and (pointer: fine) {
&:hover {
.grid-teaser__item__headline,
.grid-teaser__item__body p {
color: $color-blue;
}
}
}
}
.grid-teaser__item-link {
display: grid;
grid-template-rows: clamp(7.5rem, 2.5rem + 4.5vw, 9.5rem) auto;
height: 100%;
}
.grid-teaser__item__inner {
background-image: linear-gradient(to bottom, #fff, #fff), svg-url('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 80"><defs/><path fill="' + #fff + '" d="M0 80V0h800v-40h800V-.09a40 40 0 0 1-11.75 28.32l-40.2 40.09A40 40 0 0 1 1519.82 80H0z"/></svg>');
background-position: left top, right bottom;
background-size: 100% calc(100% - 5rem), auto 5rem;
grid-row: 2 / 4;
margin: 0 auto;
padding: 2rem;
position: relative;
width: 86%;
p {
line-height: $line-height-small;
margin-bottom: 1rem;
margin-top: 1.2rem;
}
.icon {
color: $color-blue;
font-size: 1.4rem;
}
}