<div>landing-page-header
    <header class="landing-page-header landing-page-header-bg-image">
        <div class="landing-page-header__body">
            <div>
                <h1 class="landing-page-header__title landing-page-header-bg-image-text-box">Wir geben Technologie einen Sinn. <br>Und ihren Ideen eine Zukunft.</h1>
            </div>
            <div class="landing-page-header__text">Wir beraten ehrlich, denken innovativ und entwickeln leidenschaftlich
                gern. Das Ergebnis sind erfolgreiche Softwarelösungen, Infrastrukturen
                und Geschäftsmodelle.</div><i class="icon icon-chevron-down landing-page-header__down-arrow"></i>
        </div>
    </header>landing-page-header--red
    <header class="landing-page-header landing-page-header--red landing-page-header-bg-image">
        <div class="landing-page-header__body landing-page-header__body--red">
            <div>
                <h1 class="landing-page-header__title landing-page-header__title--red landing-page-header-bg-image-text-box">Wir geben Technologie einen Sinn. <br>Und ihren Ideen eine Zukunft.</h1>
            </div>
            <div class="landing-page-header__text">Wir beraten ehrlich, denken innovativ und entwickeln leidenschaftlich
                gern. Das Ergebnis sind erfolgreiche Softwarelösungen, Infrastrukturen
                und Geschäftsmodelle.</div><i class="icon icon-chevron-down landing-page-header__down-arrow landing-page-header__down-arrow--red"></i>
        </div>
    </header>landing-page-header--blue
    <header class="landing-page-header landing-page-header--blue landing-page-header-bg-image">
        <div class="landing-page-header__body landing-page-header__body--blue">
            <div>
                <h1 class="landing-page-header__title landing-page-header__title--blue landing-page-header-bg-image-text-box">Wir geben Technologie einen Sinn. <br>Und ihren Ideen eine Zukunft.</h1>
            </div>
            <div class="landing-page-header__text landing-page-header__text--blue">Wir beraten ehrlich, denken innovativ und entwickeln leidenschaftlich
                gern. Das Ergebnis sind erfolgreiche Softwarelösungen, Infrastrukturen
                und Geschäftsmodelle.</div><i class="icon icon-chevron-down landing-page-header__down-arrow"></i>
        </div>
    </header>landing-page-header--centered
    <header class="landing-page-header landing-page-header--centered landing-page-header-bg-image">
        <div class="landing-page-header__body landing-page-header__body--centered">
            <div>
                <h1 class="landing-page-header__title landing-page-header__title--centered landing-page-header-bg-image-text-box">Wir geben Technologie einen Sinn. Und ihren Ideen eine Zukunft.</h1>
            </div>
            <div class="landing-page-header__text">Wir beraten ehrlich, denken innovativ und entwickeln leidenschaftlich
                gern. Das Ergebnis sind erfolgreiche Softwarelösungen, Infrastrukturen
                und Geschäftsmodelle.</div>
            <img class="landing-page__down-arrow" src="../../assets/arrow-long-down-red.svg">
        </div>
    </header>landing-page-header--centered-big
    <header class="landing-page-header landing-page-header--centered-big landing-page-header-bg-image">
        <div class="landing-page-header__body landing-page-header__body--centered-big">
            <div>
                <h1 class="landing-page-header__title landing-page-header__title--centered-big landing-page-header-bg-image-text-box">Wir geben Technologie einen Sinn. Und ihren Ideen eine Zukunft.</h1>
            </div>
            <img class="landing-page__down-arrow" src="../../assets/arrow-long-down-red.svg">
        </div>
    </header>
