Files
tayronafoods-web/src/components/Employee.vue
2023-09-17 18:08:04 +02:00

54 lines
850 B
Vue

<template>
<div class="employee-box">
<img class="employee-image" :src="$helper.getImage(image)">
<h3 class="name">{{ name }}</h3>
<h4 class="role">{{ role }}</h4>
</div>
</template>
<script>
export default {
props: {
image: String,
name: String,
role: String,
},
}
</script>
<style lang="scss" scoped>
.employee-box {
text-align: center;
}
.employee-image {
width: 110px !important;
border-radius: 50%;
}
.name {
margin: 36px 0 0;
font-weight: 300;
font-size: 24px;
line-height: 28px;
padding: 0;
}
.role {
margin: 28px 0 0;
font-weight: 200;
font-size: 16px;
line-height: 23.44px;
padding: 0;
}
@media only screen and (max-width: 767px) {
.role {
margin-top: 8px;
}
.employee-image {
width: 100%;
}
}
</style>