<header class="claim-header">
<div class="claim-header__body">
<h1 class="claim-header__type">Lorem Gibson</h1>
<h2 class="claim-header__title">
Keine Architektur <br />
ohne Plan.<br />
<hr class="claim-header__divider" />
Keine Entwicklung ohne <br />
wie und warum.<br />
<hr class="claim-header__divider" />
Keine Entscheidung ohne<br />
guten Grund.
</h2>
<span class="icon icon-arrow-long-down icon--brand-secondary"></span>
</div>
</header>
<header class="claim-header">
<div class="claim-header__body">
<h1 class="claim-header__type">Lorem Gibson</h1>
<h2 class="claim-header__title">
Keine Architektur <br />
ohne Plan.<br />
<hr class="claim-header__divider"/>
Keine Entwicklung ohne <br />
wie und warum.<br />
<hr class="claim-header__divider"/>
Keine Entscheidung ohne<br />
guten Grund.
</h2>
<span class="icon icon-arrow-long-down icon--brand-secondary"></span>
</div>
</header>
/* No context defined. */
.claim-header {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background-color: $claim-header-bg-color;
&__body {
max-width: $default-page-layout-content-width-md;
padding: 0 $spacer-sm;
text-align: center;
}
&__type {
font-size: $font-size-base;
color: $claim-header-type-color;
text-transform: uppercase;
}
&__title {
margin-top: $spacer-md;
font-size: $font-size-xl;
color: $claim-header-title-color;
}
&__divider {
width: ms(25);
height: 4px;
margin-top: $spacer-base;
margin-bottom: $spacer-base;
background-color: $claim-header-divider-color;
border: 0;
}
.icon {
margin-top: $spacer-md;
}
}
@media screen and (min-width: $grid-breakpoint-md) {
.claim-header__title {
font-size: $font-size-2xl;
}
}
No notes defined.