<div class="demo--inverted">
    <a href="#" class="case-teaser bg-image-edition-12">
        <div class="case-teaser__wrapper">
            <div class="case-teaser__body">
                <div class="case-teaser__caption">case study</div>
                <div class="case-teaser__header">
                    <h2 class="punch-in bg-image-edition-12">case study headline eggs</h2>
                </div>
                <div class="case-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="case-teaser__footer">
                    <span class="link-teaser">mehr erfahren</span>
                </div>
            </div>
        </div>
    </a><a href="#" class="case-teaser bg-image-edition-12">
        <div class="case-teaser__wrapper">
            <div class="case-teaser__body">
                <div class="case-teaser__caption">case study</div>
                <div class="case-teaser__header">
                    <h2 class="punch-in bg-image-edition-12">
                        Eggs having success with a logo
                    </h2>
                </div>
                <img class="case-teaser__logo" src="../../assets/logos/edition-02/svg/innoq-logo--apricotpetrol.svg" />
                <div class="case-teaser__footer">
                    <span class="link-teaser">mehr erfahren</span>
                </div>
            </div>
        </div>
    </a><a href="#" class="case-teaser case-teaser--simple bg-image-edition-22">
        <div class="case-teaser__wrapper">
            <div class="case-teaser__body">
                <div class="case-teaser__caption">Case Study</div>
                <div class="case-teaser__header">
                    <h2>Case Study Headline</h2>
                </div>
                <div class="case-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="case-teaser__footer">
                    <span class="btn btn--small btn--cta" data-label="mehr erfahren">mehr erfahren</span>
                </div>
            </div>
        </div>
    </a>
</div>
<div class="demo--inverted">
     <a href="#" class="case-teaser bg-image-edition-12">
        <div class="case-teaser__wrapper">
            <div class="case-teaser__body">
                <div class="case-teaser__caption">case study</div>
                <div class="case-teaser__header">
                    <h2 class="punch-in bg-image-edition-12">
                        case study headline eggs
                    </h2>
                </div>
                <div class="case-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="case-teaser__footer">
                    <span class="link-teaser">mehr erfahren</span>
                </div>
            </div>
        </div>
    </a>

    <a href="#" class="case-teaser bg-image-edition-12">
        <div class="case-teaser__wrapper">
            <div class="case-teaser__body">
                <div class="case-teaser__caption">case study</div>
                <div class="case-teaser__header">
                    <h2 class="punch-in bg-image-edition-12">
                        Eggs having success with a logo
                    </h2>
                </div>
                <img class="case-teaser__logo"
                    src={context.app.uri('assets/logos/edition-02/svg/innoq-logo--apricotpetrol.svg')} />
                <div class="case-teaser__footer">
                    <span class="link-teaser">mehr erfahren</span>
                </div>
            </div>
        </div>
    </a>

    <a href="#" class="case-teaser case-teaser--simple bg-image-edition-22">
        <div class="case-teaser__wrapper">
            <div class="case-teaser__body">
                <div class="case-teaser__caption">Case Study</div>
                <div class="case-teaser__header">
                    <h2>Case Study Headline</h2>
                </div>
                <div class="case-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="case-teaser__footer">
                    <span class="btn btn--small btn--cta" data-label="mehr erfahren">mehr erfahren</span>
                </div>
            </div>
        </div>
    </a>
</div>
/* No context defined. */
  • Content:
    .case-teaser {
      @extend %list-teaser;
    
      display: flex;
      width: 100%;
      max-width: 100%;
      min-height: ms(38); //magic number
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background-blend-mode: multiply;
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
    
      &--right-aligned {
        justify-content: flex-end;
      }
    
      &__punch-in {
        @extend %punch-in;
      }
    }
    
    .case-teaser__wrapper {
      display: flex;
      width: 100%;
      justify-content: flex-start;
      padding: $spacer-sm;
    }
    
    .case-teaser__body {
      display: flex;
      min-height: ms(35); //magic number
      flex-basis: 100%;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: $spacer-base $spacer-sm;
      background-color: $case-teaser-body-bg;
      color: $case-teaser-body-color;
      text-align: center;
    }
    
    .case-teaser__text {
      @extend %teaser-text;
    
      margin-bottom: $spacer-base;
      font-size: $font-size-xs;
      hyphens: auto;
      line-height: $paragraph-line-height;
    }
    
    .case-teaser__logo {
      max-width: ms(22);
      margin-bottom: $spacer-base;
    }
    
    .case-teaser__header {
      padding-bottom: 0;
    
      h2 {
        font-size: $font-size-xl;
      }
    
      .punch-in {
        line-height: 1.31; // fix cut descender
      }
    }
    
    .case-teaser__caption {
      @extend %teaser-caption;
    
      height: $spacer-md;
      margin-bottom: $spacer-xxs;
    }
    
    //
    // Media Queries
    //
    
    @media screen and (max-width: $grid-breakpoint-sm) {
      .case-teaser {
        margin-bottom: ms(25);
      }
    
      .case-teaser__body {
        position: relative;
        top: ms(25);
      }
    }
    
    @media screen and (min-width: $grid-breakpoint-sm) {
      .case-teaser__wrapper {
        padding: $spacer-lg;
      }
    
      .case-teaser__body {
        align-items: flex-start;
        padding: $spacer-base;
        text-align: left;
      }
    
      .case-teaser__header {
        h2 {
          font-size: $font-size-xxxl;
        }
      }
    }
    
    @media screen and (min-width: $grid-breakpoint-md) {
      .case-teaser__wrapper {
        max-width: $default-page-layout-content-width-xl;
      }
    
      .case-teaser__text {
        font-size: $font-size-sm;
        hyphens: none;
      }
    
      // Variation without stencil Headlines
      .case-teaser--simple {
        background-position: top left;
      }
    
      .case-teaser {
        min-height: ms(40); //magic number
      }
    
      .case-teaser__body {
        flex-basis: 50%;
      }
    }
    
  • URL: /components/raw/case-list-teaser/_case-list-teaser.scss
  • Filesystem Path: components/04-molecules/visual-elements/teaser/list-teaser/case-list-teaser/_case-list-teaser.scss
  • Size: 2.3 KB
  • Handle: @case-list-teaser
  • Preview:
  • Filesystem Path: components/04-molecules/visual-elements/teaser/list-teaser/case-list-teaser/case-list-teaser.html

No notes defined.