<div>
<header class="image-header">
<div class="image-header__body image-header-bg-culture-01">
<div class="image-header__content">
<h1 class="image-header__title image-header-bg-culture-01-text-box ">Ein<br>Titel</h1>
<img src="../../assets/arrow-long-down-red.svg">
</div>
</div>
</header>
<header class="image-header">
<div class="image-header__body image-header-bg-staff-01">
<div class="image-header__content">
<h1 class="image-header__title image-header-bg-staff-01-text-box ">Ein<br>Titel</h1>
<img src="../../assets/arrow-long-down-red.svg">
</div>
</div>
</header>
</div>
<div>
<header class="image-header">
<div class="image-header__body image-header-bg-culture-01">
<div class="image-header__content">
<h1 class="image-header__title image-header-bg-culture-01-text-box ">Ein<br />Titel</h1>
<img src={context.app.uri('assets/arrow-long-down-red.svg')} />
</div>
</div>
</header>
<header class="image-header">
<div class="image-header__body image-header-bg-staff-01">
<div class="image-header__content">
<h1 class="image-header__title image-header-bg-staff-01-text-box ">Ein<br />Titel</h1>
<img src={context.app.uri('assets/arrow-long-down-red.svg')} />
</div>
</div>
</header>
</div>
/* No context defined for this component. */
.image-header {
display: flex;
flex-direction: column;
background-color: $image-header-bg-color;
padding: $spacer-md;
min-height: $fullscreen-real-mobile-height;
&__body {
display: flex;
flex-grow: 1;
align-items: flex-end;
justify-content: center;
margin: 0 auto;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
width: 100%;
}
&__content {
background-color: $image-header-content-bg-color;
padding: $spacer-base $spacer-xl;
text-align: center;
}
&__headline {
margin-bottom: $spacer-sm;
}
&__title {
@extend %punch-in;
margin-bottom: $spacer-md;
}
}
.image-header-bg-culture-01 {
background-image: asset-url('visual-culture-01.jpg');
}
.image-header-bg-staff-01 {
background-image: asset-url('visual-staff-01.jpg');
}
.image-header-bg-culture-01-text-box {
@extend %image-header-bg-culture-01-text-box;
}
.image-header-bg-staff-01-text-box {
@extend %image-header-bg-staff-01-text-box;
}
//
// Media Queries
//
@media screen and (min-width: $grid-breakpoint-sm) {
.image-header__body {
align-items: center;
}
}
@media screen and (min-width: $grid-breakpoint-md) {
.image-header {
min-height: $fullscreen-real-desktop-height;
}
.image-header__title {
margin-bottom: $spacer-base;
}
}
There are no notes for this item.