# 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.