<div class="image-divider-center image-divider-center-bg">
<div class="image-divider-center__textbox">
<h1 class="image-divider-center__title image-divider-center-bg-text-box">Ein Titel</h1>
<p class="image-divider-center__textbox__text">Filet mignon sausage tongue, hamburger porchetta fatback kielbasa flank
ribeye. Pastrami t-bone pork chop sirloin ham swine cupim brisket prosciutto
buffalo drumstick strip steak capicola short loin. Frankfurter fatback
turkey pork chop prosciutto pork ground round tongue chuck doner. Pig venison
pork chop shoulder corned beef capicola meatball.</p>
<img src="../../assets/arrow-long-down-red.svg">
</div>
</div>
<div class="image-divider-center image-divider-center-bg">
<div class="image-divider-center__textbox">
<h1 class="image-divider-center__title image-divider-center-bg-text-box">Ein Titel</h1>
<p class="image-divider-center__textbox__text">
Filet mignon sausage tongue, hamburger porchetta fatback kielbasa flank
ribeye. Pastrami t-bone pork chop sirloin ham swine cupim brisket
prosciutto buffalo drumstick strip steak capicola short loin.
Frankfurter fatback turkey pork chop prosciutto pork ground round tongue
chuck doner. Pig venison pork chop shoulder corned beef capicola
meatball.
</p>
<img src={context.app.uri('assets/arrow-long-down-red.svg')} />
</div>
</div>
/* No context defined for this component. */
$divider-center-textbox-offset: $spacer-xxl * 2;
.image-divider-center {
@extend %page-header;
margin-bottom: $divider-center-textbox-offset;
padding-top: $spacer-lg;
min-height: 50vh;
&__title {
@extend %punch-in;
margin-bottom: $spacer-md;
padding: 0 $spacer-md;
text-align: center;
line-height: $standard-header-title-line-height;
font-size: $standard-header-title-font-size-small;
}
}
.image-divider-center__textbox {
display: flex;
position: relative;
top: $divider-center-textbox-offset;
flex-direction: column;
align-items: center;
margin-top: $spacer-md;
background-color: $standard-header-intro-bg;
padding: $spacer-md;
max-width: 630px;
text-align: center;
box-sizing: content-box;
}
.image-divider-center__textbox__text {
@extend %body-font-italic;
line-height: $standard-header-intro-line-height-small;
color: $brand-red;
font-size: $standard-header-intro-font-size-small;
// IE11 Hack
// sass-lint:disable no-vendor-prefixes
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
max-width: 100%;
}
}
.image-divider-center-bg {
background-image: asset-url('visual-culture-03.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.image-divider-center-bg-text-box {
@extend %image-divider-center-bg-text-box;
}
@media screen and (min-width: $grid-breakpoint-md) {
.image-divider-center {
margin-bottom: $divider-center-textbox-offset;
}
.image-divider-center__title {
margin-bottom: $spacer-lg;
font-size: $standard-header-title-font-size;
}
.image-divider-center__textbox {
top: $divider-center-textbox-offset;
padding: $spacer-lg;
width: 630px;
}
.image-divider-center__textbox__text {
line-height: $standard-header-intro-line-height;
font-size: $standard-header-intro-font-size;
}
}
There are no notes for this item.