Simple List Teaser 

<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 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--sm">
                <img itemprop="photo" class="avatar__image" src="../../assets/example-content/heribert.jpg" alt="Portrait von Heribert Innoq" />
            </div>
            <address>
                <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 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--sm">
                <img itemprop="photo" class="avatar__image" src="../../assets/example-content/heribert.jpg" alt="Portrait von Heribert Innoq" />
            </div>
            <address>
                <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--sm">
                <img itemprop="photo" class="avatar__image" src="../../assets/example-content/heribert.jpg" alt="Portrait von Heribert Innoq" />
            </div>
            <address>
                <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--sm">
                <img itemprop="photo" class="avatar__image" src="../../assets/example-content/heribert.jpg" alt="Portrait von Heribert Innoq" />
            </div>
            <address>
                <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 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--sm">
                <img itemprop="photo" class="avatar__image" src="{{ path '/assets/example-content/heribert.jpg' }}"  alt="Portrait von Heribert Innoq"/>
            </div>
            <address>
                <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 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--sm">
                <img itemprop="photo" class="avatar__image" src="{{ path '/assets/example-content/heribert.jpg' }}"  alt="Portrait von Heribert Innoq"/>
            </div>
            <address>
                <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--sm">
                <img itemprop="photo" class="avatar__image" src="{{ path '/assets/example-content/heribert.jpg' }}"  alt="Portrait von Heribert Innoq"/>
            </div>
            <address>
                <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--sm">
                <img itemprop="photo" class="avatar__image" src="{{ path '/assets/example-content/heribert.jpg' }}"  alt="Portrait von Heribert Innoq"/>
            </div>
            <address>
                <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;

  width: 100%;

  background-color: $list-teaser-background-color;
  border-top: 3px solid $list-teaser-border-color;
}

a.list-teaser {
  @extend %hover-glow;
}

.list-teaser__body {
  padding: $spacer-sm $spacer-md;

  .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 {
    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/teaser/list-teaser/simple-list-teaser/_simple-list-teaser.scss
  • Size: 1.2 KB
  • Handle: @simple-list-teaser
  • Preview:
  • Filesystem Path: components/04-molecules/teaser/list-teaser/simple-list-teaser/simple-list-teaser.html

No notes defined.