<div class="page-layout--xl-default">
    <div class="blocks"><a href="#" class="teaser big-content-teaser big-content-teaser--inverted">
            <div class="big-content-teaser__content">
                <div class="big-content-teaser__body">
                    <h2 class="big-content-teaser__headline big-content-teaser__headline--inverted">Dies ist eine Geschäftsmodelle Headline</h2>
                    <p class="big-content-teaser__text">Lorem gibson 8-bit Freeside denim otaku sign boy neon warp long-chain hydrocarbons car.</p>
                </div>
                <div class="big-content-teaser__footer">
                    <div class="link-teaser inverted-interaction-color" href="#">Mehr erfahren</div>
                </div>
            </div>
        </a>
        <a href="#" class="teaser big-content-teaser big-content-teaser--colored">
            <div class="big-content-teaser__content">
                <div class="big-content-teaser__body">
                    <h2 class="big-content-teaser__headline">Dies ist eine Headline</h2>
                    <p class="big-content-teaser__text">Lorem gibson 8-bit Freeside denim otaku sign boy neon warp long-chain
                        hydrocarbons car.</p>
                </div>
                <div class="big-content-teaser__footer">
                    <div class="link-teaser inverted-text-color" href="#">Mehr erfahren</div>
                </div>
            </div>
        </a>
    </div>
    <div class="blocks"><a href="#" class="teaser big-content-teaser big-content-teaser--image big-content-teaser-bg-image-igel">
            <div class="big-content-teaser__content">
                <div class="big-content-teaser__body">
                    <h2 class="big-content-teaser__headline">Dies ist eine Technologieberatung Headline</h2>
                    <p class="big-content-teaser__text">Lorem gibson 8-bit Freeside denim otaku sign boy neon warp long-chain hydrocarbons car.</p>
                </div>
                <div class="big-content-teaser__footer">
                    <div class="link-teaser" href="#">Mehr erfahren</div>
                </div>
            </div>
        </a>
        <a href="#" class="teaser big-content-teaser big-content-teaser--image big-content-teaser-bg-image-medusa">
            <div class="big-content-teaser__content filled-background">
                <div class="big-content-teaser__body">
                    <h2 class="big-content-teaser__headline">Dies ist eine Headline</h2>
                    <p class="big-content-teaser__text">Lorem gibson 8-bit Freeside denim otaku sign boy neon warp long-chain
                        hydrocarbons car.</p>
                </div>
                <div class="big-content-teaser__footer">
                    <div class="link-teaser" href="#">Mehr erfahren</div>
                </div>
            </div>
        </a>
    </div>
    <div class="blocks"><a href="#" class="teaser big-content-teaser big-content-teaser--image big-content-teaser-bg-image-girl">
            <div class="big-content-teaser__content">
                <div class="big-content-teaser__body">
                    <h2 class="big-content-teaser__headline">Dies ist eine Headline</h2>
                    <p class="big-content-teaser__text">Lorem gibson 8-bit Freeside denim otaku sign boy neon warp long-chain hydrocarbons car.</p>
                </div>
                <div class="big-content-teaser__footer">
                    <div class="link-teaser" href="#">Mehr erfahren</div>
                </div>
            </div>
        </a>
        <a href="#" class="teaser big-content-teaser big-content-teaser--image big-content-teaser-bg-image-ice">
            <div class="big-content-teaser__content filled-background">
                <div class="big-content-teaser__body">
                    <h2 class="big-content-teaser__headline">Dies ist eine Headline</h2>
                    <p class="big-content-teaser__text">Lorem gibson 8-bit Freeside denim otaku sign boy neon warp long-chain
                        hydrocarbons car.</p>
                </div>
                <div class="big-content-teaser__footer">
                    <div class="link-teaser" href="#">Mehr erfahren</div>
                </div>
            </div>
        </a>
    </div>