</div>
<div>
    landing-page-header

    <header class="landing-page-header landing-page-header-bg-image">
        <div class="landing-page-header__body">
            <div>
                <h1 class="landing-page-header__title landing-page-header-bg-image-text-box">Wir geben Technologie einen Sinn. <br />
                Und ihren Ideen eine Zukunft.</h1>
            </div>
            <div class="landing-page-header__text">
                Wir beraten ehrlich, denken innovativ und entwickeln leidenschaftlich gern.
                Das Ergebnis sind erfolgreiche Softwarelösungen, Infrastrukturen und Geschäftsmodelle.
            </div>
            <i class="icon icon-chevron-down landing-page-header__down-arrow"></i>
        </div>
    </header>

    landing-page-header--red

    <header class="landing-page-header landing-page-header--red landing-page-header-bg-image">
        <div class="landing-page-header__body landing-page-header__body--red">
            <div>
                <h1 class="landing-page-header__title landing-page-header__title--red landing-page-header-bg-image-text-box">Wir geben Technologie einen Sinn. <br />
                Und ihren Ideen eine Zukunft.</h1>
            </div>
            <div class="landing-page-header__text">
                Wir beraten ehrlich, denken innovativ und entwickeln leidenschaftlich gern.
                Das Ergebnis sind erfolgreiche Softwarelösungen, Infrastrukturen und Geschäftsmodelle.
            </div>
            <i class="icon icon-chevron-down landing-page-header__down-arrow landing-page-header__down-arrow--red"></i>
        </div>
    </header>

    landing-page-header--blue

    <header class="landing-page-header landing-page-header--blue landing-page-header-bg-image">
        <div class="landing-page-header__body landing-page-header__body--blue">
            <div>
                <h1 class="landing-page-header__title landing-page-header__title--blue landing-page-header-bg-image-text-box">Wir geben Technologie einen Sinn. <br />
                Und ihren Ideen eine Zukunft.</h1>
            </div>
            <div class="landing-page-header__text landing-page-header__text--blue">
                Wir beraten ehrlich, denken innovativ und entwickeln leidenschaftlich gern.
                Das Ergebnis sind erfolgreiche Softwarelösungen, Infrastrukturen und Geschäftsmodelle.
            </div>
            <i class="icon icon-chevron-down landing-page-header__down-arrow"></i>
        </div>
    </header>

    landing-page-header--centered

    <header class="landing-page-header landing-page-header--centered landing-page-header-bg-image">
        <div class="landing-page-header__body landing-page-header__body--centered">
            <div>
                <h1 class="landing-page-header__title landing-page-header__title--centered landing-page-header-bg-image-text-box">Wir geben Technologie einen Sinn. Und ihren Ideen eine Zukunft.</h1>
            </div>
            <div class="landing-page-header__text">
                Wir beraten ehrlich, denken innovativ und entwickeln leidenschaftlich gern.
                Das Ergebnis sind erfolgreiche Softwarelösungen, Infrastrukturen und Geschäftsmodelle.
            </div>
            <img class="landing-page__down-arrow" src={context.app.uri('assets/arrow-long-down-red.svg')} />
        </div>
    </header>

    landing-page-header--centered-big

    <header class="landing-page-header landing-page-header--centered-big landing-page-header-bg-image">
        <div class="landing-page-header__body landing-page-header__body--centered-big">
            <div>
                <h1 class="landing-page-header__title landing-page-header__title--centered-big landing-page-header-bg-image-text-box">Wir geben Technologie einen Sinn. Und ihren Ideen eine Zukunft.</h1>
            </div>
            <img class="landing-page__down-arrow" src={context.app.uri('assets/arrow-long-down-red.svg')} />
        </div>
    </header>

