miracle/components/MediaItem.vue

42 lines
757 B
Vue
Raw Permalink Normal View History

<template>
<div class="card game-card">
<div class="card-content">
<div class="card-title">
<p class="card-caption"><a :href="link">{{title}}</a></p>
</div>
<div class="card-content">
<p><slot></slot></p>
</div>
<div class="card-footer">
</div>
</div>
</div>
</template>
<script>
export default {
props : [ 'title', 'link' ],
}
</script>
<style>
.game-card {
padding: 0.25rem 1rem;
@apply w-full flex flex-row transition duration-300 ease-in-out;
}
.game-card:hover {
@apply bg-yuika-blue-200;
}
.card-caption {
@apply text-2xl my-1;
}
.card-content {
@apply my-2 w-full;
}
.card-content p {
@apply my-1;
}
</style>