Static Tile Teaser 

<div class="tile-grid-md">
    <a href="#" class="static-tile-teaser static-tile-teaser-bg-color">
        <div class="static-tile-teaser__content">
            <div class="static-tile-teaser__body">
                <h2 class="static-tile-teaser__caption">Unsere Podcasts</h2>
                <h2 class="static-tile-teaser__headline">Dies ist eine Headline</h2>
                <div class="static-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.
                </div>
            </div>
            <div class="static-tile-teaser__goto">
                <span class="link-teaser">Alle Episoden</span>
            </div>
        </div>
    </a>
    <a href="#" class="static-tile-teaser static-tile-teaser-bg-color--security">
        <div class="static-tile-teaser__content">
            <div class="static-tile-teaser__body">
                <h2 class="static-tile-teaser__headline">Dies ist eine Headline ohne Caption</h2>
                <div class="static-tile-teaser__text">
                    Lorem gibson 8-bit Freeside denim otaku sign boy neon warp long-chain
                    hydrocarbons car.
                </div>
            </div>
            <div class="static-tile-teaser__goto">
                <span class="link-teaser link-teaser--security">Alle Episoden</span>
            </div>
        </div>
    </a>
</div>
 
<div class="tile-grid-md">
    <a href="#" class="static-tile-teaser static-tile-teaser-bg-color">
        <div class="static-tile-teaser__content">
            <div class="static-tile-teaser__body">
                <h2 class="static-tile-teaser__caption">Unsere Podcasts</h2>
                <h2 class="static-tile-teaser__headline">Dies ist eine Headline</h2>
                <div class="static-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.
                </div>
            </div>
            <div class="static-tile-teaser__goto">
                <span class="link-teaser">Alle Episoden</span>
            </div>
        </div>
    </a>
    <a href="#" class="static-tile-teaser static-tile-teaser-bg-color--security">
        <div class="static-tile-teaser__content">
            <div class="static-tile-teaser__body">
                <h2 class="static-tile-teaser__headline">Dies ist eine Headline ohne Caption</h2>
                <div class="static-tile-teaser__text">
                    Lorem gibson 8-bit Freeside denim otaku sign boy neon warp long-chain
                    hydrocarbons car.
                </div>
            </div>
            <div class="static-tile-teaser__goto">
                <span class="link-teaser link-teaser--security">Alle Episoden</span>
            </div>
        </div>
    </a>
</div>
 
/* No context defined. */
  • Content: 
    $case-tile-teaser-sm-height: ms(32);

.static-tile-teaser-bg-color {
  color: $static-tile-teaser-text-color;
  background-color: $podcast-teaser-overlay-color;
  background-position: center;

  &--security {
    color: $brand-gray;
    background-color: $podcast-teaser-overlay-color-sec;

    .static-tile-teaser__headline {
      color: $brand-gray;
    }
  }
}

.static-tile-teaser {
  @extend %block-link;

  display: flex;
  flex-direction: column;
  padding: $spacer-sm;
  background-size: cover;
}

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

  padding: $spacer-md;

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

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

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

  margin: 0;
}

.static-tile-teaser__headline {
  margin: $spacer-xs 0;
}

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

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

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

.static-tile-teaser__content--sm {
  position: relative;
  top: $spacer-xxl;
  justify-content: space-between;
  padding: $spacer-sm;
}

.static-tile-teaser__headline--sm {
  font-size: $font-size-sm;
}

.static-tile-teaser__text--sm {
  margin-bottom: $spacer-xs;
  font-size: $font-size-base;
}

//
// Breakpoints
//
@media screen and (min-width: $grid-breakpoint-md) {
  .static-tile-teaser {
    padding: $spacer-md;
  }

  .static-tile-teaser__content {
    padding: $spacer-lg;
  }
}
  • URL: /components/raw/static-tile-teaser/_static-tile-teaser.scss
  • Filesystem Path: components/04-molecules/teaser/tile-teaser/static-tile-teaser/_static-tile-teaser.scss
  • Size: 1.7 KB
  • Handle: @static-tile-teaser
  • Preview:
  • Filesystem Path: components/04-molecules/teaser/tile-teaser/static-tile-teaser/static-tile-teaser.html

No notes defined.