<div class="page-layout--xl-default">
<div class="blocks">
<a href="#" class="teaser big-content-teaser big-content-teaser--inverted">
<div class="big-content-teaser__content">
<div class="big-content-teaser__body">
<h2 class="big-content-teaser__headline big-content-teaser__headline--inverted">Dies ist eine Geschäftsmodelle Headline</h2>
<p class="big-content-teaser__text">Lorem gibson 8-bit Freeside denim otaku sign boy neon warp long-chain hydrocarbons car.</p>
</div>
<div class="big-content-teaser__footer">
<div class="link-teaser inverted-interaction-color" href="#">Mehr erfahren</div>
</div>
</div>
</a>
<a href="#" class="teaser big-content-teaser big-content-teaser--colored">
<div class="big-content-teaser__content">
<div class="big-content-teaser__body">
<h2 class="big-content-teaser__headline">Dies ist eine Headline</h2>
<p class="big-content-teaser__text">Lorem gibson 8-bit Freeside denim otaku sign boy neon warp long-chain hydrocarbons car.</p>
</div>
<div class="big-content-teaser__footer">
<div class="link-teaser inverted-text-color" href="#">Mehr erfahren</div>
</div>
</div>
</a>
</div>
<div class="blocks">
<a href="#" class="teaser big-content-teaser big-content-teaser--image big-content-teaser-bg-image-igel">
<div class="big-content-teaser__content">
<div class="big-content-teaser__body">
<h2 class="big-content-teaser__headline">Dies ist eine Technologieberatung Headline</h2>
<p class="big-content-teaser__text">Lorem gibson 8-bit Freeside denim otaku sign boy neon warp long-chain hydrocarbons car.</p>
</div>
<div class="big-content-teaser__footer">
<div class="link-teaser" href="#">Mehr erfahren</div>
</div>
</div>
</a>
<a href="#" class="teaser big-content-teaser big-content-teaser--image big-content-teaser-bg-image-medusa">
<div class="big-content-teaser__content filled-background">
<div class="big-content-teaser__body">
<h2 class="big-content-teaser__headline">Dies ist eine Headline</h2>
<p class="big-content-teaser__text">Lorem gibson 8-bit Freeside denim otaku sign boy neon warp long-chain hydrocarbons car.</p>
</div>
<div class="big-content-teaser__footer">
<div class="link-teaser" href="#">Mehr erfahren</div>
</div>
</div>
</a>
</div>
<div class="blocks">
<a href="#" class="teaser big-content-teaser big-content-teaser--image big-content-teaser-bg-image-girl">
<div class="big-content-teaser__content">
<div class="big-content-teaser__body">
<h2 class="big-content-teaser__headline">Dies ist eine Headline</h2>
<p class="big-content-teaser__text">Lorem gibson 8-bit Freeside denim otaku sign boy neon warp long-chain hydrocarbons car.</p>
</div>
<div class="big-content-teaser__footer">
<div class="link-teaser" href="#">Mehr erfahren</div>
</div>
</div>
</a>
<a href="#" class="teaser big-content-teaser big-content-teaser--image big-content-teaser-bg-image-ice">
<div class="big-content-teaser__content filled-background">
<div class="big-content-teaser__body">
<h2 class="big-content-teaser__headline">Dies ist eine Headline</h2>
<p class="big-content-teaser__text">Lorem gibson 8-bit Freeside denim otaku sign boy neon warp long-chain hydrocarbons car.</p>
</div>
<div class="big-content-teaser__footer">
<div class="link-teaser" href="#">Mehr erfahren</div>
</div>
</div>
</a>
</div>
</div>
<div class="page-layout--xl-default">
<div class="blocks">
<a href="#" class="teaser big-content-teaser big-content-teaser--inverted">
<div class="big-content-teaser__content">
<div class="big-content-teaser__body">
<h2 class="big-content-teaser__headline big-content-teaser__headline--inverted">Dies ist eine Geschäftsmodelle Headline</h2>
<p class="big-content-teaser__text">
Lorem gibson 8-bit Freeside denim otaku sign boy neon warp long-chain hydrocarbons car.
</p>
</div>
<div class="big-content-teaser__footer">
<div class="link-teaser inverted-interaction-color" href="#">Mehr erfahren</div>
</div>
</div>
</a>
<a href="#" class="teaser big-content-teaser big-content-teaser--colored">
<div class="big-content-teaser__content">
<div class="big-content-teaser__body">
<h2 class="big-content-teaser__headline">Dies ist eine Headline</h2>
<p class="big-content-teaser__text">
Lorem gibson 8-bit Freeside denim otaku sign boy neon warp long-chain hydrocarbons car.
</p>
</div>
<div class="big-content-teaser__footer">
<div class="link-teaser inverted-text-color" href="#">Mehr erfahren</div>
</div>
</div>
</a>
</div>
<div class="blocks">
<a href="#" class="teaser big-content-teaser big-content-teaser--image big-content-teaser-bg-image-igel">
<div class="big-content-teaser__content">
<div class="big-content-teaser__body">
<h2 class="big-content-teaser__headline">Dies ist eine Technologieberatung Headline</h2>
<p class="big-content-teaser__text">
Lorem gibson 8-bit Freeside denim otaku sign boy neon warp long-chain hydrocarbons car.
</p>
</div>
<div class="big-content-teaser__footer">
<div class="link-teaser" href="#">Mehr erfahren</div>
</div>
</div>
</a>
<a href="#" class="teaser big-content-teaser big-content-teaser--image big-content-teaser-bg-image-medusa">
<div class="big-content-teaser__content filled-background">
<div class="big-content-teaser__body">
<h2 class="big-content-teaser__headline">Dies ist eine Headline</h2>
<p class="big-content-teaser__text">
Lorem gibson 8-bit Freeside denim otaku sign boy neon warp long-chain hydrocarbons car.
</p>
</div>
<div class="big-content-teaser__footer">
<div class="link-teaser" href="#">Mehr erfahren</div>
</div>
</div>
</a>
</div>
<div class="blocks">
<a href="#" class="teaser big-content-teaser big-content-teaser--image big-content-teaser-bg-image-girl">
<div class="big-content-teaser__content">
<div class="big-content-teaser__body">
<h2 class="big-content-teaser__headline">Dies ist eine Headline</h2>
<p class="big-content-teaser__text">
Lorem gibson 8-bit Freeside denim otaku sign boy neon warp long-chain hydrocarbons car.
</p>
</div>
<div class="big-content-teaser__footer">
<div class="link-teaser" href="#">Mehr erfahren</div>
</div>
</div>
</a>
<a href="#" class="teaser big-content-teaser big-content-teaser--image big-content-teaser-bg-image-ice">
<div class="big-content-teaser__content filled-background">
<div class="big-content-teaser__body">
<h2 class="big-content-teaser__headline">Dies ist eine Headline</h2>
<p class="big-content-teaser__text">
Lorem gibson 8-bit Freeside denim otaku sign boy neon warp long-chain hydrocarbons car.
</p>
</div>
<div class="big-content-teaser__footer">
<div class="link-teaser" href="#">Mehr erfahren</div>
</div>
</div>
</a>
</div>
</div>
/* No context defined for this component. */
$big-content-teaser-height-sm: ms(35);
$big-content-teaser-height-md: ms(38);
.big-content-teaser {
@extend %block-link;
@extend %hover-zoom-in;
display: flex;
justify-content: center;
// IE11 Hack
// sass-lint:disable no-vendor-prefixes
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
max-width: 100%;
height: 100%;
}
min-height: $big-content-teaser-height-sm;
}
.big-content-teaser__content {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: $spacer-lg $spacer-base;
// IE11 Hack
// sass-lint:disable no-vendor-prefixes
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
width: 100%;
height: 100%;
}
}
.big-content-teaser__headline {
@extend %heading-font-heavy;
line-height: $big-content-teaser-headline-line-height-small;
color: $big-content-teaser-headline-color;
font-size: $big-content-teaser-headline-font-size-small;
}
.big-content-teaser__text {
@extend %heading-font-regular;
line-height: $big-content-teaser-text-line-height-small;
font-size: $big-content-teaser-text-font-size-small;
hyphens: auto;
}
.big-content-teaser__footer {
margin-bottom: 0;
> * {
margin: 0;
}
.link-teaser {
display: inline;
}
}
// Variations
.big-content-teaser--inverted {
background-color: $content-teaser-inverted-bg;
color: $content-teaser-inverted-color;
.big-content-teaser__headline--inverted {
color: $big-content-teaser-headline-inverted-color;
}
}
.big-content-teaser--colored {
background-color: $content-teaser-colored-bg;
color: $content-teaser-colored-color;
}
.big-content-teaser--image {
.big-content-teaser__content {
margin: $spacer-sm;
background-color: $big-content-teaser-bg-color;
padding: $spacer-sm;
}
.big-content-teaser__headline {
color: $big-content-teaser-image-headline-color;
}
}
//Background images for topic header
.big-content-teaser-bg-image-girl {
background-image: asset-url('visual-header-girl.jpg');
background-position: center;
}
.big-content-teaser-bg-image-medusa {
background-image: asset-url('visual-header-medusa.jpg');
background-position: center;
}
.big-content-teaser-bg-image-ice {
background-image: asset-url('visual-header-ice.jpg');
background-position: center;
}
.big-content-teaser-bg-image-igel {
background-image: asset-url('visual-header-igel-1444.jpg');
background-position: center;
}
.topic-header-bg-image-koralle {
background-image: asset-url('visual-header-koralle.jpg');
background-position: center;
}
// Breakpoints
@media screen and (min-width: $grid-breakpoint-md) {
.big-content-teaser {
min-height: $big-content-teaser-height-md;
}
.big-content-teaser__content {
padding: $spacer-xl $spacer-lg;
}
.big-content-teaser__headline {
line-height: $big-content-teaser-headline-line-height;
font-size: $big-content-teaser-headline-font-size-md;
}
.big-content-teaser__text {
line-height: $big-content-teaser-text-line-height;
font-size: $big-content-teaser-text-font-size;
}
.big-content-teaser--image {
.big-content-teaser__content {
margin: $spacer-base;
padding: $spacer-base;
}
}
}
@media screen and (min-width: $grid-breakpoint-lg) {
.big-content-teaser__text {
hyphens: none;
}
.big-content-teaser__headline {
font-size: $big-content-teaser-headline-font-size;
}
}
There are no notes for this item.