<header class="landing-page-header bg-image-edition-01">
    <div class="landing-page-header__body">
        <div>
            <h1 class="landing-page-header__title bg-image-edition-01">
                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>
    </div>
</header>
<header class="landing-page-header bg-image-edition-01">
    <div class="landing-page-header__body">
        <div>
            <h1 class="landing-page-header__title bg-image-edition-01">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>
    </div>
</header>
/* No context defined. */
  • Content:
    .landing-page-header {
      @extend %page-header;
    
      position: relative;
      justify-content: flex-end;
      padding: $spacer-lg $spacer-sm;
      margin-bottom: $spacer-md;
    
      &__body {
        display: flex;
        max-width: $grid-page-layout-content-width-xl;
        box-sizing: content-box;
        flex-direction: column;
        justify-content: center;
        padding: $spacer-base;
        border-bottom: 8px solid $landing-page-header-border-color;
        margin: 0 auto;
        background-color: $landing-page-header-intro-bg-color;
        color: $landing-page-header-intro-text-color;
      }
    
      &__title {
        @extend %punch-in;
    
        padding-bottom: $spacer-base;
        margin-bottom: $spacer-xs;
        font-size: $font-size-xl;
        text-align: center;
      }
    
      &__text {
        @extend %body-font-italic;
    
        margin-bottom: $spacer-base;
        font-size: $font-size-sm;
        line-height: $paragraph-line-height;
        text-align: center;
      }
    }
    
    @media screen and (min-width: $grid-breakpoint-md) {
      .landing-page-header {
        padding: $spacer-lg;
        margin-bottom: $spacer-xl;
      }
    
      .landing-page-header__body {
        position: relative;
        top: $spacer-xxl;
        padding: $spacer-xxl $spacer-base $spacer-xl;
      }
    
      .landing-page-header__title {
        font-size: $font-size-xxxl;
      }
    
      .landing-page-header__subtitle {
        font-size: $font-size-xl;
      }
    
      .landing-page-header__type {
        font-size: $font-size-base;
      }
    
      .landing-page-header__text {
        padding-right: $spacer-lg;
        padding-left: $spacer-lg;
        font-size: $font-size-lg;
      }
    }
    
    @media screen and (max-width: $grid-breakpoint-lg) and (min-height: $grid-breakpoint-md-lg) {
      .landing-page-header {
        min-height: 20rem;
      }
    }
    
  • URL: /components/raw/landing-page-header/_landing-page-header.scss
  • Filesystem Path: components/03-organisms/header/landing-page-header/_landing-page-header.scss
  • Size: 1.7 KB
  • Handle: @landing-page-header
  • Preview:
  • Filesystem Path: components/03-organisms/header/landing-page-header/landing-page-header.html

No notes defined.