</div>
/* No context defined for this component. */
  • Content:
    .landing-page-header {
    
      &__body--blue {
        border-bottom: 8px solid $brand-primary;
        background-color: $brand-text;
      }
    
      &__title--blue {
        color: $landing-page-header-inverted-text-color;
      }
    
      &__text--blue {
        color: $brand-primary;
      }
    }
    
  • URL: /components/raw/landing-page-header/_landing-page-header--blue.scss
  • Filesystem Path: components/02-molecules/visual-elements/header/landing-page-header/_landing-page-header--blue.scss
  • Size: 255 Bytes
  • Content:
    .landing-page-header--centered-big {
      justify-content: center;
    }
    
    .landing-page-header__body--centered-big {
      top: 0; // reset
      border: 0;
    }
    
    @media screen and (min-width: $grid-breakpoint-md) {
      .landing-page-header__title--centered-big {
        font-size: ms(16); // unmodified: ms(11)
      }
    }
    
  • URL: /components/raw/landing-page-header/_landing-page-header--centered-big.scss
  • Filesystem Path: components/02-molecules/visual-elements/header/landing-page-header/_landing-page-header--centered-big.scss
  • Size: 295 Bytes
  • Content:
    .landing-page-header--centered {
      justify-content: center;
    }
    
    .landing-page-header__body--centered {
      top: 0; // reset
      border: 0;
    }
    
    @media screen and (min-width: $grid-breakpoint-md) {
      .landing-page-header__title--centered {
        font-size: ms(13); // unmodified: ms(11)
      }
    }
    
  • URL: /components/raw/landing-page-header/_landing-page-header--centered.scss
  • Filesystem Path: components/02-molecules/visual-elements/header/landing-page-header/_landing-page-header--centered.scss
  • Size: 283 Bytes
  • Content:
    // overrides for easy testing
    // remove in final website
    
    .landing-page-header--red {
    
      .landing-page-header__body {
        background-color: $brand-primary;
      }
    
      .landing-page-header__title {
        color: $landing-page-header-inverted-text-color;
      }
    
      .landing-page-header__down-arrow {
        text-align: center;
        color: $brand-text;
      }
    }
    
    
    
    .landing-page-header--blue {
    
      .landing-page-header__body {
        border-bottom: 8px solid $brand-primary;
        background-color: $brand-text;
      }
    
      .landing-page-header__title {
        color: $landing-page-header-inverted-text-color;
      }
    
      .landing-page-header__text {
        color: $brand-primary;
      }
    }
    
    
    
    .landing-page-header--centered {
      justify-content: center;
    
      .landing-page-header__body {
        top: 0; // reset
        border: 0;
      }
    }
    
    @media screen and (min-width: $grid-breakpoint-md) {
      .landing-page-header--centered {
        .landing-page-header__title {
          font-size: ms(13); // unmodified: ms(11)
        }
      }
    }
    
    
    
    .landing-page-header--centered-big {
      justify-content: center;
    
      .landing-page-header__body {
        top: 0; // reset
        border: 0;
      }
    
      .landing-page-header__text {
        display: none;
      }
    }
    
    @media screen and (min-width: $grid-breakpoint-md) {
      .landing-page-header--centered-big {
        .landing-page-header__title {
          font-size: ms(16); // unmodified: ms(11)
        }
      }
    }
    
  • URL: /components/raw/landing-page-header/_landing-page-header--demo-classes.scss
  • Filesystem Path: components/02-molecules/visual-elements/header/landing-page-header/_landing-page-header--demo-classes.scss
  • Size: 1.3 KB
  • Content:
    .landing-page-header {
    
      &__body--red {
        background-color: $brand-primary;
      }
    
      &__title--red {
        color: $landing-page-header-inverted-text-color;
      }
    
      &__down-arrow--red {
        text-align: center;
        color: $brand-text;
      }
    }
    
  • URL: /components/raw/landing-page-header/_landing-page-header--red.scss
  • Filesystem Path: components/02-molecules/visual-elements/header/landing-page-header/_landing-page-header--red.scss
  • Size: 237 Bytes
  • Content:
    // variations imported at the end of this file
    
    $landing-page-header-outer-padding: $spacer-lg;
    $landing-page-header-outer-padding-small: $spacer-sm;
    $landing-page-header-bottom-margin: $spacer-xxl;
    
    .landing-page-header {
      @extend %page-header;
    
      justify-content: flex-end;
      margin-bottom: $landing-page-header-bottom-margin;
      padding: $landing-page-header-outer-padding $landing-page-header-outer-padding-small;
    
      &__body {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin: 0 auto;
        border-bottom: 8px solid $landing-page-header-border-color;
        background-color: $landing-page-header-intro-bg-color;
        padding: $spacer-base;
        max-width: $grid-page-layout-content-width-xl;
        color: $landing-page-header-intro-text-color;
        box-sizing: content-box;
      }
    
      &__title {
        @extend %punch-in;
        margin-bottom: $spacer-xs;
        padding-bottom: $spacer-base;
        text-align: center;
        line-height: $landing-page-header-title-line-height-small;
        font-size: $landing-page-header-title-font-size-small;
      }
    
      &__text {
        @extend %body-font-italic;
    
        margin-bottom: $spacer-base;
        text-align: center;
        line-height: $standard-header-intro-line-height-small;
        font-size: $standard-header-intro-font-size-small;
      }
    
      &__down-arrow {
        text-align: center;
        color: $brand-primary;
      }
    }
    
    .landing-page-header-bg-image {
      background-image: asset-url('visual-header-landing-page.jpg');
    }
    
    .landing-page-header-bg-image-text-box {
      @extend %landing-page-header-bg-image-text-box;
    }
    
    @media screen and (min-width: $grid-breakpoint-md) {
      .landing-page-header {
        padding: $landing-page-header-outer-padding;
      }
    
      .landing-page-header__body {
        position: relative;
        top: $spacer-xxl;
        padding: $spacer-xxl $spacer-base $spacer-xl;
      }
    
      .landing-page-header__title {
        line-height: $landing-page-header-title-line-height;
        font-size: $landing-page-header-title-font-size;
      }
    
      .landing-page-header__subtitle {
        line-height: $standard-header-subtitle-line-height;
        font-size: $standard-header-subtitle-font-size;
      }
    
      .landing-page-header__type {
        line-height: $standard-header-type-line-height;
        font-size: $standard-header-type-font-size;
      }
    
      .landing-page-header__text {
        padding-right: $spacer-lg;
        padding-left: $spacer-lg;
        line-height: $standard-header-intro-line-height;
        font-size: $standard-header-intro-font-size;
      }
    }
    
    @media screen and (max-width: $grid-breakpoint-lg) and (min-height: $grid-breakpoint-md-lg) {
      .landing-page-header {
        min-height: 20rem;
      }
    }
    
    // excluded for now
    
    // @import './landing-page-header--red';
    // @import './landing-page-header--blue';
    // @import './landing-page-header--centered';
    // @import './landing-page-header--centered-big';
    // @import './landing-page-header--demo-classes';
    
  • URL: /components/raw/landing-page-header/_landing-page-header.scss
  • Filesystem Path: components/02-molecules/visual-elements/header/landing-page-header/_landing-page-header.scss
  • Size: 2.8 KB
  • Handle: @landing-page-header
  • Preview:
  • Filesystem Path: components/02-molecules/visual-elements/header/landing-page-header/landing-page-header.html

There are no notes for this item.