PSI Software SE Design Library

Solutions Page Header: With Desktop Mockup

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 has-product-mockup">

        <div class="solutionsPageHeader-figure">
            <div class="productMockup">

                <div class="productMockup-figure">
                    <figure class="figure" style="">

                        <a href="../../#.html">
                            <img class="figure-image" src="../../images/productMockup/sample-screenshot-desktop.png" alt="Ich bin eine Produktabbildung" />

                        </a>

                        <figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span></figcaption>

                    </figure>

                </div>

            </div>

        </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-cta">

                <a href="#" class="button"><span class="button-label">Klick mich</span></a>

            </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": 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": {
    "label": "Klick mich",
    "url": "#"
  },
  "productmockup": {
    "figure": {
      "src": "/images/productMockup/sample-screenshot-desktop.png",
      "alt": "Ich bin eine Produktabbildung",
      "caption": "Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.",
      "link": {
        "label": "Details anzeigen",
        "url": "#"
      }
    }
  }
}
  • Content: 
    .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%;
            }

        }

    }

}
  • URL: /components/raw/solutionspageheader/_solutionsPageHeader.styles.scss
  • Filesystem Path: components/04-modules/pageHeader/solutionsPageHeader/_solutionsPageHeader.styles.scss
  • Size: 9 KB