diff --git a/doc/card/BasicDoc.vue b/doc/card/BasicDoc.vue
index 0124b3de4..a47632890 100644
--- a/doc/card/BasicDoc.vue
+++ b/doc/card/BasicDoc.vue
@@ -1,79 +1,72 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>A simple Card is created with a <i>title</i> property along with the content as children.</p>
+    </DocSectionText>
+    <div class="card">
+        <Card>
+            <template #title> Simple Card </template>
+            <template #content>
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque
+                    quas!
+                </p>
+            </template>
+        </Card>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Card>
+    <template #title> Simple Card </template>
+    <template #content>
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque
+            quas!
+        </p>
+    </template>
+</Card>`,
+                options: `
 <template>
     <div class="card">
-        <DataTable filterDisplay="row" :value="customers" rowGroupMode="subheader" groupRowsBy="representative.name" sortMode="single" sortField="representative.name" :sortOrder="1" scrollable scrollHeight="400px" tableStyle="min-width: 50rem">
-            <Column field="representative.name" header="Representative"></Column>
-            <Column field="name" header="Name" style="min-width: 200px"></Column>
-            <Column field="country" header="Country" style="min-width: 200px">
-                <template #body="slotProps">
-                    <div class="flex align-items-center gap-2">
-                        <img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`flag flag-${slotProps.data.country.code}`" style="width: 24px" />
-                        <span>{{ slotProps.data.country.name }}</span>
-                    </div>
-                </template>
-            </Column>
-            <Column field="company" header="Company" style="min-width: 200px"></Column>
-            <Column field="status" header="Status" style="min-width: 200px">
-                <template #body="slotProps">
-                    <Tag :value="slotProps.data.status" :severity="getSeverity(slotProps.data.status)" />
-                </template>
-            </Column>
-            <Column field="date" header="Date" style="min-width: 200px"></Column>
-            <template #groupheader="slotProps">
-                <div class="flex align-items-center gap-2">
-                    <img :alt="slotProps.data.representative.name" :src="`https://primefaces.org/cdn/primevue/images/avatar/${slotProps.data.representative.image}`" width="32" style="vertical-align: middle" />
-                    <span>{{ slotProps.data.representative.name }}</span>
-                </div>
+        <Card>
+            <template #title> Simple Card </template>
+            <template #content>
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque
+                    quas!
+                </p>
             </template>
-            <template #groupfooter="slotProps">
-                <div class="flex justify-content-end font-bold w-full">
-                    Total Customers:
-                    {{ calculateCustomerTotal(slotProps.data.representative.name) }}
-                </div>
+        </Card>
+    </div>
+</template>
+
+<script>
+<\/script>`,
+                composition: `
+<template>
+    <div class="card">
+        <Card>
+            <template #title> Simple Card </template>
+            <template #content>
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque
+                    quas!
+                </p>
             </template>
-        </DataTable>
+        </Card>
     </div>
 </template>
 
 <script setup>
-import { CustomerService } from '@/service/CustomerService';
-import { onMounted, ref } from 'vue';
-
-onMounted(() => {
-    CustomerService.getCustomersMedium().then((data) => (customers.value = data));
-});
-
-const customers = ref();
-
-const calculateCustomerTotal = (name) => {
-    let total = 0;
-
-    if (customers.value) {
-        for (let customer of customers.value) {
-            if (customer.representative.name === name) {
-                total++;
+<\/script>`
             }
-        }
-    }
-
-    return total;
-};
-
-const getSeverity = (status) => {
-    switch (status) {
-        case 'unqualified':
-            return 'danger';
-
-        case 'qualified':
-            return 'success';
-
-        case 'new':
-            return 'info';
-
-        case 'negotiation':
-            return 'warning';
-
-        case 'renewal':
-            return null;
+        };
     }
 };
 </script>