Case List Teaser 

<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;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  width: 100%;
  max-width: 100%;
  min-height: ms(38); //magic number

  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-blend-mode: multiply;

  &--right-aligned {
    justify-content: flex-end;
  }

  // Variation without stencil Headlines
  &--simple {
    background-position: top left;
  }
}

a.case-list-teaser {
  @extend %hover-glow;
}

.case-list-teaser__wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  width: 100%;
  min-height: ms(35); //magic number
  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;
  }
}

@media screen and (min-width: $grid-breakpoint-md) {
  .case-list-teaser {
    flex-direction: row;
    justify-content: flex-start;
    max-width: $default-page-layout-content-width-xl;
    min-height: ms(40); //magic number
  }

  .case-list-teaser__wrapper {
    max-width: 70%;
    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/teaser/list-teaser/case-list-teaser/_case-list-teaser.scss
  • Size: 2.4 KB
  • Handle: @case-list-teaser
  • Preview:
  • Filesystem Path: components/04-molecules/teaser/list-teaser/case-list-teaser/case-list-teaser.html

No notes defined.