Add link, align date on bottom

This commit is contained in:
Christian Cueni 2020-05-28 13:56:18 +02:00
parent ca6adf75e1
commit deeab23088
1 changed files with 11 additions and 5 deletions

View File

@ -1,11 +1,13 @@
<template>
<div class="news__teasers teasers">
<div v-for="teaser in newsTeasers" :key="teaser.id" class="teasers__teaser teaser">
<img :src="teaser.imageUrl" class="teaser__image" />
<p class="teaser__image-source"><a class="tiny" :href="teaser.imageSource">Quelle {{teaser.imageSource}}</a></p>
<h4 class="teaser__title">{{teaser.title}}</h4>
<p class="teaser__description">{{teaser.description}}</p>
<p class="teaser__date">{{teaser.displayDate}}</p>
<a :href="teaser.newsArticleUrl">
<img :src="teaser.imageUrl" class="teaser__image" />
<p class="teaser__image-source"><a class="tiny" :href="teaser.imageSource">Quelle {{teaser.imageSource}}</a></p>
<h4 class="teaser__title">{{teaser.title}}</h4>
<p class="teaser__description">{{teaser.description}}</p>
<p class="teaser__date">{{teaser.displayDate}}</p>
</a>
</div>
</div>
</template>
@ -68,6 +70,7 @@
.teaser {
margin-bottom: $large-spacing;
position: relative;
&__image {
display: block;
@ -91,6 +94,9 @@
font-family: $sans-serif-font-family;
font-weight: $font-weight-regular;
color: $color-silver-dark;
position: absolute;
bottom: 0;
left: 0;
}
}
</style>