# Image Header

Ready

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

`

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

`
File:

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

No notes defined.