frontend/src/components/CardComponent.vue

<template>
    <div class="card" :class="{black: isBlack}">
        <span class="text" v-html="text">}</span>
        <span class="bottom-text">Cards Against Idiots</span>
    </div>
</template>

<script lang="ts">
    import { Component, Prop, Vue } from "vue-property-decorator";

    @Component
    export default class CardComponent extends Vue {
        @Prop()
        private text!: string;

        @Prop()
        private isBlack!: boolean;
    }
</script>

<style scoped>
.card{
    position: relative;
    width: 13em;
    height: 17em;
    border: solid black;
    border-radius: 12px;
    padding-top: 1em;
    background: white;
}

.bottom-text {
    display: block;
    position: absolute;
    bottom: 1em;
    left: 2em;
    font-style: italic;
}

.black {
    background-color: black;
    color: white;
}
</style>