<div>
    <header class="image-header">
        <div class="image-header__body image-header-bg-culture-01">
            <div class="image-header__content">
                <h1 class="image-header__title image-header-bg-culture-01-text-box ">Ein<br>Titel</h1>
                <img src="../../assets/arrow-long-down-red.svg">
            </div>
        </div>
    </header>
    <header class="image-header">
        <div class="image-header__body image-header-bg-staff-01">
            <div class="image-header__content">
                <h1 class="image-header__title image-header-bg-staff-01-text-box ">Ein<br>Titel</h1>
                <img src="../../assets/arrow-long-down-red.svg">
            </div>
        </div>
    </header>
</div>
<div>
    <header class="image-header">
        <div class="image-header__body image-header-bg-culture-01">
            <div class="image-header__content">
                <h1 class="image-header__title image-header-bg-culture-01-text-box ">Ein<br />Titel</h1>
                <img src={context.app.uri('assets/arrow-long-down-red.svg')} />
            </div>
        </div>
    </header>

    <header class="image-header">
        <div class="image-header__body image-header-bg-staff-01">
            <div class="image-header__content">
                <h1 class="image-header__title image-header-bg-staff-01-text-box ">Ein<br />Titel</h1>
                <img src={context.app.uri('assets/arrow-long-down-red.svg')} />
            </div>
        </div>
    </header>
</div>
/* No context defined for this component. */
  • Content:
    .image-header {
      display: flex;
      flex-direction: column;
      background-color: $image-header-bg-color;
      padding: $spacer-md;
      min-height: $fullscreen-real-mobile-height;
    
      &__body {
        display: flex;
        flex-grow: 1;
        align-items: flex-end;
        justify-content: center;
        margin: 0 auto;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        width: 100%;
      }
    
      &__content {
        background-color: $image-header-content-bg-color;
        padding: $spacer-base $spacer-xl;
        text-align: center;
      }
    
      &__headline {
        margin-bottom: $spacer-sm;
      }
    
      &__title {
        @extend %punch-in;
        margin-bottom: $spacer-md;
      }
    }
    
    .image-header-bg-culture-01 {
      background-image: asset-url('visual-culture-01.jpg');
    }
    
    .image-header-bg-staff-01 {
      background-image: asset-url('visual-staff-01.jpg');
    }
    
    .image-header-bg-visual-01 {
      background-image: asset-url('visual-header-koralle.jpg');
    }
    
    .image-header-bg-culture-01-text-box {
      @extend %image-header-bg-culture-01-text-box;
    }
    
    .image-header-bg-staff-01-text-box {
      @extend %image-header-bg-staff-01-text-box;
    }
    
    //
    // Media Queries
    //
    
    @media screen and (min-width: $grid-breakpoint-sm) {
      .image-header__body {
        align-items: center;
      }
    }
    
    @media screen and (min-width: $grid-breakpoint-md) {
      .image-header {
        min-height: $fullscreen-real-desktop-height;
      }
    
      .image-header__title {
        margin-bottom: $spacer-base;
      }
    }
    
  • URL: /components/raw/image-header/_image-header.scss
  • Filesystem Path: components/02-molecules/header/image-header/_image-header.scss
  • Size: 1.4 KB
  • Handle: @image-header
  • Preview:
  • Filesystem Path: components/02-molecules/header/image-header/image-header.html

There are no notes for this item.