Image Header 

<header class="image-header bg-image-culture-01">
    <div class="image-header__content">
        <h1 class="image-header__title image-header__title--punch-in bg-image-culture-01">Ein Titel</h1>
        <h3>Ich bin ein Untertitel</h3>
        <span class="icon icon-arrow-long-down icon--brand-secondary"></span>
    </div>
</header>

<header class="image-header bg-image-workshop-03">
    <div class="image-header__content">
        <h1 class="image-header__title">Digitale Produktentwicklung</h1>
        <h3>Wir entwickeln aus Ihren Ideen einzigartige Services.</h3>
        <span class="icon icon-arrow-long-down icon--brand-secondary"></span>
    </div>
</header>

<header class="image-header image-header--no-border bg-image-workshop-03">
    <div class="image-header__content">
        <h1 class="image-header__title">Digitale Produktentwicklung</h1>
        <h3>Wir entwickeln aus Ihren Ideen einzigartige Services.</h3>
        <span class="icon icon-arrow-long-down icon--brand-secondary"></span>
    </div>
</header>
 
<header class="image-header bg-image-culture-01">
    <div class="image-header__content">
        <h1 class="image-header__title image-header__title--punch-in bg-image-culture-01">Ein Titel</h1>
        <h3>Ich bin ein Untertitel</h3>
        <span class="icon icon-arrow-long-down icon--brand-secondary"></span>
    </div>
</header>

<header class="image-header bg-image-workshop-03">
    <div class="image-header__content">
        <h1 class="image-header__title">Digitale Produktentwicklung</h1>
        <h3>Wir entwickeln aus Ihren Ideen einzigartige Services.</h3>
        <span class="icon icon-arrow-long-down icon--brand-secondary"></span>
    </div>
</header>

<header class="image-header image-header--no-border bg-image-workshop-03">
    <div class="image-header__content">
        <h1 class="image-header__title">Digitale Produktentwicklung</h1>
        <h3>Wir entwickeln aus Ihren Ideen einzigartige Services.</h3>
        <span class="icon icon-arrow-long-down icon--brand-secondary"></span>
    </div>
</header>
 
/* No context defined. */
  • Content: 
    .image-header {
  display: flex;
  align-items: flex-end;
  justify-content: center;

  min-height: $fullscreen-real-mobile-height;

  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border: 10px solid $image-header-bg-color;

  &__content {
    width: 100%;
    padding: $spacer-base $spacer-xl;
    text-align: center;
    background-color: $image-header-content-bg-color;

    > * + * {
      margin-top: $spacer-md;
    }
  }

  &__title--punch-in {
    @extend %punch-in;
  }

  &--no-border {
    /* stylelint-disable-next-line declaration-no-important */
    border-style: none !important;
  }
}

//
// Media Queries
//
@media screen and (min-width: $grid-breakpoint-md) {
  .image-header {
    align-items: center;
    min-height: $fullscreen-real-desktop-height;
    border: 30px solid $image-header-bg-color;

    &__content {
      width: $default-page-layout-content-width-md;
      margin: $spacer-sm;
    }
  }
}
  • URL: /components/raw/image-header/_image-header.scss
  • Filesystem Path: components/03-organisms/header/image-header/_image-header.scss
  • Size: 968 Bytes
  • Handle: @image-header
  • Preview:
  • Filesystem Path: components/03-organisms/header/image-header/image-header.html

No notes defined.