feat: add support for different card sizes in AFCL Card component

Author: yaroslav8765

adminforth/documentation/docs/tutorial/03-Customization/15-afcl.md

@@ -437,7 +437,7 @@ const enable = ref(false)
 </div>
 
 ## Card 
-
+### Standart card
 <div class="split-screen">
 ```ts
 import { Card } from '@/afcl'
@@ -453,6 +453,36 @@ import { Card } from '@/afcl'
 
 ![AFCL Checkbox](Card.png)
 
+</div>
+
+### Different card sizes
+If you want to have smaller card, you can specify size in props:
+
+<div class="split-screen">
+
+```ts
+  <Card
+    size="lg"
+    title="This is a large card"
+    description="Description text for large card. This is a large card. Very nice card. Big one. You can put here any content you want."
+  >
+  </Card>
+
+  <Card
+    size="md"
+    title="This is a medium card"
+    description="Description text for medium card. This is a medium card. Very nice card. Big one. You can put here any content you want."
+  >
+  </Card>
+
+  <Card
+    size="sm"
+    title="This is a small card"
+    description="Description text for small card. This is a small card. Very nice card. Big one. You can put here any content you want."
+  >
+  </Card>
+```
+![AFCL Checkbox](Card2.png)
 
 </div>
 

adminforth/documentation/docs/tutorial/03-Customization/Card2.png

@@ -1,8 +1,14 @@
 <template>
-<a href="#" class="block max-w-sm p-6 bg-lightCardBackground border border-lightCardBorder rounded-lg shadow-sm hover:bg-lightCardBackgroundHover dark:bg-darkCardBackground dark:border-darkCardBorder dark:hover:bg-darkCardBackgroundHover">
+<a href="#" 
+    class="block max-w-sm bg-lightCardBackground border border-lightCardBorder rounded-lg shadow-sm hover:bg-lightCardBackgroundHover dark:bg-darkCardBackground dark:border-darkCardBorder dark:hover:bg-darkCardBackgroundHover"
+    :class="[
+        props.size === 'sm' ? 'p-2' : props.size === 'md' ? 'p-4' : 'p-6',
+        props.hideBorder ? 'border-0' : ''
+    ]"
+>
 
-<h5 class="mb-2 text-2xl font-bold tracking-tight text-lightCardTitle dark:text-darkCardTitle">{{ props.title }}</h5>
-<p class="font-normal text-base text-lightCardDescription dark:text-darkCardDescription">{{ props.description }}</p>
+<h5 class="font-bold tracking-tight text-lightCardTitle dark:text-darkCardTitle" :class="[props.size === 'sm' ? 'text-base' : props.size === 'md' ? 'text-lg mb-1' : 'text-xl mb-2']">{{ props.title }}</h5>
+<p class="font-normal text-lightCardDescription dark:text-darkCardDescription" :class="[props.size === 'sm' ? 'text-sm' : props.size === 'md' ? 'text-base' : 'text-lg']">{{ props.description }}</p>
 </a>
 </template>
 
@@ -11,6 +17,8 @@
 const props = defineProps<{
     title: string;
     description: string;
+    size?: 'sm' | 'md' | 'lg';
+    hideBorder?: boolean;
 }>();
 
 </script>