traxxx/assets/components/movies/tile.vue

<template>
	<div class="tile">
		<div class="movie">
			<router-link
				:to="{ name: 'movie', params: { movieId: movie.id, movieSlug: movie.slug } }"
				class="cover"
			>
				<img
					v-if="movie.covers[0]"
					:src="`/media/${movie.covers[0].thumbnail}`"
				>
			</router-link>

			<div class="info">
				<router-link
					:to="{ name: 'movie', params: { movieId: movie.id, movieSlug: movie.slug } }"
					class="title-link"
				>
					<h3 class="title">{{ movie.title }}</h3>
				</router-link>
			</div>
		</div>

		<div class="details">{{ movie.entity.name }}</div>
	</div>
</template>

<script>
export default {
	props: {
		movie: {
			type: Object,
			default: null,
		},
	},
};
</script>

<style lang="scss" scoped>
.tile {
	display: flex;
	flex-direction: column;
	background: var(--background);
	box-shadow: 0 0 3px var(--darken);
	font-size: 0;
}

.movie {
	display: flex;
}

.title-link {
	color: var(--text);
	text-decoration: none;
}

.details {
	color: var(--text-light);
	background: var(--profile);
	padding: .5rem 1rem;
    font-size: .8rem;
	font-weight: bold;
}

.cover {
	width: 12rem;

	img {
		width: 100%;
	}
}

.title {
	padding: 1rem;
	margin: 0;
	font-size: 1rem;
}
</style>