<a href="#" class="list-teaser">
    <div class="list-teaser__body">
        <div class="list-teaser__caption">Artikel</div>
        <h2 class="list-teaser__headline">Artikel Headline</h2>
        <h3 class="list-teaser__subheadline">
            Artikel Subheadline<span class="icon-svg icon-arrow-long-right icon--brand-primary"></span>
        </h3>
    </div>
    <div class="list-teaser__footer">
        <div rel="author" class="author-bio author-bio--short" href="#author-bio" itemscope itemtype="http://schema.org/Person">
            <div class="author-bio__image avatar avatar--small">
                <img itemprop="photo" class="avatar__image" src="../../assets/example-content/heribert.jpg" alt="Portrait von Heribert Innoq" />
            </div>
            <address class="author-bio__text">
                <span rel="author" class="author-bio__name" itemprop="fullName">Heribert Innoq</span><span class="author-bio__info" itemprop="jobTitle">Senior Consultant</span>
            </address>
        </div>
    </div>
</a><a href="#" class="list-teaser">
    <div class="list-teaser__body">
        <div class="list-teaser__caption">Artikel</div>
        <h2 class="list-teaser__headline">Artikel Headline</h2>
        <h3 class="list-teaser__subheadline">
            Artikel Subheadline<span class="icon-svg icon-arrow-long-right icon--brand-primary"></span>
        </h3>
    </div>
    <div class="list-teaser__footer">
        <div rel="author" class="author-bio author-bio--short" href="#author-bio" itemscope itemtype="http://schema.org/Person">
            <div class="author-bio__image avatar avatar--small">
                <img itemprop="photo" class="avatar__image" src="../../assets/example-content/heribert.jpg" alt="Portrait von Heribert Innoq" />
            </div>
            <address class="author-bio__text">
                <span rel="author" class="author-bio__name" itemprop="fullName">Heribert Innoq</span><span class="author-bio__info" itemprop="jobTitle">Senior Consultant</span>
            </address>
        </div>
        <div rel="author" class="author-bio author-bio--short" href="#author-bio" itemscope itemtype="http://schema.org/Person">
            <div class="author-bio__image avatar avatar--small">
                <img itemprop="photo" class="avatar__image" src="../../assets/example-content/heribert.jpg" alt="Portrait von Heribert Innoq" />
            </div>
            <address class="author-bio__text">
                <span rel="author" class="author-bio__name" itemprop="fullName">Heribert Innoq</span><span class="author-bio__info" itemprop="jobTitle">Senior Consultant</span>
            </address>
        </div>
        <div rel="author" class="author-bio author-bio--short" href="#author-bio" itemscope itemtype="http://schema.org/Person">
            <div class="author-bio__image avatar avatar--small">
                <img itemprop="photo" class="avatar__image" src="../../assets/example-content/heribert.jpg" alt="Portrait von Heribert Innoq" />
            </div>
            <address class="author-bio__text">
                <span rel="author" class="author-bio__name" itemprop="fullName">Heribert Innoq</span><span class="author-bio__info" itemprop="jobTitle">Senior Consultant</span>
            </address>
        </div>
    </div>
</a>
<a href="#" class="list-teaser">
    <div class="list-teaser__body">
        <div class="list-teaser__caption">Artikel</div>
        <h2 class="list-teaser__headline">Artikel Headline</h2>
        <h3 class="list-teaser__subheadline">
            Artikel Subheadline
            <span class="icon-svg icon-arrow-long-right icon--brand-primary"></span>
        </h3>
    </div>
    <div class="list-teaser__footer">
        <div rel="author" class="author-bio author-bio--short" href="#author-bio" itemscope itemtype="http://schema.org/Person">
            <div class="author-bio__image avatar avatar--small">
                <img itemprop="photo" class="avatar__image" src={context.app.uri("assets/example-content/heribert.jpg")} alt="Portrait von Heribert Innoq"/>
            </div>
            <address class="author-bio__text">
                <span rel="author" class="author-bio__name" itemprop="fullName">Heribert Innoq</span>
                <span class="author-bio__info" itemprop="jobTitle">Senior Consultant</span>
            </address>
        </div>
    </div>
