<div><a href="#" class="list-teaser-abstract primary">
        <div class="list-teaser__body">
            <div class="list-teaser-abstract__caption">Artikel</div>
            <h2 class="list-teaser-abstract__headline">Artikel Headline</h2>
            <p class="list-teaser-abstract__text">Lorem gibson dermatrodes boy nodality neural office sprawl futurity Lado-Acheson count zero interrupt Night City tanto papier-mache kanji corporation meta-lights neurosurgery. Lorem gibson Chiba neon neon motion Mycotoxin Metro Holografix boat RAM AI disposable lights saturation point stimulate boat systemic vehicle.<img class="arrow-right" src="../../assets/arrow-long-right-white.svg"></p>
        </div>
        <div class="list-teaser__footer">
            <div class="author-bio author-bio--short" itemscope itemtype="http://schema.org/Person">
                <div class="author-bio__image avatar avatar--small"><img class="avatar__image" itemprop="photo" src="../../assets/heribert.jpg" alt="Portrait von Alexander Hesingfeld"></div>
                <div class="author-bio__text">
                    <div class="author-bio__name" itemprop="name">Heribert Innoq</div>
                    <div class="author-bio__info" itemprop="jobTitle">Senior Consultant</div>
                </div>
            </div>
        </div>
    </a>
    <a href="#" class="list-teaser-abstract secondary">
        <div class="list-teaser__body">
            <div class="list-teaser-abstract__caption">Artikel</div>
            <h2 class="list-teaser-abstract__headline">Artikel Headline</h2>
            <p class="list-teaser-abstract__text">Lorem gibson dermatrodes boy nodality neural office sprawl futurity Lado-Acheson
                count zero interrupt Night City tanto papier-mache kanji corporation meta-lights
                neurosurgery. Lorem gibson Chiba neon neon motion Mycotoxin Metro Holografix
                boat RAM AI disposable lights saturation point stimulate boat systemic
                vehicle.
                <img class="arrow-right" src="../../assets/arrow-long-right-red.svg">
            </p>
        </div>
        <div class="list-teaser__footer">
            <div class="author-bio author-bio--short" itemscope itemtype="http://schema.org/Person">
                <div class="author-bio__image avatar avatar--small">
                    <img class="avatar__image" itemprop="photo" src="../../assets/heribert.jpg" alt="Portrait von Alexander Hesingfeld">
                </div>
                <div class="author-bio__text">
                    <div class="author-bio__name" itemprop="name">Heribert Innoq</div>
                    <div class="author-bio__info" itemprop="jobTitle">Senior Consultant</div>
                </div>
            </div>
        </div>
    </a>
</div>
<div>
    <a href="#" class="list-teaser-abstract primary">
        <div class="list-teaser__body">
            <div class="list-teaser-abstract__caption">Artikel</div>
            <h2 class="list-teaser-abstract__headline">Artikel Headline</h2>
            <p class="list-teaser-abstract__text">
                Lorem gibson dermatrodes boy nodality neural office sprawl futurity Lado-Acheson count zero interrupt Night City tanto papier-mache kanji corporation meta-lights neurosurgery.
                Lorem gibson Chiba neon neon motion Mycotoxin Metro Holografix boat RAM AI disposable lights saturation point stimulate boat systemic vehicle.
                <img class="arrow-right" src={context.app.uri("assets/arrow-long-right-white.svg")} />
            </p>
        </div>
        <div class="list-teaser__footer">
            <div class="author-bio author-bio--short" itemscope itemtype="http://schema.org/Person">
                <div class="author-bio__image avatar avatar--small">
                    <img class="avatar__image" itemprop="photo" src={context.app.uri("assets/heribert.jpg")} alt="Portrait von Alexander Hesingfeld" />
                </div>
                <div class="author-bio__text">
                    <div class="author-bio__name" itemprop="name">
                        Heribert Innoq
                    </div>
                    <div class="author-bio__info" itemprop="jobTitle" >Senior Consultant</div>
                </div>
            </div>
        </div>
    </a>

    <a href="#" class="list-teaser-abstract secondary">
        <div class="list-teaser__body">
            <div class="list-teaser-abstract__caption">Artikel</div>
            <h2 class="list-teaser-abstract__headline">Artikel Headline</h2>
            <p class="list-teaser-abstract__text">
                Lorem gibson dermatrodes boy nodality neural office sprawl futurity Lado-Acheson count zero interrupt Night City tanto papier-mache kanji corporation meta-lights neurosurgery.
                Lorem gibson Chiba neon neon motion Mycotoxin Metro Holografix boat RAM AI disposable lights saturation point stimulate boat systemic vehicle.
                <img class="arrow-right" src={context.app.uri("assets/arrow-long-right-red.svg")} />
            </p>
        </div>
        <div class="list-teaser__footer">
            <div class="author-bio author-bio--short" itemscope itemtype="http://schema.org/Person">
                <div class="author-bio__image avatar avatar--small">
                    <img class="avatar__image" itemprop="photo" src={context.app.uri("assets/heribert.jpg")} alt="Portrait von Alexander Hesingfeld" />
                </div>
                <div class="author-bio__text">
                    <div class="author-bio__name" itemprop="name">
                        Heribert Innoq
                    </div>
                    <div class="author-bio__info" itemprop="jobTitle" >Senior Consultant</div>
                </div>
            </div>
        </div>
    </a>
