<div class="demo demo--inverted">
    <a href="#" class="case-list-teaser bg-image-edition-12">
        <div class="case-list-teaser__wrapper">
            <div class="case-list-teaser__body">
                <div class="case-list-teaser__caption">case study</div>
                <h2 class="case-list-teaser__title punch-in bg-image-edition-12">
                    case study headline eggs
                </h2>
                <div class="case-list-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>
            <div class="case-list-teaser__footer">
                <span class="link-teaser">mehr erfahren</span>
            </div>
        </div>
    </a>

    <a href="#" class="case-list-teaser bg-image-edition-12">
        <div class="case-list-teaser__wrapper">
            <div class="case-list-teaser__body">
                <div class="case-list-teaser__caption">case study</div>
                <h2 class="case-list-teaser__title punch-in bg-image-edition-12">
                    case study headline eggs
                </h2>
                <img class="case-list-teaser__logo" src="../../assets/logos/edition-02/svg/innoq-logo--apricotpetrol.svg" />
            </div>
            <div class="case-list-teaser__footer">
                <span class="link-teaser">mehr erfahren</span>
            </div>
        </div>
    </a>

    <a href="#" class="case-list-teaser case-list-teaser--simple bg-image-edition-22">
        <div class="case-list-teaser__wrapper">
            <div class="case-list-teaser__body">
                <div class="case-list-teaser__caption">Case Study</div>
                <h2 class="case-list-teaser__title">
                    case study headline eggs
                </h2>
                <div class="case-list-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>
            <div class="case-list-teaser__footer">
                <span class="btn btn--small btn--cta" data-label="mehr erfahren">mehr erfahren</span>
            </div>
        </div>
    </a>
</div>
<div class="demo demo--inverted">
    <a href="#" class="case-list-teaser bg-image-edition-12">
        <div class="case-list-teaser__wrapper">
            <div class="case-list-teaser__body">
                <div class="case-list-teaser__caption">case study</div>
                <h2 class="case-list-teaser__title punch-in bg-image-edition-12">
                    case study headline eggs
                </h2>
                <div class="case-list-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>
            <div class="case-list-teaser__footer">
                <span class="link-teaser">mehr erfahren</span>
            </div>
        </div>
    </a>

    <a href="#" class="case-list-teaser bg-image-edition-12">
        <div class="case-list-teaser__wrapper">
            <div class="case-list-teaser__body">
                <div class="case-list-teaser__caption">case study</div>
                <h2 class="case-list-teaser__title punch-in bg-image-edition-12">
                    case study headline eggs
                </h2>
                <img class="case-list-teaser__logo"
                    src="{{ path '/assets/logos/edition-02/svg/innoq-logo--apricotpetrol.svg' }}" />
            </div>
            <div class="case-list-teaser__footer">
                <span class="link-teaser">mehr erfahren</span>
            </div>
        </div>
    </a>

    <a href="#" class="case-list-teaser case-list-teaser--simple bg-image-edition-22">
        <div class="case-list-teaser__wrapper">
            <div class="case-list-teaser__body">
                <div class="case-list-teaser__caption">Case Study</div>
                <h2 class="case-list-teaser__title">
                    case study headline eggs
                </h2>
                <div class="case-list-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>
            <div class="case-list-teaser__footer">
                <span class="btn btn--small btn--cta" data-label="mehr erfahren">mehr erfahren</span>
            </div>
        </div>
    </a>
</div>
/* No context defined. */
  • Content:
    .case-list-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;
      }
    
      // Variation without stencil Headlines
      &--simple {
        background-position: top left;
      }
    }
    
    .case-list-teaser__wrapper {
      display: flex;
      width: 100%;
      min-height: ms(35); //magic number
      flex-direction: column;
      justify-content: space-between;
      padding: $spacer-base $spacer-sm;
      background-color: $case-list-teaser-body-bg;
    }
    
    .case-list-teaser__body {
      display: flex;
      flex-direction: column;
      align-items: center;
      color: $case-list-teaser-body-color;
      text-align: center;
    
      > * + * {
        margin-top: $spacer-base;
      }
    }
    
    .case-list-teaser__footer {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: $spacer-base;
    }
    
    .case-list-teaser__caption {
      @extend %teaser-caption;
    
      height: $spacer-md;
    }
    
    .case-list-teaser__title {
      font-size: $font-size-xl;
    }
    
    .case-list-teaser__text {
      @extend %teaser-text;
    
      font-size: $font-size-base;
      line-height: $paragraph-line-height;
    }
    
    .case-list-teaser__logo {
      max-width: ms(22);
    }
    
    //
    // Media Queries
    //
    @media screen and (max-width: $grid-breakpoint-sm) {
      .case-list-teaser {
        padding: $spacer-sm;
        /* stylelint-disable-next-line */
        margin-bottom: ms(23) !important;
      }
    
      .case-list-teaser__wrapper {
        position: relative;
        top: ms(25);
      }
    }
    
    @media screen and (min-width: $grid-breakpoint-sm) {
      .case-list-teaser {
        padding: $spacer-lg;
      }
    
      .case-list-teaser__body {
        text-align: left;
      }
    
      .case-list-teaser__title {
        font-size: $font-size-2xl;
      }
    }
    
    @media screen and (min-width: $grid-breakpoint-md) {
      .case-list-teaser {
        max-width: $default-page-layout-content-width-xl;
        min-height: ms(40); //magic number
        flex-direction: row;
        justify-content: flex-start;
      }
    
      .case-list-teaser__wrapper {
        max-width: 50%;
        padding: $spacer-base;
      }
    
      .case-list-teaser__body {
        align-items: flex-start;
        text-align: left;
      }
    
      .case-list-teaser__text {
        font-size: $font-size-sm;
      }
    
      .case-list-teaser__footer {
        justify-content: flex-start;
      }
    }
    
  • 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.4 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.