</a>

<a href="#" class="list-teaser">
    <div class="list-teaser__body">
        <div class="list-teaser__caption">Artikel</div>
        <h2 class="list-teaser__headline">Artikel Headline</h2>
        <h3 class="list-teaser__subheadline">
            Artikel Subheadline
            <span class="icon-svg icon-arrow-long-right icon--brand-primary"></span>
        </h3>
    </div>
    <div class="list-teaser__footer">
        <div rel="author" class="author-bio author-bio--short" href="#author-bio" itemscope itemtype="http://schema.org/Person">
            <div class="author-bio__image avatar avatar--small">
                <img itemprop="photo" class="avatar__image" src={context.app.uri("assets/example-content/heribert.jpg")} alt="Portrait von Heribert Innoq"/>
            </div>
            <address class="author-bio__text">
                <span rel="author" class="author-bio__name" itemprop="fullName">Heribert Innoq</span>
                <span class="author-bio__info" itemprop="jobTitle">Senior Consultant</span>
            </address>
        </div>
        <div rel="author" class="author-bio author-bio--short" href="#author-bio" itemscope itemtype="http://schema.org/Person">
            <div class="author-bio__image avatar avatar--small">
                <img itemprop="photo" class="avatar__image" src={context.app.uri("assets/example-content/heribert.jpg")} alt="Portrait von Heribert Innoq"/>
            </div>
            <address class="author-bio__text">
                <span rel="author" class="author-bio__name" itemprop="fullName">Heribert Innoq</span>
                <span class="author-bio__info" itemprop="jobTitle">Senior Consultant</span>
            </address>
        </div>
        <div rel="author" class="author-bio author-bio--short" href="#author-bio" itemscope itemtype="http://schema.org/Person">
            <div class="author-bio__image avatar avatar--small">
                <img itemprop="photo" class="avatar__image" src={context.app.uri("assets/example-content/heribert.jpg")} alt="Portrait von Heribert Innoq"/>
            </div>
            <address class="author-bio__text">
                <span rel="author" class="author-bio__name" itemprop="fullName">Heribert Innoq</span>
                <span class="author-bio__info" itemprop="jobTitle">Senior Consultant</span>
            </address>
        </div>
    </div>
</a>
/* No context defined. */
  • Content:
    .list-teaser {
      @extend %list-teaser;
    
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      border-top: 3px solid $list-teaser-border-color;
      background-color: $list-teaser-background-color;
    }
    
    .list-teaser__body {
      padding: $spacer-sm $spacer-md;
      margin-bottom: 0;
    
      .label {
        &.talk,
        &.slides,
        &.training {
          display: none;
        }
      }
    }
    
    .list-teaser__footer {
      @extend %list-teaser-footer;
    }
    
    .list-teaser__caption {
      @extend %teaser-caption;
    
      color: $list-teaser-caption-color;
    }
    
    .list-teaser__headline {
      @extend %h3;
    
      margin-bottom: $spacer-xxs;
      color: $list-teaser-headline-color;
    }
    
    .list-teaser__subheadline {
      @extend %heading-font-regular;
    
      margin-bottom: $spacer-xs;
      font-size: $font-size-sm;
      line-height: $paragraph-line-height-sm;
    
      .icon-svg {
        margin-left: $spacer-xxs;
      }
    }
    
    //
    // Media Queries
    //
    @media screen and (min-width: $grid-breakpoint-md) {
      .list-teaser__subheadline {
        font-size: $font-size-md;
      }
    
      .list-teaser__body {
        .label {
          &.talk,
          &.slides,
          &.training {
            display: inline-block;
            margin-bottom: $spacer-xs;
          }
        }
      }
    }
    
  • URL: /components/raw/simple-list-teaser/_simple-list-teaser.scss
  • Filesystem Path: components/04-molecules/visual-elements/teaser/list-teaser/simple-list-teaser/_simple-list-teaser.scss
  • Size: 1.2 KB
  • Handle: @simple-list-teaser
  • Preview:
  • Filesystem Path: components/04-molecules/visual-elements/teaser/list-teaser/simple-list-teaser/simple-list-teaser.html

No notes defined.