<script setup lang="ts">import { CCard, CButton } from '@coreui/vue-pro';
import { onMounted, ref } from 'vue';
const count = ref(0);
const cardRef = ref(null);
const customCardRef = ref(null);
onMounted(() => {
 console.log({ cardRef: cardRef.value, customCardRef: customCardRef.value });
});
</script>

<template>

 <CCard ref="cardRef" class="p-5 border-style">
    <h1>CoreUI CCard</h1>
    <div class="counter">The count is: {{ count }}</div>
    <CButton color="primary" @click="count++">Increment Counter</CButton>
 </CCard>

 <div ref="customCardRef" class="custom-card mt-5 p-5">
    <h1>Custom Card</h1>
    <div class="counter">The count is: {{ count }}</div>
    <CButton color="primary" @click="count++">Increment Counter</CButton>
 </div>

</template>

<style scoped>a {
 color: #42b983;
}
label {
 margin: 0 0.5em;
 font-weight: bold;
}
code {
 background-color: #eee;
 padding: 2px 4px;
 border-radius: 4px;
 color: #304455;
}
.custom-card,
.border-style {
 border: 2px solid lightgrey;
}
</style>