</div>
/* No context defined for this component. */
  • Content:
    // List Teaser with Abstract
    // sass-lint:disable nesting-depth
    
    .list-teaser-abstract {
      @extend %list-teaser;
    
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    
      &.primary {
        background-color: $list-teaser-abstract-primary-bg-color;
    
        .list-teaser-abstract__text {
          color: $list-teaser-abstract-primary-text-color;
    
          &::first-letter {
            color: $list-teaser-abstract-primary-drop-caps-color;
          }
        }
      }
    
      &.secondary {
        background-color: $list-teaser-abstract-secondary-bg-color;
    
        .list-teaser-abstract__text {
          color: $list-teaser-abstract-secondary-text-color;
    
          &::first-letter {
            color: $list-teaser-abstract-secondary-drop-caps-color;
          }
        }
    
        .author-bio__text {
          color: $list-teaser-abstract-secondary-author-name-color;
        }
      }
    }
    
    .list-teaser-abstract__caption {
      @extend %teaser-caption;
    
      margin-bottom: $spacer-xxs;
      color: $list-teaser-abstract-caption-color;
    }
    
    .list-teaser-abstract__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;
    }
    
    .list-teaser-abstract__text {
      @extend %heading-font-regular;
    
      margin-bottom: 0;
      line-height: $list-teaser-abstract-text-line-height-small;
      font-size: $list-teaser-abstract-text-font-size-small;
    
      &::first-letter {
        @extend %body-font-regular;
    
        float: left;
        padding-top: 18px;
        padding-right: 12px;
        padding-left: 3px;
        line-height: .35;
        font-size: ms(14);
      }
    }
    
    //
    //Breakpoints
    //
    @media screen and (min-width: $grid-breakpoint-md) {
      .list-teaser-abstract__headline {
        margin-bottom: $spacer-sm;
        line-height: $list-teaser-abstract-headline-line-height;
        font-size: $list-teaser-abstract-headline-font-size;
      }
    
      .list-teaser-abstract__text {
        line-height: $list-teaser-abstract-text-line-height;
        font-size: $list-teaser-abstract-text-font-size;
    
        &::first-letter {
          float: left;
          padding-top: 18px;
          padding-right: 12px;
          padding-left: 3px;
          line-height: .45;
          font-size: ms(16);
        }
      }
    }
    
  • URL: /components/raw/abstract-list-teaser/_abstract-list-teaser.scss
  • Filesystem Path: components/02-molecules/visual-elements/teaser/list-teaser/abstract-list-teaser/_abstract-list-teaser.scss
  • Size: 2.2 KB
  • Handle: @abstract-list-teaser
  • Preview:
  • Filesystem Path: components/02-molecules/visual-elements/teaser/list-teaser/abstract-list-teaser/abstract-list-teaser.html

There are no notes for this item.