Big Content Tile Teaser

Ready

HTML
View
Context
Assets
Info
Notes


        
        <a href="#" class="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="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>

<a href="#" class="big-content-teaser big-content-teaser--image bg-image-edition-10">
    <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="big-content-teaser big-content-teaser--image bg-image-edition-02">
    <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="big-content-teaser big-content-teaser--image bg-image-edition-10">
    <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="big-content-teaser big-content-teaser--image bg-image-edition-06">
    <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="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="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>

<a href="#" class="big-content-teaser big-content-teaser--image bg-image-edition-10">
    <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="big-content-teaser big-content-teaser--image bg-image-edition-02">
    <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="big-content-teaser big-content-teaser--image bg-image-edition-10">
    <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="big-content-teaser big-content-teaser--image bg-image-edition-06">
    <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>


        
            
            /* No context defined. */

File:

Content:


                                $big-content-teaser-height-sm: ms(35);
$big-content-teaser-height-md: ms(38);

.big-content-teaser {
  @extend %block-link;

  display: flex;
  justify-content: center;
  min-height: $big-content-teaser-height-sm;
  background-blend-mode: multiply;
}

a.big-content-teaser {
  @extend %hover-glow;
}

.big-content-teaser__content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: $spacer-lg $spacer-base;
}

.big-content-teaser__headline {
  @extend %heading-font-heavy;

  font-size: $font-size-lg;
  color: $big-content-teaser-headline-color;
}

.big-content-teaser__text {
  @extend %heading-font-regular;

  margin-top: $spacer-md;
  font-size: $font-size-base;
  color: $big-content-teaser-text-color;
}

.big-content-teaser__footer {
  margin-top: $spacer-md;

  .link-teaser {
    display: inline;
  }
}

// Variations
.big-content-teaser--inverted {
  color: $big-content-teaser-text-color;
  background-color: $big-content-teaser-bg-color-secondary;

  .big-content-teaser__headline--inverted,
  .big-content-teaser__text {
    color: $big-content-teaser-headline-inverted-color;
  }
}

.big-content-teaser--colored {
  background-color: $big-content-teaser-bg-color-primary;
}

.big-content-teaser--image {
  .big-content-teaser__content {
    margin: $spacer-sm;
    padding: $spacer-sm;
    background-color: $big-content-teaser-bg-color;
  }

  .big-content-teaser__headline {
    color: $big-content-teaser-image-headline-color;
  }
}

// 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 {
    font-size: $font-size-xl;
  }

  .big-content-teaser__text {
    font-size: $font-size-sm;
  }

  .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__headline {
    font-size: $font-size-2xl;
  }
}

URL: /components/raw/big-content-tile-teaser/_big-content-tile-teaser.scss
Filesystem Path: components/04-molecules/teaser/tile-teaser/big-content-tile-teaser/_big-content-tile-teaser.scss
Size: 2.1 KB

Handle: @big-content-tile-teaser
Preview:
- With layout
- Component only
Filesystem Path: components/04-molecules/teaser/tile-teaser/big-content-tile-teaser/big-content-tile-teaser.html

No notes defined.