diff --git a/.vitepress/theme/components/CardField.vue b/.vitepress/theme/components/CardField.vue
index eb836d5f7..7ee21a467 100644
--- a/.vitepress/theme/components/CardField.vue
+++ b/.vitepress/theme/components/CardField.vue
@@ -1,16 +1,22 @@
 <script setup lang="ts">
+// Define a prop named 'icon' of type string
 defineProps<{
   icon: string
 }>()
 </script>
 
 <template>
+  <!-- Template section for the component's layout -->
   <div class="flex items-center mb-[8px] g-[12px]">
+    <!-- Flex container for the icon and the slot content -->
     <span class="flex items-center">
+      <!-- Container for the icon with a specific size and class based on the 'icon' prop -->
       <div class="text-2xl" :class="icon" />
+      <!-- Slot for the component's content with a class for text styling -->
       <div class="ml-2 text-sm text-[var(--vp-c-text-2)]">
-        <slot />
+        <slot /> <!-- The content provided when using the component -->
       </div>
     </span>
   </div>
 </template>
+