<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>
import TrainingListTeaser from './components/02-molecules/teaser/list-teaser/training-list-teaser/index.jsx'
import Label from './components/01-atoms/text/block/label/index.jsx'

<TrainingListTeaser primary title="Titel" subtitle="Untertitel" linkText="Termine & Details">
    <Label type="badge" big inverted>Labeltext</Label>
</TrainingListTeaser>
<TrainingListTeaser secondary title="Titel" subtitle="Untertitel" linkText="Termine & Details">
    <Label type="badge" big>Labeltext</Label>
</TrainingListTeaser>
/* No context defined for this component. */
  • Content:
    $list-teaser-training-height: ms(32);
    
    // sass-lint:disable nesting-depth
    
    .list-teaser-training {
      @extend %list-teaser;
    
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: $list-teaser-training-height;
    
      &.primary {
        background-color: $list-teaser-abstract-primary-bg-color;
        background-image: asset-url('visual-trainings-07.jpg');
        background-repeat: no-repeat;
        background-position: top;
        background-size: cover;
        background-blend-mode: multiply;
      }
    
      &.secondary {
        background-color: $list-teaser-abstract-secondary-bg-color;
        background-image: asset-url('visual-trainings-07.jpg');
        background-repeat: no-repeat;
        background-position: top;
        background-size: cover;
        background-blend-mode: multiply;
      }
    }
    
    .list-teaser-training__caption {
      @extend %teaser-caption;
    
      margin-bottom: $spacer-base;
      color: $list-teaser-abstract-caption-color;
    }
    
    .list-teaser-training__headline {
      margin-bottom: $spacer-md;
      line-height: $list-teaser-abstract-headline-line-height-small;
      color: $list-teaser-abstract-headline-color;
      font-size: $list-teaser-abstract-headline-font-size-small;
    }
    
    //
    //Breakpoints
    //
    @media screen and (min-width: $grid-breakpoint-md) {
      .list-teaser-training__headline {
        margin-bottom: $spacer-sm;
        line-height: $list-teaser-abstract-headline-line-height;
        font-size: $list-teaser-abstract-headline-font-size;
      }
    }
    
  • URL: /components/raw/training-list-teaser/_training-list-teaser.scss
  • Filesystem Path: components/02-molecules/teaser/list-teaser/training-list-teaser/_training-list-teaser.scss
  • Size: 1.4 KB
  • Content:
    import { createElement } from 'complate-stream'
    import classNames from 'classnames'
    
    export default function TrainingListTeaser ({ primary, secondary, title, subtitle, linkText, href }, ...children) {
      let teaserClass = classNames({ ' list-teaser-training primary': primary }, { 'list-teaser-training secondary': secondary })
      let linkTeaserClass = classNames('link-teaser', {
        'inverted-text-color': primary,
        'inverted-interaction-color': secondary
      })
    
      return <a href={href} class={teaserClass}>
        <div class='list-teaser__body'>
          <h2 class='list-teaser-training__headline'>{title}</h2>
          {subtitle ? <div class='list-teaser-training__caption'>{subtitle}</div> : ''}
          {children}
        </div>
        <div class='list-teaser__footer'>
          <span class={linkTeaserClass}>{linkText}</span>
        </div>
      </a>
    }
    
  • URL: /components/raw/training-list-teaser/index.jsx
  • Filesystem Path: components/02-molecules/teaser/list-teaser/training-list-teaser/index.jsx
  • Size: 832 Bytes
  • Handle: @training-list-teaser
  • Preview:
  • Filesystem Path: components/02-molecules/teaser/list-teaser/training-list-teaser/training-list-teaser.html

There are no notes for this item.