</div>
<div class="page-layout--xl-default">
    <div class="blocks">
        <a href="#" class="teaser big-content-teaser big-content-teaser--inverted">
            <div class="big-content-teaser__content">
                <div class="big-content-teaser__body">
                    <h2 class="big-content-teaser__headline big-content-teaser__headline--inverted">Dies ist eine Geschäftsmodelle Headline</h2>
                    <p class="big-content-teaser__text">
                        Lorem gibson 8-bit Freeside denim otaku sign boy neon warp long-chain hydrocarbons car.
                    </p>
                </div>
                <div class="big-content-teaser__footer">
                    <div class="link-teaser inverted-interaction-color" href="#">Mehr erfahren</div>
                </div>
            </div>
        </a>
        <a href="#" class="teaser big-content-teaser big-content-teaser--colored">
            <div class="big-content-teaser__content">
                <div class="big-content-teaser__body">
                    <h2 class="big-content-teaser__headline">Dies ist eine Headline</h2>
                    <p class="big-content-teaser__text">
                        Lorem gibson 8-bit Freeside denim otaku sign boy neon warp long-chain hydrocarbons car.
                    </p>
                </div>
                <div class="big-content-teaser__footer">
                    <div class="link-teaser inverted-text-color" href="#">Mehr erfahren</div>
                </div>
            </div>
        </a>
    </div>

    <div class="blocks">
        <a href="#" class="teaser big-content-teaser big-content-teaser--image big-content-teaser-bg-image-igel">
            <div class="big-content-teaser__content">
                <div class="big-content-teaser__body">
                    <h2 class="big-content-teaser__headline">Dies ist eine Technologieberatung Headline</h2>
                    <p class="big-content-teaser__text">
                        Lorem gibson 8-bit Freeside denim otaku sign boy neon warp long-chain hydrocarbons car.
                    </p>
                </div>
                <div class="big-content-teaser__footer">
                    <div class="link-teaser" href="#">Mehr erfahren</div>
                </div>
            </div>
        </a>
        <a href="#" class="teaser big-content-teaser big-content-teaser--image big-content-teaser-bg-image-medusa">
            <div class="big-content-teaser__content filled-background">
                <div class="big-content-teaser__body">
                    <h2 class="big-content-teaser__headline">Dies ist eine Headline</h2>
                    <p class="big-content-teaser__text">
                        Lorem gibson 8-bit Freeside denim otaku sign boy neon warp long-chain hydrocarbons car.
                    </p>
                </div>
                <div class="big-content-teaser__footer">
                    <div class="link-teaser" href="#">Mehr erfahren</div>
                </div>
            </div>
        </a>
    </div>

    <div class="blocks">
        <a href="#" class="teaser big-content-teaser big-content-teaser--image big-content-teaser-bg-image-girl">
            <div class="big-content-teaser__content">
                <div class="big-content-teaser__body">
                    <h2 class="big-content-teaser__headline">Dies ist eine Headline</h2>
                    <p class="big-content-teaser__text">
                        Lorem gibson 8-bit Freeside denim otaku sign boy neon warp long-chain hydrocarbons car.
                    </p>
                </div>
                <div class="big-content-teaser__footer">
                    <div class="link-teaser" href="#">Mehr erfahren</div>
                </div>
            </div>
        </a>
        <a href="#" class="teaser big-content-teaser big-content-teaser--image big-content-teaser-bg-image-ice">
            <div class="big-content-teaser__content filled-background">
                <div class="big-content-teaser__body">
                    <h2 class="big-content-teaser__headline">Dies ist eine Headline</h2>
                    <p class="big-content-teaser__text">
                        Lorem gibson 8-bit Freeside denim otaku sign boy neon warp long-chain hydrocarbons car.
                    </p>
                </div>
                <div class="big-content-teaser__footer">
                    <div class="link-teaser" href="#">Mehr erfahren</div>
                </div>
            </div>
        </a>
    </div>
