siimee/src/components/card.vue

<template lang="pug">
.card.f-col.start.b-solid.rounded.bg-primary
    header.t-right.dark
        h3 {{ card.name }}

    main
        section
            img(alt="Vue logo" style="width: 100%;" src="@/assets/logo.png")

    footer
        button(@click="state.count++") {{ state.count }}
        button(@click="close") close

</template>

<script setup>
import { defineProps, reactive, getCurrentInstance } from 'vue'

const instance = getCurrentInstance()

const props = defineProps({
    msg: String,
    card: Object
})

const state = reactive({
    count: 0,
    loaded: false,
    profile: null
})

const close = e => {
    instance.emit('remove', props.card)
}

</script>

<style lang="postcss">
@import '@/sss/theme.sss'
@import '@/sss/variables.sss'

.card
    margin: 0 $ms-3 0 0
    height: $ms-8
    width: $ms-7
    
    header, main, footer
        padding: 0 $ms-1
    header
        padding-top: $ms-1
    footer
        padding-bottom: $ms-1

</style>