Case Tile Teaser

Ready

HTML
View
Context
Assets
Info
Notes


        
        <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>
                <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">
    <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>
                <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>
                <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">
    <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>
                <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. */

File:

Content:


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

//
// case tile teaser
//
.case-tile-teaser {
  @extend %block-link;
  @extend %hover-zoom-in;

  display: flex;
  flex-direction: column;
  background-size: cover;
  padding: $spacer-sm $spacer-xs;
  color: $case-tile-teaser-text-color;
}

.case-tile-teaser__content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-between;
  background-color: $case-tile-teaser-body-bg-color;
  padding: $spacer-md;
}

.case-tile-teaser__body {
  text-align: center;
}

.case-tile-teaser__caption {
  @extend %teaser-caption;

  margin: 0;
  color: $case-tile-teaser-text-color;
}

.case-tile-teaser__headline {
  margin: $spacer-xs 0;
  color: $case-tile-teaser-text-color;
}

.case-tile-teaser__text {
  @extend %teaser-text-italic;

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

.case-tile-teaser__logo {
  margin: $spacer-lg 0;
  max-width: ms(22);
}

.case-tile-teaser__goto {
  text-align: center;
}

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

.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-md) {
  .case-tile-teaser {
    padding: $spacer-xl $spacer-lg;
  }

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

URL: /components/raw/case-tile-teaser/_case-tile-teaser.scss
Filesystem Path: components/02-molecules/visual-elements/teaser/tile-teaser/case-tile-teaser/_case-tile-teaser.scss
Size: 1.6 KB

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

No notes defined.