<div class="blocks">
    <a href="#" class="case-tile-teaser bg-image-edition-12">
        <div class="case-tile-teaser__content">
            <div class="case-tile-teaser__body">
                <h2 class="case-tile-teaser__caption">Case Study</h2>
                <h2 class="case-tile-teaser__headline">Dies ist eine Headline</h2>
                <div class="case-tile-teaser__text">
                    Lorem gibson 8-bit Freeside denim otaku sign boy neon warp long-chain
                    hydrocarbons car.
                </div>
                <img class="case-tile-teaser__logo" src="../../assets/logos/edition-02/svg/innoq-logo--apricotpetrol.svg" />
            </div>
            <div class="case-tile-teaser__goto">
                <span class="link-teaser">zum Projekt</span>
            </div>
        </div>
    </a><a href="#" class="case-tile-teaser bg-image-edition-12">
        <div class="case-tile-teaser__content">
            <div class="case-tile-teaser__body">
                <h2 class="case-tile-teaser__caption">Case Study</h2>
                <h2 class="case-tile-teaser__headline">Dies ist eine Headline</h2>
                <div class="case-tile-teaser__text">
                    Lorem gibson 8-bit Freeside denim otaku sign boy neon warp long-chain
                    hydrocarbons car.
                </div>
            </div>
            <div class="case-tile-teaser__goto">
                <span class="link-teaser">zum Projekt</span>
            </div>
        </div>
    </a>
</div>
<div class="blocks demo--inverted">
    <a href="#" class="case-tile-teaser bg-image-edition-12 case-tile-teaser--sm">
        <div class="case-tile-teaser__content case-tile-teaser__content--sm">
            <div class="case-tile-teaser__body">
                <h2 class="case-tile-teaser__caption">Case Study</h2>
                <h2 class="case-tile-teaser__headline case-tile-teaser__headline--sm">
                    Dies ist eine Headline
                </h2>
                <div class="case-tile-teaser__text case-tile-teaser__text--sm">
                    Lorem gibson 8-bit Freeside denim otaku sign boy neon warp long-chain
                    hydrocarbons car.
                </div>
            </div>
            <div class="case-tile-teaser__goto">
                <span class="link-teaser">zum Projekt</span>
            </div>
        </div>
    </a><a href="#" class="case-tile-teaser bg-image-edition-12 case-tile-teaser--sm">
        <div class="case-tile-teaser__content case-tile-teaser__content--sm">
            <div class="case-tile-teaser__body">
                <h2 class="case-tile-teaser__caption">Case Study</h2>
                <h2 class="case-tile-teaser__headline case-tile-teaser__headline--sm">
                    Dies ist eine Headline
                </h2>
                <div class="case-tile-teaser__text">
                    Lorem gibson 8-bit Freeside denim otaku sign boy neon warp long-chain
                    hydrocarbons car.
                </div>
                <img class="case-tile-teaser__logo" src="../../assets/logos/edition-02/svg/innoq-logo--apricotpetrol.svg" />
            </div>
            <div class="case-tile-teaser__goto">
                <span class="link-teaser">zum Projekt</span>
            </div>
        </div>
    </a><a href="#" class="case-tile-teaser bg-image-edition-12 case-tile-teaser--sm">
        <div class="case-tile-teaser__content case-tile-teaser__content--sm">
            <div class="case-tile-teaser__body">
                <h2 class="case-tile-teaser__caption">Case Study</h2>
                <h2 class="case-tile-teaser__headline case-tile-teaser__headline--sm">
                    Dies ist eine Headline
                </h2>
                <div class="case-tile-teaser__text case-tile-teaser__text--sm">
                    Lorem gibson 8-bit Freeside denim otaku sign boy neon warp long-chain
                    hydrocarbons car.
                </div>
            </div>
            <div class="case-tile-teaser__goto">
                <span class="link-teaser">zum Projekt</span>
            </div>
        </div>
    </a>
</div>
<div class="blocks">
    <a href="#" class="case-tile-teaser bg-image-edition-12">
        <div class="case-tile-teaser__content">
            <div class="case-tile-teaser__body">
                <h2 class="case-tile-teaser__caption">Case Study</h2>
                <h2 class="case-tile-teaser__headline">Dies ist eine Headline</h2>
                <div class="case-tile-teaser__text">
                    Lorem gibson 8-bit Freeside denim otaku sign boy neon warp long-chain
                    hydrocarbons car.
                </div>
                <img class="case-tile-teaser__logo" src={context.app.uri('assets/logos/edition-02/svg/innoq-logo--apricotpetrol.svg')} />
            </div>
            <div class="case-tile-teaser__goto">
                <span class="link-teaser">zum Projekt</span>
            </div>
        </div>
    </a>
    <a href="#" class="case-tile-teaser bg-image-edition-12">
        <div class="case-tile-teaser__content">
            <div class="case-tile-teaser__body">
                <h2 class="case-tile-teaser__caption">Case Study</h2>
                <h2 class="case-tile-teaser__headline">Dies ist eine Headline</h2>
                <div class="case-tile-teaser__text">
                    Lorem gibson 8-bit Freeside denim otaku sign boy neon warp long-chain
                    hydrocarbons car.
                </div>
            </div>
            <div class="case-tile-teaser__goto">
                <span class="link-teaser">zum Projekt</span>
            </div>
        </div>
    </a>
</div>

