<header class="image-header">
    <div class="image-header__body bg-image-culture-01">
        <div class="image-header__content">
            <h1 class="image-header__title bg-image-culture-01">Ein<br />Titel</h1>
            <span class="icon-svg icon-arrow-long-down icon--brand-secondary"></span>
        </div>
    </div>
</header>
<header class="image-header">
    <div class="image-header__body bg-image-staff-01">
        <div class="image-header__content">
            <h1 class="image-header__title bg-image-staff-01">Ein<br />Titel</h1>
            <span class="icon-svg icon-arrow-long-down icon--brand-secondary"></span>
        </div>
    </div>
</header>
<header class="image-header">
    <div class="image-header__body bg-image-culture-01">
        <div class="image-header__content">
            <h1 class="image-header__title bg-image-culture-01">Ein<br />Titel</h1>
            <span class="icon-svg icon-arrow-long-down icon--brand-secondary"></span>
        </div>
    </div>
</header>

<header class="image-header">
    <div class="image-header__body bg-image-staff-01">
        <div class="image-header__content">
            <h1 class="image-header__title bg-image-staff-01">Ein<br />Titel</h1>
            <span class="icon-svg icon-arrow-long-down icon--brand-secondary"></span>
        </div>
    </div>
</header>
/* No context defined. */
  • Content:
    .image-header {
      display: flex;
      min-height: $fullscreen-real-mobile-height;
      flex-direction: column;
      padding: $spacer-md;
      background-color: $image-header-bg-color;
    
      &__body {
        display: flex;
        width: 100%;
        flex-grow: 1;
        align-items: flex-end;
        justify-content: center;
        margin: 0 auto;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
      }
    
      &__content {
        padding: $spacer-base $spacer-xl;
        background-color: $image-header-content-bg-color;
        text-align: center;
      }
    
      &__headline {
        margin-bottom: $spacer-sm;
      }
    
      &__title {
        @extend %punch-in;
    
        margin-bottom: $spacer-md;
      }
    }
    
    //
    // 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/03-organisms/header/image-header/_image-header.scss
  • Size: 1 KB
  • Handle: @image-header
  • Preview:
  • Filesystem Path: components/03-organisms/header/image-header/image-header.html

No notes defined.