<div class="default-full-width-teaser bg-image-edition-19">
    <div class="default-full-width-teaser__wrapper">
        <div class="default-full-width-teaser__body">
            <div>
                <div class="default-full-width-teaser__caption">case study</div>
                <div>
                    <div class="default-full-width-teaser__header">
                        <h2 class="punch-in bg-image-edition-19">
                            case study headline eggs
                        </h2>
                    </div>
                    <div class="default-full-width-teaser__text">
                        lorem ipsum dolor sit amet, consectetur adipisicing elit. velit
                        doloremque culpa minima vero quod, optio itaque nisi deserunt,
                        debitis ad laudantium libero, quia nemo!
                    </div>
                    <div class="default-full-width-teaser__footer">
                        <a href="#" class="link-teaser">mehr erfahren</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="
    default-full-width-teaser default-full-width-teaser--simple
    bg-image-edition-19
  ">
    <div class="default-full-width-teaser__wrapper">
        <div class="default-full-width-teaser__body">
            <div>
                <div class="default-full-width-teaser__caption">Case Study</div>
                <div>
                    <div class="default-full-width-teaser__header">
                        <h2>Case Study Headline</h2>
                    </div>
                    <div class="default-full-width-teaser__text">
                        lorem ipsum dolor sit amet, consectetur adipisicing elit. velit
                        doloremque culpa minima vero quod, optio itaque nisi deserunt,
                        debitis ad laudantium libero, quia nemo!
                    </div>
                    <div class="default-full-width-teaser__footer">
                        <a href="#" class="btn btn--small btn--cta" data-label="mehr erfahren">mehr erfahren</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="default-full-width-teaser bg-image-edition-19">
    <div class="default-full-width-teaser__wrapper">
        <div class="default-full-width-teaser__body">
            <div>
                <div class="default-full-width-teaser__caption">case study</div>
                <div>
                    <div class="default-full-width-teaser__header">
                        <h2 class="punch-in bg-image-edition-19">
                            case study headline eggs
                        </h2>
                    </div>
                    <div class="default-full-width-teaser__text">
                        lorem ipsum dolor sit amet, consectetur adipisicing elit. velit
                        doloremque culpa minima vero quod, optio itaque nisi deserunt,
                        debitis ad laudantium libero, quia nemo!
                    </div>
                    <div class="default-full-width-teaser__footer">
                        <a href="#" class="link-teaser">mehr erfahren</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="default-full-width-teaser default-full-width-teaser--simple bg-image-edition-19">
    <div class="default-full-width-teaser__wrapper">
        <div class="default-full-width-teaser__body">
            <div>
                <div class="default-full-width-teaser__caption">Case Study</div>
                <div>
                    <div class="default-full-width-teaser__header">
                        <h2>Case Study Headline</h2>
                    </div>
                    <div class="default-full-width-teaser__text">
                        lorem ipsum dolor sit amet, consectetur adipisicing elit. velit
                        doloremque culpa minima vero quod, optio itaque nisi deserunt,
                        debitis ad laudantium libero, quia nemo!
                    </div>
                    <div class="default-full-width-teaser__footer">
                        <a href="#" class="btn btn--small btn--cta" data-label="mehr erfahren">mehr erfahren</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
/* No context defined. */
  • Content:
    $full-width-teaser-bg-width: 1444px; // Arbitrary value
    $full-width-teaser-bg-height: 1000px; // Arbitrary value
    $full-width-teaser-height: ms(38);
    
    .default-full-width-teaser {
      @extend %page-header;
    
      width: 100%;
      max-width: 100%;
      min-height: $full-width-teaser-height;
      justify-content: center;
    
      &--right-aligned {
        justify-content: flex-end;
      }
    
      &__punch-in {
        @extend %punch-in;
      }
    }
    
    .default-full-width-teaser__wrapper {
      display: flex;
      justify-content: flex-start;
      padding: $spacer-sm;
    }
    
    .default-full-width-teaser__body {
      display: flex;
      flex-basis: 100%;
      flex-direction: column;
      justify-content: space-between;
      padding: $spacer-base;
      background-color: $full-width-teaser-body-bg;
      color: $full-width-teaser-body-color;
    }
    
    .default-full-width-teaser__text {
      @extend %teaser-text;
    
      margin-bottom: $spacer-base;
      font-size: $font-size-xs;
      hyphens: auto;
      line-height: $paragraph-line-height;
    }
    
    .default-full-width-teaser__header {
      padding-bottom: 0;
    
      h2 {
        font-size: $font-size-xxxl;
      }
    
      .punch-in {
        line-height: 1.31; // fix cut descender
      }
    }
    
    .default-full-width-teaser__caption {
      @extend %teaser-caption;
    
      height: $spacer-md;
      margin-bottom: $spacer-xxs;
    }
    
    //
    // Media Queries
    //
    
    @media screen and (max-width: $grid-breakpoint-sm) {
      .default-full-width-teaser {
        margin-bottom: $spacer-xxl;
      }
    
      .default-full-width-teaser__body {
        position: relative;
        top: $spacer-xxl;
      }
    }
    
    @media screen and (min-width: $grid-breakpoint-md) {
      .default-full-width-teaser__wrapper {
        padding: $spacer-base;
      }
    }
    
    @media screen and (min-width: $grid-breakpoint-md-lg) {
      .default-full-width-teaser__wrapper {
        width: $default-page-layout-width-xl;
        max-width: $default-page-layout-content-width-xl;
        padding: $spacer-sm;
      }
    
      .default-full-width-teaser__text {
        font-size: $font-size-sm;
        hyphens: none;
      }
    
      // Variation without stencil Headlines
      .default-full-width-teaser--simple {
        background-position: top left;
      }
    }
    
    @media screen and (min-width: $grid-breakpoint-lg) {
      .default-full-width-teaser__body {
        flex-basis: 50%;
      }
    }
    
  • URL: /components/raw/default-full-width-teaser/_default-full-width-teaser.scss
  • Filesystem Path: components/04-molecules/visual-elements/teaser/full-width-teaser/default-full-width-teaser/_default-full-width-teaser.scss
  • Size: 2.1 KB
  • Handle: @default-full-width-teaser
  • Preview:
  • Filesystem Path: components/04-molecules/visual-elements/teaser/full-width-teaser/default-full-width-teaser/default-full-width-teaser.html

No notes defined.