No notes defined.
<nav class="breadcrumbNav">
<div class="breadcrumbNav-item">
<a href="#" class="breadcrumbNav-link">Startpage</a>
</div>
<div class="breadcrumbNav-item">
<a href="#" class="breadcrumbNav-link">Page</a>
</div>
<div class="breadcrumbNav-item">
<span>Current Page</span>
</div>
</nav>
<header class="solutionsPageHeader has-backdrop has-figure" style="background-image: url(/images/placeholder/dummy-image.jpg);">
<div class="solutionsPageHeader-figure">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Alternative Bildbeschreibung" />
<figcaption class="figure-caption"><small class="figure-copyright">Foto von <a class="link" href="https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sergio Medina</a></small></figcaption>
</figure>
</div>
<div class="solutionsPageHeader-text">
<h1 class="solutionsPageHeader-heading">
<span class="kicker">
Thema der Seite
</span>
<strong class="solutionsPageHeader-title">Ich bin der Titel der Seite</strong>
</h1>
<div class="solutionsPageHeader-description">
<p>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</p>
</div>
<div class="solutionsPageHeader-metadata">
<div class="metadataList">
<dl class="metadataList-list">
<div class="metadataList-item">
<dt class="metadataList-label">Hashtag</dt>
<dd class="metadataList-value">Echo</dd>
</div>
<div class="metadataList-item">
<dt class="metadataList-label">Park</dt>
<dd class="metadataList-value">Biodiesel</dd>
</div>
<div class="metadataList-item">
<dt class="metadataList-label">Plaid</dt>
<dd class="metadataList-value">Skateboard</dd>
</div>
</dl>
</div>
</div>
</div>
</header>
{{#breadcrumbnav}}
{{render '@breadcrumbnav' (contextData '@pageheader' this) merge=true}}
{{/breadcrumbnav}}
<header class="solutionsPageHeader has-backdrop{{#if figure}} has-figure{{/if}}{{#if productmockup}} has-figure has-product-mockup{{/if}}{{#modifier}} {{.}}{{/modifier}}"{{#figure}} style="background-image: url({{src}});"{{/figure}}{{#theme}} data-theme="{{.}}"{{/theme}}>
{{#figure}}
<div class="solutionsPageHeader-figure">
{{render '@figure' (contextData '@pageheader' this) merge=true}}
</div>
{{/figure}}
{{#productmockup}}
<div class="solutionsPageHeader-figure">
{{render '@productmockup' (contextData '@pageheader' this) merge=true}}
</div>
{{/productmockup}}
<div class="solutionsPageHeader-text">
<h1 class="solutionsPageHeader-heading">
{{#kicker}}
{{render '@kicker' (contextData '@pageheader' this) merge=true}}
{{/kicker}}
{{#title}}<strong class="solutionsPageHeader-title">{{{.}}}</strong>{{/title}}
</h1>
{{#description}}
<div class="solutionsPageHeader-description">
{{{.}}}
</div>
{{/description}}
{{#metadatalist}}
<div class="solutionsPageHeader-metadata">
{{render '@metadatalist' (contextData '@pageheader' this) merge=true}}
</div>
{{/metadatalist}}
{{#if cta}}
<div class="solutionsPageHeader-cta">
{{#cta}}
{{render '@button--link' (contextData '@pageheader' this) merge=true}}
{{/cta}}
</div>
{{/if}}
</div>
</header>
{
"figure": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Alternative Bildbeschreibung",
"caption": null
},
"breadcrumbnav": {
"items": [
{
"label": "Startpage",
"url": "#"
},
{
"label": "Page",
"url": "#"
},
{
"label": "Current Page",
"is-current": true
}
]
},
"kicker": {
"content": "Thema der Seite"
},
"title": "Ich bin der Titel der Seite",
"description": "<p>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</p>\n",
"cta": null,
"metadatalist": {
"items": [
{
"label": "Hashtag",
"value": "Echo"
},
{
"label": "Park",
"value": "Biodiesel"
},
{
"label": "Plaid",
"value": "Skateboard"
}
]
}
}
@import "_solutionsPageHeader.styles";
.solutionsPageHeader {
@extend %pageHeader;
padding-top: var(--sp-section);
padding-bottom: calc(var(--bp-large) + var(--bw-large));
z-index: 1;
background-size: 0; // Hide background-image used for mobile
&:has(&-figure),
&.has-figure {
flex-direction: row;
align-items: flex-end;
}
.breadcrumbNav:has(+ &) {
z-index: 1;
@include full-width-backdrop();
}
&-figure {
@extend %pageHeader-figure;
@include stack-spacing(0);
img {
border-radius: 0;
}
}
.productMockup {
@include stack-spacing(0);
.figure-caption {
@extend %visually-hidden;
}
}
&-text {
@extend %pageHeader-text;
@include stack-spacing(0);
@include box-padding(large);
background-color: $_glass_background-color;
backdrop-filter: $_glass_backdrop-filter;
@include border-radius();
> *:first-child {
margin-top: -.2em;
}
}
&-kicker {
@extend %pageHeader-kicker;
}
&-title {
@extend %pageHeader-title;
}
&-description {
@extend %pageHeader-description;
}
&-cta {
@extend %buttonGroup;
@include stack-spacing(large);
}
&:has(.productMockup),
&.has-product-mockup {
background-image: linear-gradient(7deg, rgba(white, 0) 15%, rgba(white, .3) 45%, rgba(white, .3) 55%, rgba(white, 0) 85%);
background-size: 0;
&::before {
background-color: get-theme-property(dark, background-color);
background-image: inherit;
}
}
&:has(.productMockup):not(.has-large-mockup),
&.has-product-mockup:not(.has-large-mockup) {
@include apply-theme(dark);
}
&:has(.productMockup):not(.has-large-mockup) &,
&.has-product-mockup:not(.has-large-mockup) & {
&-text {
padding: 0;
background-color: transparent;
backdrop-filter: none;
border-radius: 0;
color: $_text-color;
}
}
@include not-on-desktop(){
margin: 0 calc(-1 * var(--pp));
padding: var(--pp);
padding-bottom: calc(var(--pp) + var(--bw-large));
overflow: hidden;
&::before {
z-index: -1;
background-color: transparent;
height: 100%;
}
&::after {
$blur-radius: 10px;
content: "";
display: block;
width: calc(100vw + #{2 * $blur-radius});
height: calc(100% + #{2 * $blur-radius});
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%) scaleY(-1);
z-index: -2;
background: bottom center;
background-size: 100% 100%;
background-image: inherit;
filter: blur($blur-radius);
}
&-text {
@include box-padding();
}
&-figure {
$indent: 20%;
margin: calc(-1 * var(--pp));
margin-bottom: (-1 * $indent);
mask-image: linear-gradient(to top, transparent, white #{$indent});
.figure {
&-caption {
top: var(--bp-small);
bottom: auto;
}
}
}
&:not(:has(.productMockup)),
&:not(.has-product-mockup) {
.figure {
--ratio: 10 / 9;
}
}
&:has(.productMockup),
&.has-product-mockup {
&::after {
content: none;
}
}
&:has(.productMockup) &-figure,
&.has-product-mockup &-figure {
margin-bottom: 0;
mask-image: none;
}
&:has(.productMockup):not(.has-large-mockup) &,
&.has-product-mockup:not(.has-large-mockup) & {
&-text {
background: $_page-color;
padding: var(--sp-component) var(--pp);
margin: calc(-1 * var(--pp));
margin-top: 0;
position: relative;
z-index: 1;
> :first-child {
margin-top: 0;
}
}
}
.productMockup {
&-figure {
transform: scale(.8) translateY(3%);
}
&[data-device="tablet"] .productMockup-figure {
transform: scale(.75) translateY(1.5%);
}
}
&.has-large-mockup &-figure {
margin-bottom: 4%;
}
&.has-large-mockup {
.productMockup {
&-figure {
transform: scale(.91) translateY(8%);
}
&[data-device="tablet"] {
margin-bottom: -5%;
.productMockup-figure {
transform: scale(.8) translateY(0);
}
}
}
}
}
@include only-on-desktop(){
$mockup_width: .8;
$mockup_width--large: .725;
$min-height: 560px;
$min-height--large: 780px;
$min-height--large--tablet: 700px;
&-figure {
z-index: -1;
width: 100vw;
max-width: $_page_max-width;
transform: translateX(-50%);
}
&:has(&-figure),
&.has-figure {
min-height: 640px;
.breadcrumbNav {
width: 100%;
}
}
&:has(&-figure) &-text,
&.has-figure &-text {
@include box-padding(large);
width: get-columns-width(6);
}
//***** With mockup *****//
.productMockup {
width: (100% * $mockup_width);
margin-left: auto;
margin-right: auto;
transform: translateY(4%);
&[data-device="tablet"] {
transform: none;
.productMockup-figure {
transform: scale(.95);
}
}
}
&:has(.productMockup),
&.has-product-mockup {
min-height: 0;
&::after { // Spacer for proportional min height
content: "";
display: block;
width: 0;
padding-bottom: min(#{math.div($min-height, $_page_max-width) * 100vw}, math.div($min-height, $_page_content_max-width) * 100%);
margin-top: calc(-1 * var(--bp-large));
margin-bottom: calc(-1 * var(--bp-large));
}
}
&:has(.productMockup):not(.has-large-mockup),
&.has-product-mockup:not(.has-large-mockup) {
@include apply-theme(dark);
padding-top: var(--bp-large);
&::before {
background-size: 0;
}
}
&:has(.productMockup):not(.has-large-mockup) &,
&.has-product-mockup:not(.has-large-mockup) & {
&-text {
padding-right: calc(.5 * var(--gg));
}
&-figure {
display: flex;
align-items: center;
width: 50vw;
max-width: (.5 * $_page_max-width);
transform: translateX(0);
background-image: inherit;
background-size: 100%;
overflow: hidden;
}
}
//***** With large mockup *****//
&.has-large-mockup {
min-height: 0;
&::after { // Spacer for proportional min height
padding-bottom: min(#{math.div($min-height--large, $_page_max-width) * 100vw}, math.div($min-height--large, $_page_content_max-width) * 100%);
margin-top: calc(-1 * var(--sp-section));
}
&:has(.productMockup[data-device="tablet"])::after {
padding-bottom: min(#{math.div($min-height--large--tablet, $_page_max-width) * 100vw}, math.div($min-height--large--tablet, $_page_content_max-width) * 100%);
}
.productMockup {
width: (100% * $mockup_width--large);
margin-left: auto;
margin-right: 0;
&-figure {
position: relative;
transform: scale(.91) translate(7.5%, -6%);
}
&[data-device="tablet"] .productMockup-figure {
transform: scale(.75) translate(13%, -8%);
}
}
}
&.has-large-mockup & {
&-figure {
width: 100vw;
max-width: $_page_max-width;
transform: translateX(-50%);
}
&-description {
width: 100%;
}
}
}
}