# Landing Page Header

Ready

- HTML
- View
- Context
- Assets
- Info
- Notes

`

    <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. */

`
File:

- Content:
  `

      .landing-page-header {
        @extend %page-header;

        position: relative;
        justify-content: flex-end;
        margin-bottom: $spacer-md;
        padding: $spacer-lg $spacer-sm;

        &__body {
          display: flex;
          flex-direction: column;
          justify-content: center;

          box-sizing: content-box;
          max-width: $default-page-layout-content-width-md;
          margin: 0 auto;
          padding: $spacer-base;

          color: $landing-page-header-intro-text-color;

          background-color: $landing-page-header-intro-bg-color;
          border-bottom: 8px solid $landing-page-header-border-color;
        }

        &__title {
          @extend %punch-in;

          margin-bottom: $spacer-xs;
          padding-bottom: $spacer-base;
          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;
        }
      }

      .landing-page-header.bg-image-edition-01 {
        background-color: transparent;
      }

      @media screen and (min-width: $grid-breakpoint-md) {
        .landing-page-header {
          margin-bottom: $spacer-xl;
          padding: $spacer-lg;
        }

        .landing-page-header__body {
          position: relative;
          top: $spacer-xxl;
          padding: $spacer-xxl $spacer-base $spacer-xl;
        }

        .landing-page-header__title {
          font-size: $font-size-2xl;
        }

        .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:
  - With layout
  - Component only
- Filesystem Path: components/03-organisms/header/landing-page-header/landing-page-header.html

No notes defined.