wf4/components/Person/Person.vue

25 lines
597 B
Vue

<style scoped src="./Person.css"/>
<template>
<article class="Person flex-col">
<img :src="img" :alt="`Bild von ${name}`" />
<h3>{{name}}</h3>
<p>
<span v-for="tag in tags">{{tag}}</span>
</p>
<p class="flavour">{{flavour}}</p>
<Button :href="link" class="button" target="_blank" rel="noreferrer noopener" label="Zur Homepage" :aria-label="`Externer Link zur Homepage von ${name}`" />
</article>
</template>
<script setup lang="ts">
type Props = {
img: string
name: string
tags: string[]
flavour: string
link: string
}
defineProps<Props>()
</script>