siimee/frontend/src/components/NamePlate.vue

<template lang="pug">
.name-plate.xs12.w-flex.justify-center
    section(:class='{ box: !isList }' v-if='pid')
        router-link(:to='`/profile/${pid}`' disabled)
            h1.text-capitalize {{ name }}
                span O
            p.text-capitalize {{ role }}&nbsp;
                span.text-capitalize(v-if='isList')
                    span.text-capitalize | {{ locale }}
            p.text-capitalize(v-if='!isList') {{ pronouns }}
</template>

<script>
export default {
    props: {
        pid: {
            type: Number,
            required: true,
        },
        name: {
            type: String,
            required: true,
        },
        role: {
            type: String,
            required: true,
        },
        locale: {
            type: String,
            required: true,
        },
        pronouns: {
            type: String,
            required: true,
        },
        isList: {
            type: Boolean,
            required: false,
            default: true,
        },
    },
}
</script>
<style lang="sass">
.name-plate
    section
        display: flex
        flex-direction: column
        align-items: center
        justify-content: center
        min-height: 10vh
        width: 100%
        &.box
            border-radius: 6px
            height: 15vw
            width: 15vw
            text-align: center
            font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif
            h1
                font-weight: bold
                font-size: 1.619em
                color: #183770
            p
                font-weight: bolder
                font-size: 0.8095em
                color: #183770
        h1
            font-weight: bold
            font-size: 1.619em
            color: #F7F5A6
            text-align: center
        p
            font-weight: bolder
            font-size: 1em
            color: #F7F5A6
            text-align: center
</style>