<div><a href="#" class="list-teaser-event">
<div class="event-date-section">
<div class="label talk">Vortrag</div><time class="event-date" datetime="2017-06-23"><span class="event-day-month"><span class="event-day">23</span><span class="event-month">Jun</span></span><span class="event-year">2017</span></time>
</div>
<div class="list-teaser__content">
<div class="list-teaser__body">
<div class="label talk">Vortrag</div>
<div class="label slides">Folien verfügbar</div>
<h2 class="list-teaser-event__headline">Vortrag Titel</h2>
<h3 class="list-teaser-event__subheadline">Vortragsort / 10-12 Uhr<img class="arrow-right" src="../../assets/arrow-long-right-red.svg"></h3>
</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>
</div>
</a>
<a href="#" class="list-teaser-event">
<div class="event-date-section">
<div class="label talk">Training</div>
<div class="event-date-wrapper">
<time class="event-date" datetime="2017-06-23"><span class="event-day-month"><span class="event-day">23</span><span class="event-month">Jun</span></span>
</time>
<hr class="event-date-separator">
<time class="event-date" datetime="2017-06-24"><span class="event-day-month"><span class="event-day">24</span><span class="event-month">Jun</span></span>
<span class="event-year">2017</span>
</time>
</div>
</div>
<div class="list-teaser__content">
<div class="list-teaser__body">
<div class="label training">Training</div>
<h2 class="list-teaser-event__headline">Training Titel</h2>
<h2 class="list-teaser-event__headline--secondary">Training Untertitel</h2>
<h3 class="list-teaser-event__subheadline">Trainingsort<img class="arrow-right" src="../../assets/arrow-long-right-red.svg"></h3>
</div>
<div class="list-teaser-event__footer">
<div class="link-teaser">Mehr erfahren</div>
</div>
</div>
</a><a href="#" class="list-teaser-event">
<div class="event-date-section">
<div class="label talk">Training</div>
<div class="event-date-wrapper"><time class="event-date" datetime="2017-06-23"><span class="event-day-month"><span class="event-day">23</span><span class="event-month">Jun</span></span></time>
<hr class="event-date-separator"><time class="event-date" datetime="2017-06-24"><span class="event-day-month"><span class="event-day">24</span><span class="event-month">Jun</span></span><span class="event-year">2017</span></time></div>
</div>
<div class="list-teaser__content">
<div class="list-teaser__body">
<div class="label training">Training</div>
<h2 class="list-teaser-event__headline">Training Titel</h2>
<h2 class="list-teaser-event__headline--secondary">Training Untertitel</h2>
<h3 class="list-teaser-event__subheadline">Trainingsort<img class="arrow-right" src="../../assets/arrow-long-right-red.svg"></h3>
</div>
<div class="list-teaser-event__footer">
<div class="label-big hint">Ausverkauft!</div>
</div>
</div>
</a>
</div>
<div>
<a href="#" class="list-teaser-event">
<div class="event-date-section">
<div class="label talk">Vortrag</div>
<time class="event-date" datetime="2017-06-23">
<span class="event-day-month">
<span class='event-day'>23</span>
<span class='event-month'>Jun</span>
</span>
<span class='event-year'>2017</span>
</time>
</div>
<div class="list-teaser__content">
<div class="list-teaser__body">
<div class="label talk">Vortrag</div>
<div class="label slides">Folien verfügbar</div>
<h2 class="list-teaser-event__headline">Vortrag Titel</h2>
<h3 class="list-teaser-event__subheadline">
Vortragsort / 10-12 Uhr
<img class="arrow-right" src={context.app.uri("assets/arrow-long-right-red.svg")} />
</h3>
</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>
</div>
</a>
<a href="#" class="list-teaser-event">
<div class="event-date-section">
<div class="label talk">Training</div>
<div class="event-date-wrapper">
<time class="event-date" datetime="2017-06-23">
<span class="event-day-month">
<span class='event-day'>23</span>
<span class='event-month'>Jun</span>
</span>
</time>
<hr class="event-date-separator" />
<time class="event-date" datetime="2017-06-24">
<span class="event-day-month">
<span class='event-day'>24</span>
<span class='event-month'>Jun</span>
</span>
<span class='event-year'>2017</span>
</time>
</div>
</div>
<div class="list-teaser__content">
<div class="list-teaser__body">
<div class="label training">Training</div>
<h2 class="list-teaser-event__headline">Training Titel</h2>
<h2 class="list-teaser-event__headline--secondary">Training Untertitel</h2>
<h3 class="list-teaser-event__subheadline">
Trainingsort
<img class="arrow-right" src={context.app.uri("assets/arrow-long-right-red.svg")} />
</h3>
</div>
<div class="list-teaser-event__footer">
<div class="link-teaser">Mehr erfahren</div>
</div>
</div>
</a>
<a href="#" class="list-teaser-event">
<div class="event-date-section">
<div class="label talk">Training</div>
<div class="event-date-wrapper">
<time class="event-date" datetime="2017-06-23">
<span class="event-day-month">
<span class='event-day'>23</span>
<span class='event-month'>Jun</span>
</span>
</time>
<hr class="event-date-separator" />
<time class="event-date" datetime="2017-06-24">
<span class="event-day-month">
<span class='event-day'>24</span>
<span class='event-month'>Jun</span>
</span>
<span class='event-year'>2017</span>
</time>
</div>
</div>
<div class="list-teaser__content">
<div class="list-teaser__body">
<div class="label training">Training</div>
<h2 class="list-teaser-event__headline">Training Titel</h2>
<h2 class="list-teaser-event__headline--secondary">Training Untertitel</h2>
<h3 class="list-teaser-event__subheadline">
Trainingsort
<img class="arrow-right" src={context.app.uri("assets/arrow-long-right-red.svg")} />
</h3>
</div>
<div class="list-teaser-event__footer">
<div class="label-big hint">Ausverkauft!</div>
</div>
</div>
</a>
</div>
/* No context defined for this component. */
$event-date-section-height: ($label-font-size * $label-line-height) + (2 * $spacer-xxs);
.list-teaser-event {
@extend %list-teaser;
display: flex;
flex-direction: column;
align-items: center;
margin-top: $event-date-section-height + $spacer-base;
background-color: $list-teaser-background-color;
.list-teaser-event__footer {
@extend %list-teaser-footer;
justify-content: center;
}
.list-teaser-event__footer,
.list-teaser__footer {
.author-bio {
flex-basis: 100%;
margin-bottom: 0;
}
}
}
.list-teaser__content {
display: flex;
flex-direction: column;
flex-grow: 1;
justify-content: space-between;
width: 100%;
}
.list-teaser-event__headline {
@extend %h3;
margin-bottom: $spacer-xs;
line-height: $list-teaser-event-headline-line-height-small;
color: $list-teaser-event-headline-color;
font-size: $list-teaser-event-headline-font-size-small;
}
.list-teaser-event__headline--secondary {
@extend %h5;
margin-bottom: $spacer-sm;
color: $list-teaser-event-subheadline-color;
}
.list-teaser-event__subheadline {
@extend %body-font-italic;
margin-bottom: $spacer-xs;
line-height: $list-teaser-event-subheadline-line-height-small;
font-size: $list-teaser-event-subheadline-font-size-small;
}
//
// Media Queries
//
@media screen and (max-width: $grid-breakpoint-md) {
.list-teaser-event {
.label {
margin-bottom: 0;
text-align: center;
&.training,
&.talk {
border-left: 0;
}
}
.list-teaser__content {
align-self: flex-start; // Prevent content to be centered vertically
}
}
}
@media screen and (min-width: $grid-breakpoint-md) {
.list-teaser-event {
flex-direction: row;
align-items: stretch;
margin-top: 0;
.event-date-section {
.label {
display: none;
}
}
.list-teaser-event__footer {
justify-content: flex-end;
}
}
.list-teaser-event__headline {
line-height: $list-teaser-event-headline-line-height;
font-size: $list-teaser-event-headline-font-size;
}
.list-teaser-event__subheadline {
line-height: $list-teaser-event-subheadline-line-height;
font-size: $list-teaser-event-subheadline-font-size;
}
}
@media screen and (min-width: $grid-breakpoint-lg) {
.list-teaser-event {
.list-teaser-event__footer,
.list-teaser__footer {
.author-bio {
flex-basis: auto;
}
}
}
}
There are no notes for this item.