</div>
/* No context defined for this component. */
  • Content:
    $big-content-teaser-height-sm: ms(35);
    $big-content-teaser-height-md: ms(38);
    
    .big-content-teaser {
      @extend %block-link;
      @extend %hover-zoom-in;
    
      display: flex;
      justify-content: center;
      // IE11 Hack
      // sass-lint:disable no-vendor-prefixes
      @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
        max-width: 100%;
        height: 100%;
      }
      min-height: $big-content-teaser-height-sm;
    }
    
    .big-content-teaser__content {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: $spacer-lg $spacer-base;
      // IE11 Hack
      // sass-lint:disable no-vendor-prefixes
      @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
        width: 100%;
        height: 100%;
      }
    
    }
    
    .big-content-teaser__headline {
      @extend %heading-font-heavy;
    
      line-height: $big-content-teaser-headline-line-height-small;
      color: $big-content-teaser-headline-color;
      font-size: $big-content-teaser-headline-font-size-small;
    }
    
    .big-content-teaser__text {
      @extend %heading-font-regular;
    
      line-height: $big-content-teaser-text-line-height-small;
      font-size: $big-content-teaser-text-font-size-small;
      hyphens: auto;
    }
    
    .big-content-teaser__footer {
      margin-bottom: 0;
    
      > * {
        margin: 0;
      }
    
      .link-teaser {
        display: inline;
      }
    }
    
    
    // Variations
    .big-content-teaser--inverted {
      background-color: $content-teaser-inverted-bg;
      color: $content-teaser-inverted-color;
    
      .big-content-teaser__headline--inverted {
        color: $big-content-teaser-headline-inverted-color;
      }
    }
    
    .big-content-teaser--colored {
      background-color: $content-teaser-colored-bg;
      color: $content-teaser-colored-color;
    }
    
    .big-content-teaser--image {
      .big-content-teaser__content {
        margin: $spacer-sm;
        background-color: $big-content-teaser-bg-color;
        padding: $spacer-sm;
      }
    
      .big-content-teaser__headline {
        color: $big-content-teaser-image-headline-color;
      }
    }
    
    //Background images for topic header
    .big-content-teaser-bg-image-girl {
      background-image: asset-url('visual-header-girl.jpg');
      background-position: center;
    }
    
    .big-content-teaser-bg-image-medusa {
      background-image: asset-url('visual-header-medusa.jpg');
      background-position: center;
    }
    
    .big-content-teaser-bg-image-ice {
      background-image: asset-url('visual-header-ice.jpg');
      background-position: center;
    }
    
    .big-content-teaser-bg-image-igel {
      background-image: asset-url('visual-header-igel-1444.jpg');
      background-position: center;
    }
    
    .topic-header-bg-image-koralle {
      background-image: asset-url('visual-header-koralle.jpg');
      background-position: center;
    }
    
    
    // Breakpoints
    @media screen and (min-width: $grid-breakpoint-md) {
      .big-content-teaser {
        min-height: $big-content-teaser-height-md;
      }
    
      .big-content-teaser__content {
        padding: $spacer-xl $spacer-lg;
      }
    
      .big-content-teaser__headline {
        line-height: $big-content-teaser-headline-line-height;
        font-size: $big-content-teaser-headline-font-size-md;
      }
    
      .big-content-teaser__text {
        line-height: $big-content-teaser-text-line-height;
        font-size: $big-content-teaser-text-font-size;
      }
    
      .big-content-teaser--image {
        .big-content-teaser__content {
          margin: $spacer-base;
          padding: $spacer-base;
        }
      }
    }
    
    @media screen and (min-width: $grid-breakpoint-lg) {
      .big-content-teaser__text {
        hyphens: none;
      }
    
      .big-content-teaser__headline {
        font-size: $big-content-teaser-headline-font-size;
      }
    }
    
  • URL: /components/raw/big-content-tile-teaser/_big-content-tile-teaser.scss
  • Filesystem Path: components/02-molecules/teaser/tile-teaser/big-content-tile-teaser/_big-content-tile-teaser.scss
  • Size: 3.5 KB
  • Handle: @big-content-tile-teaser
  • Preview:
  • Filesystem Path: components/02-molecules/teaser/tile-teaser/big-content-tile-teaser/big-content-tile-teaser.html

There are no notes for this item.