feat(components): cards

Signed-off-by: ZTL-UwU <[email protected]>

components/content/Card.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="[&:not(:first-child)]:mt-5 relative">
+    <NuxtLink :to="to" :target="target">
+      <UiCard class="transition-all" :class="[to && 'hover:bg-muted']">
+        <UiCardHeader v-if="icon || title || $slots.title || description || $slots.description">
+          <Icon v-if="icon" class="mb-2" :name="icon" size="24" />
+          <UiCardTitle v-if="title || $slots.title">
+            <ContentSlot :use="$slots.title" unwrap="p" />
+            {{ title }}
+          </UiCardTitle>
+          <UiCardDescription v-if="description || $slots.description">
+            <ContentSlot :use="$slots.description" unwrap="p" />
+            {{ description }}
+          </UiCardDescription>
+        </UiCardHeader>
+        <UiCardContent v-if="content || $slots.content || $slots.default">
+          <ContentSlot :use="$slots.content" unwrap="p" />
+          <ContentSlot :use="$slots.default" unwrap="p" />
+        </UiCardContent>
+        <UiCardFooter v-if="footer || $slots.footer">
+          <ContentSlot :use="$slots.footer" unwrap="p" />
+          {{ footer }}
+        </UiCardFooter>
+      </UiCard>
+    </NuxtLink>
+    <Icon v-if="to" name="lucide:arrow-up-right" class="absolute right-4 top-4" />
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  title?: string;
+  description?: string;
+  footer?: string;
+  content?: string;
+  to?: string;
+  target?: string;
+  icon?: string;
+}>();
+</script>

content/1.getting-started/3.writing/2.components.md

@@ -6,6 +6,8 @@ icon: 'lucide:component'
 
 ## Docs Components
 
+The :badge[Badges]{variant="outline"} under each component title marks the compatibility with other doc templates.
+
 ### Alert
 :badge[Docus]{variant="outline" to="https://docus.dev/api/components#alert"}
 
@@ -198,6 +200,89 @@ icon: 'lucide:component'
   ```
 ::
 
+### Card
+
+:badge[Docus]{variant="outline" to="https://docus.dev/api/components#card"}
+:badge[Nuxt UI Pro]{variant="outline" to="https://ui.nuxt.com/pro/prose/card"}
+
+::code-group
+  ::preview{filename="Preview"}
+    ::card
+    #title
+    Card with slots
+
+    #description
+    Beautifully designed Nuxt Content template with shadcn-vue. Customizable. Compatible. Open Source.
+
+    #content
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.
+
+    #footer
+    `Card Footer`
+    ::
+
+    ::card
+    ---
+    title: Card with props
+    description: Beautifully designed Nuxt Content template with shadcn-vue. Customizable. Compatible. Open Source.
+    footer: Card Footer
+    icon: 'lucide:box'
+    ---
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.
+    ::
+
+    ::card
+    ---
+    to: https://github.com/ZTL-UwU/shadcn-docs-nuxt
+    target: _blank
+    ---
+    #title
+    Card with link
+
+    #content
+    Beautifully designed Nuxt Content template with shadcn-vue. Customizable. Compatible. Open Source.
+    ::
+  ::
+
+  ```md [Code]
+  ::card
+  #title
+  Card with slots
+
+  #description
+  Beautifully designed Nuxt Content template with shadcn-vue. Customizable. Compatible. Open Source.
+
+  #content
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.
+
+  #footer
+  `Card Footer`
+  ::
+
+  ::card
+  ---
+  title: Card with props
+  description: Beautifully designed Nuxt Content template with shadcn-vue. Customizable. Compatible. Open Source.
+  footer: Card Footer
+  icon: 'lucide:box'
+  ---
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.
+  ::
+
+  ::card
+  ---
+  to: https://github.com/ZTL-UwU/shadcn-docs-nuxt
+  target: _blank
+  ---
+  #title
+  Card with link
+
+  #content
+  Beautifully designed Nuxt Content template with shadcn-vue. Customizable. Compatible. Open Source.
+  ::
+  ```
+::
+
 ## Landing Page Components
 
 ### Hero