ramon
/
skillbox
1
0
Fork 0
Code Issues 1 Pull Requests 1 Packages Projects 1 Releases 1 Wiki Activity

Use module teaser image as background image

This commit is contained in:
Ramon Wenger 2018-10-23 13:34:55 +02:00
parent 82417a5a7a
commit aa85c152dd
1 changed files with 6 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
client/src/components/modules/ModuleTeaser.vue
View File

@ -1,6 +1,7 @@
<template> <template>
<router-link :to="moduleLink" tag="div" class="module-teaser"> <router-link :to="moduleLink" tag="div" class="module-teaser">
<img :src="heroImage" alt="" class="module-teaser__image"> <div class="module-teaser__image" :style="{backgroundImage: 'url('+heroImage+')'}">
</div>
<div class="module-teaser__body"> <div class="module-teaser__body">
<h3 class="module-teaser__meta-title">{{metaTitle}}</h3> <h3 class="module-teaser__meta-title">{{metaTitle}}</h3>
<h3 class="module-teaser__title">{{title}}</h3> <h3 class="module-teaser__title">{{title}}</h3>
@ -42,6 +43,10 @@
&__image { &__image {
width: 100%; width: 100%;
max-height: 150px; max-height: 150px;
height: 150px;
background-position: center;
background-size: 100% auto;
background-repeat: no-repeat;
} }
&__body { &__body {