<div class="page-layout-xl--default">
<div class="blocks">
<a href="#" class="topic-teaser topic-list-teaser-bg-image-igel">
<div class="topic-teaser__body">
<div class="topic-teaser__caption">Schwerpunktthema</div>
<h1 class="topic-teaser__header">Themenschwerpunkt Headline</h1>
<div class="topic-teaser__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit doloremque culpa minima vero quod, optio itaque nisi deserunt, debitis ad laudantium libero, quia nemo!</div>
<div class="topic-teaser__cta">Zum Schwerpunktthema <img src="../../assets/arrow-long-right-red.svg"></div>
</div>
</a>
</div>
<div class="blocks">
<a href="#" class="topic-teaser topic-list-teaser-bg-image-ice">
<div class="topic-teaser__body">
<div class="topic-teaser__caption">Schwerpunktthema</div>
<h1 class="topic-teaser__header">Themenschwerpunkt Headline</h1>
<div class="topic-teaser__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit doloremque culpa minima vero quod, optio itaque nisi deserunt, debitis ad laudantium libero, quia nemo!</div>
<div class="topic-teaser__cta">Zum Schwerpunktthema <img src="../../assets/arrow-long-right-red.svg"></div>
</div>
</a>
</div>
<div class="blocks">
<a href="#" class="topic-teaser topic-list-teaser-bg-image-girl">
<div class="topic-teaser__body">
<div class="topic-teaser__caption">Schwerpunktthema</div>
<h1 class="topic-teaser__header">Themenschwerpunkt Headline</h1>
<div class="topic-teaser__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit doloremque culpa minima vero quod, optio itaque nisi deserunt, debitis ad laudantium libero, quia nemo!</div>
<div class="topic-teaser__cta">Zum Schwerpunktthema <img src="../../assets/arrow-long-right-red.svg"></div>
</div>
</a>
</div>
<div class="blocks">
<a href="#" class="topic-teaser topic-list-teaser-bg-image-medusa">
<div class="topic-teaser__body">
<div class="topic-teaser__caption">Schwerpunktthema</div>
<h1 class="topic-teaser__header">Themenschwerpunkt Headline</h1>
<div class="topic-teaser__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit doloremque culpa minima vero quod, optio itaque nisi deserunt, debitis ad laudantium libero, quia nemo!</div>
<div class="topic-teaser__cta">Zum Schwerpunktthema <img src="../../assets/arrow-long-right-red.svg"></div>
</div>
</a>
</div>
<div class="blocks">
<a href="#" class="topic-teaser topic-list-teaser-bg-image-koralle">
<div class="topic-teaser__body">
<div class="topic-teaser__caption">Schwerpunktthema</div>
<h1 class="topic-teaser__header">Themenschwerpunkt Headline</h1>
<div class="topic-teaser__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit doloremque culpa minima vero quod, optio itaque nisi deserunt, debitis ad laudantium libero, quia nemo!</div>
<div class="topic-teaser__cta">Zum Schwerpunktthema <img src="../../assets/arrow-long-right-red.svg"></div>
</div>
</a>
</div>
</div>
<div class="page-layout-xl--default">
<div class="blocks">
<a href="#" class="topic-teaser topic-list-teaser-bg-image-igel">
<div class="topic-teaser__body">
<div class="topic-teaser__caption">Schwerpunktthema</div>
<h1 class="topic-teaser__header">Themenschwerpunkt Headline</h1>
<div class="topic-teaser__text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit doloremque culpa minima vero quod, optio itaque nisi deserunt, debitis ad laudantium libero, quia nemo!
</div>
<div class="topic-teaser__cta">Zum Schwerpunktthema <img src={context.app.uri('assets/arrow-long-right-red.svg')} /></div>
</div>
</a>
</div>
<div class="blocks">
<a href="#" class="topic-teaser topic-list-teaser-bg-image-ice">
<div class="topic-teaser__body">
<div class="topic-teaser__caption">Schwerpunktthema</div>
<h1 class="topic-teaser__header">Themenschwerpunkt Headline</h1>
<div class="topic-teaser__text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit doloremque culpa minima vero quod, optio itaque nisi deserunt, debitis ad laudantium libero, quia nemo!
</div>
<div class="topic-teaser__cta">Zum Schwerpunktthema <img src={context.app.uri('assets/arrow-long-right-red.svg')} /></div>
</div>
</a>
</div>
<div class="blocks">
<a href="#" class="topic-teaser topic-list-teaser-bg-image-girl">
<div class="topic-teaser__body">
<div class="topic-teaser__caption">Schwerpunktthema</div>
<h1 class="topic-teaser__header">Themenschwerpunkt Headline</h1>
<div class="topic-teaser__text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit doloremque culpa minima vero quod, optio itaque nisi deserunt, debitis ad laudantium libero, quia nemo!
</div>
<div class="topic-teaser__cta">Zum Schwerpunktthema <img src={context.app.uri('assets/arrow-long-right-red.svg')} /></div>
</div>
</a>
</div>
<div class="blocks">
<a href="#" class="topic-teaser topic-list-teaser-bg-image-medusa">
<div class="topic-teaser__body">
<div class="topic-teaser__caption">Schwerpunktthema</div>
<h1 class="topic-teaser__header">Themenschwerpunkt Headline</h1>
<div class="topic-teaser__text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit doloremque culpa minima vero quod, optio itaque nisi deserunt, debitis ad laudantium libero, quia nemo!
</div>
<div class="topic-teaser__cta">Zum Schwerpunktthema <img src={context.app.uri('assets/arrow-long-right-red.svg')} /></div>
</div>
</a>
</div>
<div class="blocks">
<a href="#" class="topic-teaser topic-list-teaser-bg-image-koralle">
<div class="topic-teaser__body">
<div class="topic-teaser__caption">Schwerpunktthema</div>
<h1 class="topic-teaser__header">Themenschwerpunkt Headline</h1>
<div class="topic-teaser__text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit doloremque culpa minima vero quod, optio itaque nisi deserunt, debitis ad laudantium libero, quia nemo!
</div>
<div class="topic-teaser__cta">Zum Schwerpunktthema <img src={context.app.uri('assets/arrow-long-right-red.svg')} /></div>
</div>
</a>
</div>
</div>
/* No context defined for this component. */
$gradient-from: rgba(0, 0, 0, .4);
$gradient-to: rgba(0, 0, 0, .1);
$topic-teaser-height: ms(36);
.topic-teaser {
@extend %block-link;
@extend %hover-zoom-in;
display: flex;
flex-direction: column;
align-items: center;
background-repeat: no-repeat;
background-position: top left;
background-size: cover;
padding: $spacer-md;
min-height: $topic-teaser-height;
text-align: center;
color: $topic-teaser-body-color;
}
.topic-teaser__body {
width: 100%;
}
.topic-teaser__text {
@extend %teaser-text-italic;
margin-bottom: $spacer-base;
font-size: $teaser-text-font-size-italic-small;
}
.topic-teaser__header {
margin-bottom: $spacer-md;
color: $topic-teaser-body-color;
font-size: $topic-teaser-header-font-size-small;
}
.topic-teaser__caption {
@extend %teaser-caption;
margin-bottom: $spacer-lg;
height: $spacer-md;
}
.topic-teaser__cta {
@extend %heading-font-bold;
}
// Background images for topic header
.topic-list-teaser-bg-image-girl {
background-image: radial-gradient($gradient-from, $gradient-to), asset-url('visual-header-girl.jpg');
}
.topic-list-teaser-bg-image-medusa {
background-image: radial-gradient($gradient-from, $gradient-to), asset-url('visual-header-medusa.jpg');
}
.topic-list-teaser-bg-image-ice {
background-image: radial-gradient($gradient-from, $gradient-to), asset-url('visual-header-ice.jpg');
}
.topic-list-teaser-bg-image-igel {
background-image: radial-gradient($gradient-from, $gradient-to), asset-url('visual-header-igel.jpg');
}
.topic-list-teaser-bg-image-koralle {
background-image: radial-gradient($gradient-from, $gradient-to), asset-url('visual-header-koralle.jpg');
}
@media screen and (min-width: $grid-breakpoint-md) {
.topic-teaser {
padding: $spacer-xl $spacer-xl $spacer-xxl;
}
.topic-teaser__header {
margin-bottom: $spacer-base;
font-size: $topic-teaser-header-font-size;
}
.topic-teaser__text {
font-size: $teaser-text-font-size-italic-big;
}
}
@media screen and (min-width: $grid-breakpoint-lg) {
.topic-teaser__body {
width: 50%;
}
}
There are no notes for this item.