<div class="blocks demo--inverted">
    <a href="#" class="case-tile-teaser bg-image-edition-12 case-tile-teaser--sm">
        <div class="case-tile-teaser__content case-tile-teaser__content--sm">
            <div class="case-tile-teaser__body">
                <h2 class="case-tile-teaser__caption">Case Study</h2>
                <h2 class="case-tile-teaser__headline case-tile-teaser__headline--sm">
                    Dies ist eine Headline
                </h2>
                <div class="case-tile-teaser__text case-tile-teaser__text--sm">
                    Lorem gibson 8-bit Freeside denim otaku sign boy neon warp long-chain
                    hydrocarbons car.
                </div>
            </div>
            <div class="case-tile-teaser__goto">
                <span class="link-teaser">zum Projekt</span>
            </div>
        </div>
    </a>
    <a href="#" class="case-tile-teaser bg-image-edition-12 case-tile-teaser--sm">
        <div class="case-tile-teaser__content case-tile-teaser__content--sm">
            <div class="case-tile-teaser__body">
                <h2 class="case-tile-teaser__caption">Case Study</h2>
                <h2 class="case-tile-teaser__headline case-tile-teaser__headline--sm">
                    Dies ist eine Headline
                </h2>
                <div class="case-tile-teaser__text">
                    Lorem gibson 8-bit Freeside denim otaku sign boy neon warp long-chain
                    hydrocarbons car.
                </div>
                <img class="case-tile-teaser__logo" src={context.app.uri('assets/logos/edition-02/svg/innoq-logo--apricotpetrol.svg')} />
            </div>
            <div class="case-tile-teaser__goto">
                <span class="link-teaser">zum Projekt</span>
            </div>
        </div>
    </a>
    <a href="#" class="case-tile-teaser bg-image-edition-12 case-tile-teaser--sm">
        <div class="case-tile-teaser__content case-tile-teaser__content--sm">
            <div class="case-tile-teaser__body">
                <h2 class="case-tile-teaser__caption">Case Study</h2>
                <h2 class="case-tile-teaser__headline case-tile-teaser__headline--sm">
                    Dies ist eine Headline
                </h2>
                <div class="case-tile-teaser__text case-tile-teaser__text--sm">
                    Lorem gibson 8-bit Freeside denim otaku sign boy neon warp long-chain
                    hydrocarbons car.
                </div>
            </div>
            <div class="case-tile-teaser__goto">
                <span class="link-teaser">zum Projekt</span>
            </div>
        </div>
    </a>
</div>
/* No context defined. */
  • Content:
    $case-tile-teaser-sm-height: ms(32);
    
    //
    // case tile teaser
    //
    .case-tile-teaser {
      @extend %block-link;
      @extend %hover-glow;
    
      display: flex;
      flex-direction: column;
      padding: $spacer-md;
      background-blend-mode: multiply;
      background-size: cover;
      color: $case-tile-teaser-text-color;
    }
    
    .case-tile-teaser__content {
      display: flex;
      flex-direction: column;
      flex-grow: 1;
      justify-content: space-between;
      padding: $spacer-md $spacer-xs;
      background-color: $case-tile-teaser-body-bg-color;
    
      h2 {
        margin-bottom: 0; // FIXME Remove all generic margin-bottoms
      }
    
      * + * {
        margin-top: $spacer-base;
      }
    }
    
    .case-tile-teaser__body {
      text-align: center;
    }
    
    .case-tile-teaser__caption {
      @extend %teaser-caption;
    
      color: $case-tile-teaser-text-color;
    }
    
    .case-tile-teaser__headline {
      color: $case-tile-teaser-text-color;
    }
    
    .case-tile-teaser__text {
      @extend %teaser-text-italic;
    
      color: $case-tile-teaser-text-color;
    }
    
    .case-tile-teaser__logo {
      max-width: ms(22);
    }
    
    .case-tile-teaser__goto {
      text-align: center;
    }
    
    //
    // case-tile-teaser--sm
    //
    .case-tile-teaser--sm {
      min-height: $case-tile-teaser-sm-height;
      padding: $spacer-md;
      margin-bottom: $spacer-xxl;
    }
    
    .case-tile-teaser__content--sm {
      position: relative;
      top: $spacer-xxl;
      justify-content: space-between;
      padding: $spacer-sm;
    }
    
    .case-tile-teaser__headline--sm {
      font-size: $font-size-sm;
    }
    
    .case-tile-teaser__text--sm {
      margin-bottom: $spacer-xs;
      font-size: $font-size-base;
    }
    
    //
    // Breakpoints
    //
    
    @media screen and (min-width: $grid-breakpoint-sm) {
      .case-tile-teaser {
        padding: $spacer-lg;
      }
    }
    
    @media screen and (min-width: $grid-breakpoint-md) {
      .case-tile-teaser__content {
        padding: $spacer-lg $spacer-md;
      }
    }
    
    // Hack for tease in masonry grid
    @media screen and (min-width: $grid-breakpoint-lg) {
      .case-tile-teaser {
        padding: $spacer-xl;
      }
    
      .span-5 {
        .case-tile-teaser__content {
          max-width: ms(37);
        }
      }
    }
    
  • URL: /components/raw/case-tile-teaser/_case-tile-teaser.scss
  • Filesystem Path: components/04-molecules/visual-elements/teaser/tile-teaser/case-tile-teaser/_case-tile-teaser.scss
  • Size: 2 KB
  • Handle: @case-tile-teaser
  • Preview:
  • Filesystem Path: components/04-molecules/visual-elements/teaser/tile-teaser/case-tile-teaser/case-tile-teaser.html

No notes defined.