<a class="list-teaser-training primary">
    <div class="list-teaser__body">
        <h2 class="list-teaser-training__headline">Titel</h2>
        <div class="list-teaser-training__caption">Untertitel</div>
        <div class="label-big badge badge--inverted">Labeltext</div>
    </div>
    <div class="list-teaser__footer">
        <span class="link-teaser inverted-text-color">Termine &amp; Details</span>
    </div>
</a><a class="list-teaser-training secondary">
    <div class="list-teaser__body">
        <h2 class="list-teaser-training__headline">Titel</h2>
        <div class="list-teaser-training__caption">Untertitel</div>
        <div class="label-big badge">Labeltext</div>
    </div>
    <div class="list-teaser__footer">
        <span class="link-teaser inverted-interaction-color">Termine &amp; Details</span>
    </div>
</a>
<a class=" list-teaser-training primary">
    <div class="list-teaser__body">
        <h2 class="list-teaser-training__headline">Titel</h2>
        <div class="list-teaser-training__caption">Untertitel</div>
        <div class="label-big badge badge--inverted">Labeltext</div>
    </div>
    <div class="list-teaser__footer">
        <span class="link-teaser inverted-text-color">Termine &amp; Details</span>
    </div>
</a>

<a class="list-teaser-training secondary">
    <div class="list-teaser__body">
        <h2 class="list-teaser-training__headline">Titel</h2>
        <div class="list-teaser-training__caption">Untertitel</div>
        <div class="label-big badge">Labeltext</div>
    </div>
    <div class="list-teaser__footer">
        <span class="link-teaser inverted-interaction-color">Termine &amp; Details</span>
    </div>
</a>
/* No context defined. */
  • Content:
    $list-teaser-training-height: ms(32);
    
    .list-teaser-training {
      @extend %list-teaser;
    
      display: flex;
      min-height: $list-teaser-training-height;
      flex-direction: column;
      justify-content: space-between;
    
      &.primary {
        background-blend-mode: multiply;
        background-color: $list-teaser-training-bg-color-primary;
        background-image: asset-url("bg-images/general/visual-trainings-07.jpg");
        background-position: top;
        background-repeat: no-repeat;
        background-size: cover;
      }
    
      &.secondary {
        background-blend-mode: multiply;
        background-color: $list-teaser-training-bg-color-secondary;
        background-image: asset-url("bg-images/general/visual-trainings-07.jpg");
        background-position: top;
        background-repeat: no-repeat;
        background-size: cover;
      }
    
      .list-teaser__footer {
        padding-bottom: $spacer-sm;
      }
    }
    
    .list-teaser-training__caption {
      @extend %teaser-caption;
    
      margin-bottom: $spacer-base;
      color: $list-teaser-training-text-color-primary;
    }
    
    .list-teaser-training__headline {
      margin-bottom: $spacer-md;
      color: $list-teaser-training-text-color-primary;
      font-size: $font-size-lg;
    }
    
    //
    //Breakpoints
    //
    @media screen and (min-width: $grid-breakpoint-md) {
      .list-teaser-training__headline {
        margin-bottom: $spacer-sm;
        font-size: $font-size-xxl;
      }
    }
    
  • URL: /components/raw/training-list-teaser/_training-list-teaser.scss
  • Filesystem Path: components/04-molecules/visual-elements/teaser/list-teaser/training-list-teaser/_training-list-teaser.scss
  • Size: 1.3 KB
  • Handle: @training-list-teaser
  • Preview:
  • Filesystem Path: components/04-molecules/visual-elements/teaser/list-teaser/training-list-teaser/training-list-teaser.html

No notes defined.