<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. */
// 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);
}
}
}
There are no notes for this item.