# Case Tile Teaser

Ready

- HTML
- View
- Context
- Assets
- Info
- Notes

`

    <div class="tile-grid-md">
        <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="btn btn--xsmall btn--cta" data-label="Zur Trendseite">Zur Trendseite</span>
                    <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. 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="tile-grid-sm 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="tile-grid-md">
        <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="{{ path '/assets/logos/edition-02/svg/innoq-logo--apricotpetrol.svg' }}" />
                </div>
                <div class="case-tile-teaser__goto">
                    <span class="btn btn--xsmall btn--cta" data-label="Zur Trendseite">Zur Trendseite</span>
                    <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. 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="tile-grid-sm 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="{{ path '/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. */

`
File:

- Content:
  `

      $case-tile-teaser-sm-height: ms(32);

      .case-tile-teaser {
        @extend %block-link;
        @extend %hover-glow;

        display: flex;
        flex-direction: column;

        padding: $spacer-md;

        color: $case-tile-teaser-text-color;

        background-size: cover;
        background-blend-mode: multiply;
      }

      .case-tile-teaser__content {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        justify-content: space-between;

        padding: $spacer-md $spacer-xs;

        text-align: center;

        background-color: $case-tile-teaser-body-bg-color;

        > * + * {
          margin-top: $spacer-base;
        }
      }

      .case-tile-teaser__body {
        > * + * {
          margin-top: $spacer-base;
        }
      }

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

        line-height: $paragraph-line-height;
        color: $case-tile-teaser-text-color;

        &--workshop {
          @extend %teaser-text;

          line-height: $paragraph-line-height;
          color: $case-tile-teaser-text-color;
        }
      }

      .case-tile-teaser__logo {
        max-width: ms(22);
      }

      .case-tile-teaser__goto {
        display: flex;
        flex-direction: column;
        align-items: center;

        > * + * {
          margin-top: $spacer-sm;
        }
      }

      //
      // case-tile-teaser--sm
      //
      .case-tile-teaser--sm {
        min-height: $case-tile-teaser-sm-height;
        margin-bottom: $spacer-xxl;
        padding: $spacer-lg $spacer-xs;
      }

      .case-tile-teaser__content--sm {
        position: relative;
        bottom: -(ms(25));
        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;
        }

        .case-tile-teaser--sm {
          padding: $spacer-lg;
        }
      }

      // Hack for teaser 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/teaser/tile-teaser/case-tile-teaser/_case-tile-teaser.scss
- Size: 2.3 KB

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

No notes defined.