<div class="blocks"><a href="#" class="case-tile-teaser case-tile-teaser-bg-image-demo">
        <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>
                <p class="case-tile-teaser__text">Lorem gibson 8-bit Freeside denim otaku sign boy neon warp long-chain hydrocarbons car. Qui excepteur laborum ea est culpa reprehenderit enim ex amet veniam excepteur. Minim aliqua amet reprehenderit id velit id dolor quis et ea anim in. Cillum nisi ex incididunt id adipisicing reprehenderit id dolor qui anim non velit. Laboris esse ex duis sit labore culpa quis duis. Irure tempor deserunt et velit labore excepteur pariatur aute adipisicing eu do cupidatat nisi. Cupidatat officia aliquip excepteur Lorem in. Cillum amet enim anim do ut do adipisicing excepteur proident aute.</p>
            </div>
            <div class="case-tile-teaser__goto"><span class="link-teaser">zum Projekt</span></div>
        </div>
    </a>
    <a href="#" class="case-tile-teaser case-tile-teaser-bg-image-demo">
        <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>
                <p class="case-tile-teaser__text">Lorem gibson 8-bit Freeside denim otaku sign boy neon warp long-chain
                    hydrocarbons car.</p>
            </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 case-tile-teaser-bg-image-demo 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>
                <p 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.</p>
            </div>
            <div class="case-tile-teaser__goto"><span class="link-teaser">zum Projekt</span></div>
        </div>
    </a>
    <a href="#" class="case-tile-teaser case-tile-teaser-bg-image-demo 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>
                <p 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.</p>
            </div>
            <div class="case-tile-teaser__goto"><span class="link-teaser">zum Projekt</span>
            </div>
        </div>
    </a><a href="#" class="case-tile-teaser case-tile-teaser-bg-image-demo 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>
                <p 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.</p>
            </div>
            <div class="case-tile-teaser__goto"><span class="link-teaser">zum Projekt</span></div>
        </div>
    </a>
</div>
import CaseTileTeaser from './components/02-molecules/visual-elements/teaser/tile-teaser/case-tile-teaser'

<div class="blocks">
    <CaseTileTeaser size="bg" additionalClassnames="case-tile-teaser-bg-image-demo" href="#" caption="Case Study" headline="Dies ist eine Headline" linkTeaser="zum Projekt">
      Lorem gibson 8-bit Freeside denim otaku sign boy neon warp long-chain hydrocarbons car.
      Qui excepteur laborum ea est culpa reprehenderit enim ex amet veniam excepteur. Minim aliqua amet reprehenderit id velit id dolor quis et ea anim in. Cillum nisi ex incididunt id adipisicing reprehenderit id dolor qui anim non velit. Laboris esse ex duis sit labore culpa quis duis. Irure tempor deserunt et velit labore excepteur pariatur aute adipisicing eu do cupidatat nisi. Cupidatat officia aliquip excepteur Lorem in. Cillum amet enim anim do ut do adipisicing excepteur proident aute.
    </CaseTileTeaser>

    <CaseTileTeaser size="bg" additionalClassnames="case-tile-teaser-bg-image-demo" href="#" caption="Case Study" headline="Dies ist eine Headline" linkTeaser="zum Projekt">
        Lorem gibson 8-bit Freeside denim otaku sign boy neon warp long-chain hydrocarbons car.
    </CaseTileTeaser>
</div>

<div class="blocks">
    <CaseTileTeaser size="sm" additionalClassnames="case-tile-teaser-bg-image-demo" href="#" caption="Case Study" headline="Dies ist eine Headline" linkTeaser="zum Projekt">
        Lorem gibson 8-bit Freeside denim otaku sign boy neon warp long-chain hydrocarbons car.
    </CaseTileTeaser>

    <CaseTileTeaser size="sm" additionalClassnames="case-tile-teaser-bg-image-demo" href="#" caption="Case Study" headline="Dies ist eine Headline" linkTeaser="zum Projekt">
        Lorem gibson 8-bit Freeside denim otaku sign boy neon warp long-chain hydrocarbons car.
    </CaseTileTeaser>

    <CaseTileTeaser size="sm" additionalClassnames="case-tile-teaser-bg-image-demo" href="#" caption="Case Study" headline="Dies ist eine Headline" linkTeaser="zum Projekt">
        Lorem gibson 8-bit Freeside denim otaku sign boy neon warp long-chain hydrocarbons car.
    </CaseTileTeaser>
</div>
/* No context defined for this component. */
  • Content:
    $case-tile-teaser-sm-height: ms(32);
    
    // demo bg image
    
    .case-tile-teaser-bg-image-demo {
      background-image: asset-url('visual-header-igel-1444.jpg');
      background-position: center;
    }
    
    .case-tile-teaser-bg-image-training {
      background-image: asset-url('visual-newsletter.jpg');
      background-position: top;
    }
    
    //
    // 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;
    }
    
    .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;
    }
    
    .case-tile-teaser__headline {
      margin: $spacer-xs 0;
    }
    
    .case-tile-teaser__text {
      @extend %teaser-text-italic;
    }
    
    .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: $teaser-headline-font-size-small;
    }
    
    .case-tile-teaser__text--sm {
      margin-bottom: $spacer-xs;
      font-size: $teaser-text-font-size-italic-small;
    }
    
    //
    // 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.7 KB
  • Content:
    import { createElement } from 'complate-stream'
    import classNames from 'classnames'
    
    export default function CaseTileTeaser ({ size, additionalClassnames, href, caption, headline, linkTeaser }, ...children) {
      let classname = classNames('case-tile-teaser', additionalClassnames)
      let contentClass = 'case-tile-teaser__content'
      let headlineClass = 'case-tile-teaser__headline'
      let textClass = 'case-tile-teaser__text'
    
      if (size === 'sm') {
        classname = classNames(classname, 'case-tile-teaser--sm')
        contentClass = classNames(contentClass, 'case-tile-teaser__content--sm')
        headlineClass = classNames(headlineClass, 'case-tile-teaser__headline--sm')
        textClass = classNames(textClass, 'case-tile-teaser__text--sm')
      }
    
      return <a href={href} class={classname}>
        <div class={contentClass}>
          <div class='case-tile-teaser__body'>
            <h2 class='case-tile-teaser__caption'>{caption}</h2>
            <h2 class={headlineClass}>{headline}</h2>
            <p class={textClass}>{children}</p>
          </div>
          <div class='case-tile-teaser__goto'>
            <span class='link-teaser'>{linkTeaser}</span>
          </div>
        </div>
      </a>
    }
    
  • URL: /components/raw/case-tile-teaser/index.jsx
  • Filesystem Path: components/02-molecules/visual-elements/teaser/tile-teaser/case-tile-teaser/index.jsx
  • Size: 1.2 KB
  • Handle: @case-tile-teaser
  • Preview:
  • Filesystem Path: components/02-molecules/visual-elements/teaser/tile-teaser/case-tile-teaser/case-tile-teaser.html

There are no notes for this item.