diff --git a/docs/content/docs/2.components/page-card.md b/docs/content/docs/2.components/page-card.md
index 0a8f700947..2160691329 100644
--- a/docs/content/docs/2.components/page-card.md
+++ b/docs/content/docs/2.components/page-card.md
@@ -188,6 +188,35 @@ slots:
 :img{src="/tailwindcss-v4.svg" alt="Tailwind CSS" class="w-full"}
 ::
 
+### Links
+
+Use the `links` prop to display a list of [Button](/docs/components/button) under the description.
+
+::component-code{slug="page-Card"}
+---
+prettier: true
+hide:
+  - class
+ignore:
+  - title
+  - description
+  - icon
+  - orientation
+  - links
+props:
+  title: 'Tailwind CSS'
+  description: 'Nuxt UI integrates with latest Tailwind CSS v4, bringing significant improvements.'
+  icon: 'i-simple-icons-tailwindcss'
+  links:
+    - label: 'Get started'
+      color: 'neutral'
+    - label: 'Learn more'
+      color: 'neutral'
+      variant: 'subtle'
+      trailingIcon: 'i-lucide-arrow-right'
+---
+::
+
 ### Highlight
 
 Use the `highlight` and `highlight-color` props to display a highlighted border around the card.
diff --git a/src/runtime/components/PageCard.vue b/src/runtime/components/PageCard.vue
index 5640a8a891..7692c3856e 100644
--- a/src/runtime/components/PageCard.vue
+++ b/src/runtime/components/PageCard.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/page-card'
-import type { IconProps, LinkProps } from '../types'
+import type { IconProps, LinkProps, ButtonProps } from '../types'
 import type { ComponentConfig } from '../types/tv'
 
 type PageCard = ComponentConfig<typeof theme, AppConfig, 'pageCard'>
@@ -53,6 +53,7 @@ export interface PageCardProps {
   target?: LinkProps['target']
   onClick?: (event: MouseEvent) => void | Promise<void>
   class?: any
+  links?: ButtonProps[]
   ui?: PageCard['slots']
 }
 
@@ -63,6 +64,7 @@ export interface PageCardSlots {
   title(props?: {}): any
   description(props?: {}): any
   footer(props?: {}): any
+  links(props?: {}): any
   default(props?: {}): any
 }
 </script>
@@ -132,18 +134,17 @@ const ariaLabel = computed(() => {
     <div v-if="props.spotlight" :class="ui.spotlight({ class: props.ui?.spotlight })" />
 
     <div :class="ui.container({ class: props.ui?.container })">
-      <div v-if="!!slots.header || (icon || !!slots.leading) || !!slots.body || (title || !!slots.title) || (description || !!slots.description) || !!slots.footer" :class="ui.wrapper({ class: props.ui?.wrapper })">
+      <div v-if="!!slots.header || (icon || !!slots.leading) || !!slots.body || (title || !!slots.title) || (description || !!slots.description) || !!slots.footer || (links?.length || !!slots.links)" :class="ui.wrapper({ class: props.ui?.wrapper })">
         <div v-if="!!slots.header" :class="ui.header({ class: props.ui?.header })">
           <slot name="header" />
         </div>
 
-        <div v-if="icon || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })">
-          <slot name="leading">
-            <UIcon v-if="icon" :name="icon" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
-          </slot>
-        </div>
-
         <div v-if="!!slots.body || (title || !!slots.title) || (description || !!slots.description)" :class="ui.body({ class: props.ui?.body })">
+          <div v-if="icon || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })">
+            <slot name="leading">
+              <UIcon v-if="icon" :name="icon" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
+            </slot>
+          </div>
           <slot name="body">
             <div v-if="title || !!slots.title" :class="ui.title({ class: props.ui?.title })">
               <slot name="title">
@@ -159,6 +160,12 @@ const ariaLabel = computed(() => {
           </slot>
         </div>
 
+        <div v-if="links?.length || !!slots.links" :class="ui.links({ class: props.ui?.links })">
+          <slot name="links">
+            <UButton v-for="(link, index) in links" :key="index" v-bind="link" />
+          </slot>
+        </div>
+
         <div v-if="!!slots.footer" :class="ui.footer({ class: props.ui?.footer })">
           <slot name="footer" />
         </div>
@@ -167,13 +174,7 @@ const ariaLabel = computed(() => {
       <slot />
     </div>
 
-    <ULink
-      v-if="to"
-      :aria-label="ariaLabel"
-      v-bind="{ to, target, ...$attrs }"
-      class="focus:outline-none peer"
-      raw
-    >
+    <ULink v-if="to" :aria-label="ariaLabel" v-bind="{ to, target, ...$attrs }" class="focus:outline-none peer" raw>
       <span class="absolute inset-0" aria-hidden="true" />
     </ULink>
   </Primitive>
diff --git a/src/theme/page-card.ts b/src/theme/page-card.ts
index da72414877..5063961686 100644
--- a/src/theme/page-card.ts
+++ b/src/theme/page-card.ts
@@ -5,22 +5,27 @@ export default (options: Required<NuxtOptions['ui']>) => ({
     root: 'relative flex rounded-lg',
     spotlight: 'absolute inset-0 rounded-[inherit] pointer-events-none bg-default/90',
     container: 'relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6',
-    wrapper: 'flex flex-col flex-1 items-start',
+    wrapper: 'flex flex-col flex-1 items-start gap-2.5 flex-wrap',
     header: 'mb-4',
     body: 'flex-1',
     footer: 'pt-4 mt-auto',
     leading: 'inline-flex items-center mb-2.5',
     leadingIcon: 'size-5 shrink-0 text-primary',
     title: 'text-base text-pretty font-semibold text-highlighted',
-    description: 'text-[15px] text-pretty'
+    description: 'text-[15px] text-pretty',
+    links: 'inline-flex flex-wrap gap-2.5'
   },
   variants: {
     orientation: {
       horizontal: {
-        container: 'lg:grid-cols-2 lg:items-center'
+        container: 'lg:grid-cols-2 lg:items-center',
+        wrapper: '',
+        links: ''
       },
       vertical: {
-        container: ''
+        container: '',
+        wrapper: 'flex-row',
+        links: 'self-center'
       }
     },
     reverse: {
diff --git a/test/components/PageCard.spec.ts b/test/components/PageCard.spec.ts
index 4cc4fd2a8a..ec4905ac5c 100644
--- a/test/components/PageCard.spec.ts
+++ b/test/components/PageCard.spec.ts
@@ -22,6 +22,7 @@ describe('PageCard', () => {
     ['with icon', { props: { icon: 'i-lucide-house' } }],
     ['with title', { props: { title: 'Title' } }],
     ['with description', { props: { description: 'Description' } }],
+    ['with links', { props: { links: [{ label: 'Get started' }] } }],
     ['with to', { props: { to: 'https://github.com/benjamincanac' } }],
     ...variants.map((variant: string) => [`with variant ${variant}`, { props: { ...props, variant } }]),
     ...variants.map((variant: string) => [`with variant ${variant} to`, { props: { ...props, variant, to: 'https://github.com/benjamincanac' } }]),
@@ -43,6 +44,7 @@ describe('PageCard', () => {
     ['with title slot', { props, slots: { title: () => 'Title slot' } }],
     ['with description slot', { props, slots: { description: () => 'Description slot' } }],
     ['with footer slot', { props, slots: { footer: () => 'Footer slot' } }],
+    ['with links slot', { props, slots: { links: () => 'Links slot' } }],
     ['with default slot', { props, slots: { default: () => 'Default slot' } }]
   ])('renders %s correctly', async (nameOrHtml: string, options: { props?: PageCardProps, slots?: Partial<PageCardSlots> }) => {
     const html = await ComponentRender(nameOrHtml, options, PageCard)
diff --git a/test/components/__snapshots__/PageCard-vue.spec.ts.snap b/test/components/__snapshots__/PageCard-vue.spec.ts.snap
index dd730f7cd4..7c63799259 100644
--- a/test/components/__snapshots__/PageCard-vue.spec.ts.snap
+++ b/test/components/__snapshots__/PageCard-vue.spec.ts.snap
@@ -14,10 +14,12 @@ exports[`PageCard > renders with body slot correctly 1`] = `
 "<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default">
   <!--v-if-->
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+    <div class="flex flex-1 items-start gap-2.5 flex-wrap flex-row">
+      <!--v-if-->
+      <div class="flex-1">
+        <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>Body slot
+      </div>
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
-      <div class="flex-1">Body slot</div>
       <!--v-if-->
     </div>
   </div>
@@ -29,14 +31,15 @@ exports[`PageCard > renders with class correctly 1`] = `
 "<div data-orientation="vertical" class="relative flex bg-default ring ring-default rounded-xl">
   <!--v-if-->
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+    <div class="flex flex-1 items-start gap-2.5 flex-wrap flex-row">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
       <div class="flex-1">
+        <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
         <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
         <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
+      <!--v-if-->
     </div>
   </div>
   <!--v-if-->
@@ -47,14 +50,15 @@ exports[`PageCard > renders with default slot correctly 1`] = `
 "<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default">
   <!--v-if-->
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+    <div class="flex flex-1 items-start gap-2.5 flex-wrap flex-row">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
       <div class="flex-1">
+        <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
         <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
         <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
+      <!--v-if-->
     </div>Default slot
   </div>
   <!--v-if-->
@@ -65,14 +69,15 @@ exports[`PageCard > renders with description correctly 1`] = `
 "<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default">
   <!--v-if-->
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
-      <!--v-if-->
+    <div class="flex flex-1 items-start gap-2.5 flex-wrap flex-row">
       <!--v-if-->
       <div class="flex-1">
+        <!--v-if-->
         <!--v-if-->
         <div class="text-[15px] text-pretty text-muted">Description</div>
       </div>
       <!--v-if-->
+      <!--v-if-->
     </div>
   </div>
   <!--v-if-->
@@ -83,14 +88,15 @@ exports[`PageCard > renders with description slot correctly 1`] = `
 "<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default">
   <!--v-if-->
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+    <div class="flex flex-1 items-start gap-2.5 flex-wrap flex-row">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
       <div class="flex-1">
+        <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
         <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
         <div class="text-[15px] text-pretty text-muted mt-1">Description slot</div>
       </div>
       <!--v-if-->
+      <!--v-if-->
     </div>
   </div>
   <!--v-if-->
@@ -101,13 +107,14 @@ exports[`PageCard > renders with footer slot correctly 1`] = `
 "<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default">
   <!--v-if-->
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+    <div class="flex flex-1 items-start gap-2.5 flex-wrap flex-row">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
       <div class="flex-1">
+        <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
         <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
         <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
+      <!--v-if-->
       <div class="pt-4 mt-auto">Footer slot</div>
     </div>
   </div>
@@ -119,14 +126,15 @@ exports[`PageCard > renders with header slot correctly 1`] = `
 "<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default">
   <!--v-if-->
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+    <div class="flex flex-1 items-start gap-2.5 flex-wrap flex-row">
       <div class="mb-4">Header slot</div>
-      <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
       <div class="flex-1">
+        <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
         <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
         <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
+      <!--v-if-->
     </div>
   </div>
   <!--v-if-->
@@ -137,14 +145,15 @@ exports[`PageCard > renders with highlight color error correctly 1`] = `
 "<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring-2 ring-error">
   <!--v-if-->
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+    <div class="flex flex-1 items-start gap-2.5 flex-wrap flex-row">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
       <div class="flex-1">
+        <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
         <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
         <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
+      <!--v-if-->
     </div>
   </div>
   <!--v-if-->
@@ -155,14 +164,15 @@ exports[`PageCard > renders with highlight color info correctly 1`] = `
 "<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring-2 ring-info">
   <!--v-if-->
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+    <div class="flex flex-1 items-start gap-2.5 flex-wrap flex-row">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
       <div class="flex-1">
+        <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
         <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
         <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
+      <!--v-if-->
     </div>
   </div>
   <!--v-if-->
@@ -173,14 +183,15 @@ exports[`PageCard > renders with highlight color neutral correctly 1`] = `
 "<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring-2 ring-inverted">
   <!--v-if-->
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+    <div class="flex flex-1 items-start gap-2.5 flex-wrap flex-row">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
       <div class="flex-1">
+        <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
         <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
         <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
+      <!--v-if-->
     </div>
   </div>
   <!--v-if-->
@@ -191,14 +202,15 @@ exports[`PageCard > renders with highlight color neutral correctly 2`] = `
 "<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring-2 ring-inverted">
   <!--v-if-->
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+    <div class="flex flex-1 items-start gap-2.5 flex-wrap flex-row">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
       <div class="flex-1">
+        <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
         <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
         <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
+      <!--v-if-->
     </div>
   </div>
   <!--v-if-->
@@ -209,14 +221,15 @@ exports[`PageCard > renders with highlight color primary correctly 1`] = `
 "<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring-2 ring-primary">
   <!--v-if-->
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+    <div class="flex flex-1 items-start gap-2.5 flex-wrap flex-row">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
       <div class="flex-1">
+        <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
         <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
         <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
+      <!--v-if-->
     </div>
   </div>
   <!--v-if-->
@@ -227,14 +240,15 @@ exports[`PageCard > renders with highlight color secondary correctly 1`] = `
 "<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring-2 ring-secondary">
   <!--v-if-->
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+    <div class="flex flex-1 items-start gap-2.5 flex-wrap flex-row">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
       <div class="flex-1">
+        <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
         <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
         <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
+      <!--v-if-->
     </div>
   </div>
   <!--v-if-->
@@ -245,14 +259,15 @@ exports[`PageCard > renders with highlight color success correctly 1`] = `
 "<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring-2 ring-success">
   <!--v-if-->
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+    <div class="flex flex-1 items-start gap-2.5 flex-wrap flex-row">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
       <div class="flex-1">
+        <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
         <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
         <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
+      <!--v-if-->
     </div>
   </div>
   <!--v-if-->
@@ -263,14 +278,15 @@ exports[`PageCard > renders with highlight color warning correctly 1`] = `
 "<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring-2 ring-warning">
   <!--v-if-->
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+    <div class="flex flex-1 items-start gap-2.5 flex-wrap flex-row">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
       <div class="flex-1">
+        <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
         <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
         <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
+      <!--v-if-->
     </div>
   </div>
   <!--v-if-->
@@ -281,14 +297,15 @@ exports[`PageCard > renders with highlight correctly 1`] = `
 "<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring-2 ring-primary">
   <!--v-if-->
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+    <div class="flex flex-1 items-start gap-2.5 flex-wrap flex-row">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
       <div class="flex-1">
+        <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
         <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
         <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
+      <!--v-if-->
     </div>
   </div>
   <!--v-if-->
@@ -299,9 +316,9 @@ exports[`PageCard > renders with icon correctly 1`] = `
 "<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default">
   <!--v-if-->
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+    <div class="flex flex-1 items-start gap-2.5 flex-wrap flex-row">
+      <!--v-if-->
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
       <!--v-if-->
       <!--v-if-->
     </div>
@@ -314,14 +331,52 @@ exports[`PageCard > renders with leading slot correctly 1`] = `
 "<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default">
   <!--v-if-->
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+    <div class="flex flex-1 items-start gap-2.5 flex-wrap flex-row">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5">Leading slot</div>
       <div class="flex-1">
+        <div class="inline-flex items-center mb-2.5">Leading slot</div>
         <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
         <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
+      <!--v-if-->
+    </div>
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`PageCard > renders with links correctly 1`] = `
+"<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default">
+  <!--v-if-->
+  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
+    <div class="flex flex-1 items-start gap-2.5 flex-wrap flex-row">
+      <!--v-if-->
+      <!--v-if-->
+      <div class="inline-flex flex-wrap gap-2.5 self-center"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+          <!--v-if--><span class="truncate">Get started</span>
+          <!--v-if-->
+        </button></div>
+      <!--v-if-->
+    </div>
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`PageCard > renders with links slot correctly 1`] = `
+"<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default">
+  <!--v-if-->
+  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
+    <div class="flex flex-1 items-start gap-2.5 flex-wrap flex-row">
+      <!--v-if-->
+      <div class="flex-1">
+        <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
+        <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
+      </div>
+      <div class="inline-flex flex-wrap gap-2.5 self-center">Links slot</div>
+      <!--v-if-->
     </div>
   </div>
   <!--v-if-->
@@ -332,14 +387,15 @@ exports[`PageCard > renders with orientation horizontal correctly 1`] = `
 "<div data-orientation="horizontal" class="relative flex rounded-lg bg-default ring ring-default">
   <!--v-if-->
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6 lg:grid-cols-2 lg:items-center">
-    <div class="flex flex-col flex-1 items-start">
+    <div class="flex flex-col flex-1 items-start gap-2.5 flex-wrap">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
       <div class="flex-1">
+        <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
         <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
         <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
+      <!--v-if-->
     </div>
   </div>
   <!--v-if-->
@@ -350,14 +406,15 @@ exports[`PageCard > renders with orientation horizontal reverse correctly 1`] =
 "<div data-orientation="horizontal" class="relative flex rounded-lg bg-default ring ring-default">
   <!--v-if-->
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6 lg:grid-cols-2 lg:items-center">
-    <div class="flex flex-col flex-1 items-start lg:order-last">
+    <div class="flex flex-col flex-1 items-start gap-2.5 flex-wrap lg:order-last">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
       <div class="flex-1">
+        <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
         <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
         <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
+      <!--v-if-->
     </div>
   </div>
   <!--v-if-->
@@ -368,14 +425,15 @@ exports[`PageCard > renders with orientation vertical correctly 1`] = `
 "<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default">
   <!--v-if-->
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+    <div class="flex flex-1 items-start gap-2.5 flex-wrap flex-row">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
       <div class="flex-1">
+        <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
         <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
         <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
+      <!--v-if-->
     </div>
   </div>
   <!--v-if-->
@@ -386,14 +444,15 @@ exports[`PageCard > renders with orientation vertical reverse correctly 1`] = `
 "<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default">
   <!--v-if-->
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start lg:order-last">
+    <div class="flex flex-1 items-start gap-2.5 flex-wrap flex-row lg:order-last">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
       <div class="flex-1">
+        <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
         <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
         <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
+      <!--v-if-->
     </div>
   </div>
   <!--v-if-->
@@ -404,14 +463,15 @@ exports[`PageCard > renders with spotlight color error correctly 1`] = `
 "<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default">
   <div class="absolute inset-0 rounded-[inherit] pointer-events-none bg-default/90"></div>
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+    <div class="flex flex-1 items-start gap-2.5 flex-wrap flex-row">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
       <div class="flex-1">
+        <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
         <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
         <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
+      <!--v-if-->
     </div>
   </div>
   <!--v-if-->
@@ -422,14 +482,15 @@ exports[`PageCard > renders with spotlight color info correctly 1`] = `
 "<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default">
   <div class="absolute inset-0 rounded-[inherit] pointer-events-none bg-default/90"></div>
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+    <div class="flex flex-1 items-start gap-2.5 flex-wrap flex-row">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
       <div class="flex-1">
+        <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
         <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
         <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
+      <!--v-if-->
     </div>
   </div>
   <!--v-if-->
@@ -440,14 +501,15 @@ exports[`PageCard > renders with spotlight color neutral correctly 1`] = `
 "<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default">
   <div class="absolute inset-0 rounded-[inherit] pointer-events-none bg-default/90"></div>
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+    <div class="flex flex-1 items-start gap-2.5 flex-wrap flex-row">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
       <div class="flex-1">
+        <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
         <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
         <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
+      <!--v-if-->
     </div>
   </div>
   <!--v-if-->
@@ -458,14 +520,15 @@ exports[`PageCard > renders with spotlight color neutral correctly 2`] = `
 "<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default">
   <div class="absolute inset-0 rounded-[inherit] pointer-events-none bg-default/90"></div>
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+    <div class="flex flex-1 items-start gap-2.5 flex-wrap flex-row">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
       <div class="flex-1">
+        <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
         <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
         <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
+      <!--v-if-->
     </div>
   </div>
   <!--v-if-->
@@ -476,14 +539,15 @@ exports[`PageCard > renders with spotlight color primary correctly 1`] = `
 "<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default">
   <div class="absolute inset-0 rounded-[inherit] pointer-events-none bg-default/90"></div>
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+    <div class="flex flex-1 items-start gap-2.5 flex-wrap flex-row">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
       <div class="flex-1">
+        <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
         <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
         <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
+      <!--v-if-->
     </div>
   </div>
   <!--v-if-->
@@ -494,14 +558,15 @@ exports[`PageCard > renders with spotlight color secondary correctly 1`] = `
 "<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default">
   <div class="absolute inset-0 rounded-[inherit] pointer-events-none bg-default/90"></div>
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+    <div class="flex flex-1 items-start gap-2.5 flex-wrap flex-row">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
       <div class="flex-1">
+        <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
         <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
         <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
+      <!--v-if-->
     </div>
   </div>
   <!--v-if-->
@@ -512,14 +577,15 @@ exports[`PageCard > renders with spotlight color success correctly 1`] = `
 "<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default">
   <div class="absolute inset-0 rounded-[inherit] pointer-events-none bg-default/90"></div>
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+    <div class="flex flex-1 items-start gap-2.5 flex-wrap flex-row">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
       <div class="flex-1">
+        <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
         <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
         <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
+      <!--v-if-->
     </div>
   </div>
   <!--v-if-->
@@ -530,14 +596,15 @@ exports[`PageCard > renders with spotlight color warning correctly 1`] = `
 "<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default">
   <div class="absolute inset-0 rounded-[inherit] pointer-events-none bg-default/90"></div>
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+    <div class="flex flex-1 items-start gap-2.5 flex-wrap flex-row">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
       <div class="flex-1">
+        <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
         <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
         <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
+      <!--v-if-->
     </div>
   </div>
   <!--v-if-->
@@ -548,14 +615,15 @@ exports[`PageCard > renders with spotlight correctly 1`] = `
 "<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default">
   <div class="absolute inset-0 rounded-[inherit] pointer-events-none bg-default/90"></div>
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+    <div class="flex flex-1 items-start gap-2.5 flex-wrap flex-row">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
       <div class="flex-1">
+        <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
         <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
         <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
+      <!--v-if-->
     </div>
   </div>
   <!--v-if-->
@@ -566,14 +634,15 @@ exports[`PageCard > renders with title correctly 1`] = `
 "<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default">
   <!--v-if-->
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
-      <!--v-if-->
+    <div class="flex flex-1 items-start gap-2.5 flex-wrap flex-row">
       <!--v-if-->
       <div class="flex-1">
+        <!--v-if-->
         <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
         <!--v-if-->
       </div>
       <!--v-if-->
+      <!--v-if-->
     </div>
   </div>
   <!--v-if-->
@@ -584,14 +653,15 @@ exports[`PageCard > renders with title slot correctly 1`] = `
 "<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default">
   <!--v-if-->
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+    <div class="flex flex-1 items-start gap-2.5 flex-wrap flex-row">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
       <div class="flex-1">
+        <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
         <div class="text-base text-pretty font-semibold text-highlighted">Title slot</div>
         <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
+      <!--v-if-->
     </div>
   </div>
   <!--v-if-->
@@ -611,14 +681,15 @@ exports[`PageCard > renders with ui correctly 1`] = `
 "<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default">
   <!--v-if-->
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+    <div class="flex flex-1 items-start gap-2.5 flex-wrap flex-row">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
       <div class="flex-1">
+        <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
         <div class="text-base text-pretty text-highlighted font-bold">Title</div>
         <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
+      <!--v-if-->
     </div>
   </div>
   <!--v-if-->
@@ -629,14 +700,15 @@ exports[`PageCard > renders with variant ghost correctly 1`] = `
 "<div data-orientation="vertical" class="relative flex rounded-lg">
   <!--v-if-->
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+    <div class="flex flex-1 items-start gap-2.5 flex-wrap flex-row">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
       <div class="flex-1">
+        <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
         <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
         <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
+      <!--v-if-->
     </div>
   </div>
   <!--v-if-->
@@ -647,14 +719,15 @@ exports[`PageCard > renders with variant ghost highlight correctly 1`] = `
 "<div data-orientation="vertical" class="relative flex rounded-lg ring-2 ring-primary">
   <!--v-if-->
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+    <div class="flex flex-1 items-start gap-2.5 flex-wrap flex-row">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
       <div class="flex-1">
+        <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
         <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
         <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
+      <!--v-if-->
     </div>
   </div>
   <!--v-if-->
@@ -665,14 +738,15 @@ exports[`PageCard > renders with variant ghost to correctly 1`] = `
 "<div data-orientation="vertical" class="relative flex rounded-lg transition hover:bg-elevated/50 has-focus-visible:ring-2 has-focus-visible:ring-primary">
   <!--v-if-->
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+    <div class="flex flex-1 items-start gap-2.5 flex-wrap flex-row">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
       <div class="flex-1">
+        <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
         <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
         <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
+      <!--v-if-->
     </div>
   </div><a href="https://github.com/benjamincanac" target="_blank" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
 </div>"
@@ -682,14 +756,15 @@ exports[`PageCard > renders with variant naked correctly 1`] = `
 "<div data-orientation="vertical" class="relative flex rounded-lg">
   <!--v-if-->
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-0 sm:p-0">
-    <div class="flex flex-col flex-1 items-start">
+    <div class="flex flex-1 items-start gap-2.5 flex-wrap flex-row">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
       <div class="flex-1">
+        <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
         <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
         <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
+      <!--v-if-->
     </div>
   </div>
   <!--v-if-->
@@ -700,14 +775,15 @@ exports[`PageCard > renders with variant naked highlight correctly 1`] = `
 "<div data-orientation="vertical" class="relative flex rounded-lg ring-2 ring-primary">
   <!--v-if-->
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-0 sm:p-0">
-    <div class="flex flex-col flex-1 items-start">
+    <div class="flex flex-1 items-start gap-2.5 flex-wrap flex-row">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
       <div class="flex-1">
+        <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
         <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
         <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
+      <!--v-if-->
     </div>
   </div>
   <!--v-if-->
@@ -718,14 +794,15 @@ exports[`PageCard > renders with variant naked to correctly 1`] = `
 "<div data-orientation="vertical" class="relative flex rounded-lg transition has-focus-visible:ring-2 has-focus-visible:ring-primary">
   <!--v-if-->
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-0 sm:p-0">
-    <div class="flex flex-col flex-1 items-start">
+    <div class="flex flex-1 items-start gap-2.5 flex-wrap flex-row">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
       <div class="flex-1">
+        <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
         <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
         <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
+      <!--v-if-->
     </div>
   </div><a href="https://github.com/benjamincanac" target="_blank" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
 </div>"
@@ -735,14 +812,15 @@ exports[`PageCard > renders with variant outline correctly 1`] = `
 "<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default">
   <!--v-if-->
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+    <div class="flex flex-1 items-start gap-2.5 flex-wrap flex-row">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
       <div class="flex-1">
+        <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
         <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
         <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
+      <!--v-if-->
     </div>
   </div>
   <!--v-if-->
@@ -753,14 +831,15 @@ exports[`PageCard > renders with variant outline highlight correctly 1`] = `
 "<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring-2 ring-primary">
   <!--v-if-->
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+    <div class="flex flex-1 items-start gap-2.5 flex-wrap flex-row">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
       <div class="flex-1">
+        <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
         <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
         <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
+      <!--v-if-->
     </div>
   </div>
   <!--v-if-->
@@ -771,14 +850,15 @@ exports[`PageCard > renders with variant outline to correctly 1`] = `
 "<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default transition hover:bg-elevated/50 has-focus-visible:ring-2 has-focus-visible:ring-primary">
   <!--v-if-->
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+    <div class="flex flex-1 items-start gap-2.5 flex-wrap flex-row">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
       <div class="flex-1">
+        <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
         <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
         <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
+      <!--v-if-->
     </div>
   </div><a href="https://github.com/benjamincanac" target="_blank" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
 </div>"
@@ -788,14 +868,15 @@ exports[`PageCard > renders with variant soft correctly 1`] = `
 "<div data-orientation="vertical" class="relative flex rounded-lg bg-elevated/50">
   <!--v-if-->
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+    <div class="flex flex-1 items-start gap-2.5 flex-wrap flex-row">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
       <div class="flex-1">
+        <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
         <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
         <div class="text-[15px] text-pretty text-toned mt-1">Description</div>
       </div>
       <!--v-if-->
+      <!--v-if-->
     </div>
   </div>
   <!--v-if-->
@@ -806,14 +887,15 @@ exports[`PageCard > renders with variant soft highlight correctly 1`] = `
 "<div data-orientation="vertical" class="relative flex rounded-lg bg-elevated/50 ring-2 ring-primary">
   <!--v-if-->
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+    <div class="flex flex-1 items-start gap-2.5 flex-wrap flex-row">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
       <div class="flex-1">
+        <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
         <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
         <div class="text-[15px] text-pretty text-toned mt-1">Description</div>
       </div>
       <!--v-if-->
+      <!--v-if-->
     </div>
   </div>
   <!--v-if-->
@@ -824,14 +906,15 @@ exports[`PageCard > renders with variant soft to correctly 1`] = `
 "<div data-orientation="vertical" class="relative flex rounded-lg bg-elevated/50 transition hover:bg-elevated has-focus-visible:ring-2 has-focus-visible:ring-primary">
   <!--v-if-->
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+    <div class="flex flex-1 items-start gap-2.5 flex-wrap flex-row">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
       <div class="flex-1">
+        <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
         <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
         <div class="text-[15px] text-pretty text-toned mt-1">Description</div>
       </div>
       <!--v-if-->
+      <!--v-if-->
     </div>
   </div><a href="https://github.com/benjamincanac" target="_blank" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
 </div>"
@@ -841,14 +924,15 @@ exports[`PageCard > renders with variant solid correctly 1`] = `
 "<div data-orientation="vertical" class="relative flex rounded-lg bg-inverted text-inverted">
   <!--v-if-->
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+    <div class="flex flex-1 items-start gap-2.5 flex-wrap flex-row">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
       <div class="flex-1">
+        <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
         <div class="text-base text-pretty font-semibold text-inverted">Title</div>
         <div class="text-[15px] text-pretty text-dimmed mt-1">Description</div>
       </div>
       <!--v-if-->
+      <!--v-if-->
     </div>
   </div>
   <!--v-if-->
@@ -859,14 +943,15 @@ exports[`PageCard > renders with variant solid highlight correctly 1`] = `
 "<div data-orientation="vertical" class="relative flex rounded-lg bg-inverted text-inverted ring-2 ring-primary">
   <!--v-if-->
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+    <div class="flex flex-1 items-start gap-2.5 flex-wrap flex-row">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
       <div class="flex-1">
+        <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
         <div class="text-base text-pretty font-semibold text-inverted">Title</div>
         <div class="text-[15px] text-pretty text-dimmed mt-1">Description</div>
       </div>
       <!--v-if-->
+      <!--v-if-->
     </div>
   </div>
   <!--v-if-->
@@ -877,14 +962,15 @@ exports[`PageCard > renders with variant solid to correctly 1`] = `
 "<div data-orientation="vertical" class="relative flex rounded-lg bg-inverted text-inverted transition hover:bg-inverted/90 has-focus-visible:ring-2 has-focus-visible:ring-primary">
   <!--v-if-->
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+    <div class="flex flex-1 items-start gap-2.5 flex-wrap flex-row">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
       <div class="flex-1">
+        <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
         <div class="text-base text-pretty font-semibold text-inverted">Title</div>
         <div class="text-[15px] text-pretty text-dimmed mt-1">Description</div>
       </div>
       <!--v-if-->
+      <!--v-if-->
     </div>
   </div><a href="https://github.com/benjamincanac" target="_blank" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
 </div>"
@@ -894,14 +980,15 @@ exports[`PageCard > renders with variant subtle correctly 1`] = `
 "<div data-orientation="vertical" class="relative flex rounded-lg bg-elevated/50 ring ring-default">
   <!--v-if-->
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+    <div class="flex flex-1 items-start gap-2.5 flex-wrap flex-row">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
       <div class="flex-1">
+        <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
         <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
         <div class="text-[15px] text-pretty text-toned mt-1">Description</div>
       </div>
       <!--v-if-->
+      <!--v-if-->
     </div>
   </div>
   <!--v-if-->
@@ -912,14 +999,15 @@ exports[`PageCard > renders with variant subtle highlight correctly 1`] = `
 "<div data-orientation="vertical" class="relative flex rounded-lg bg-elevated/50 ring-2 ring-primary">
   <!--v-if-->
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+    <div class="flex flex-1 items-start gap-2.5 flex-wrap flex-row">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
       <div class="flex-1">
+        <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
         <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
         <div class="text-[15px] text-pretty text-toned mt-1">Description</div>
       </div>
       <!--v-if-->
+      <!--v-if-->
     </div>
   </div>
   <!--v-if-->
@@ -930,14 +1018,15 @@ exports[`PageCard > renders with variant subtle to correctly 1`] = `
 "<div data-orientation="vertical" class="relative flex rounded-lg bg-elevated/50 ring ring-default transition hover:bg-elevated hover:ring-accented has-focus-visible:ring-2 has-focus-visible:ring-primary">
   <!--v-if-->
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+    <div class="flex flex-1 items-start gap-2.5 flex-wrap flex-row">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
       <div class="flex-1">
+        <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
         <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
         <div class="text-[15px] text-pretty text-toned mt-1">Description</div>
       </div>
       <!--v-if-->
+      <!--v-if-->
     </div>
   </div><a href="https://github.com/benjamincanac" target="_blank" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
 </div>"
diff --git a/test/components/__snapshots__/PageCard.spec.ts.snap b/test/components/__snapshots__/PageCard.spec.ts.snap
index 294af1ae60..082f53b657 100644
--- a/test/components/__snapshots__/PageCard.spec.ts.snap
+++ b/test/components/__snapshots__/PageCard.spec.ts.snap
@@ -14,10 +14,12 @@ exports[`PageCard > renders with body slot correctly 1`] = `
 "<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default">
   <!--v-if-->
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+    <div class="flex flex-1 items-start gap-2.5 flex-wrap flex-row">
+      <!--v-if-->
+      <div class="flex-1">
+        <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>Body slot
+      </div>
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
-      <div class="flex-1">Body slot</div>
       <!--v-if-->
     </div>
   </div>
@@ -29,14 +31,15 @@ exports[`PageCard > renders with class correctly 1`] = `
 "<div data-orientation="vertical" class="relative flex bg-default ring ring-default rounded-xl">
   <!--v-if-->
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+    <div class="flex flex-1 items-start gap-2.5 flex-wrap flex-row">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
       <div class="flex-1">
+        <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
         <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
         <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
+      <!--v-if-->
     </div>
   </div>
   <!--v-if-->
@@ -47,14 +50,15 @@ exports[`PageCard > renders with default slot correctly 1`] = `
 "<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default">
   <!--v-if-->
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+    <div class="flex flex-1 items-start gap-2.5 flex-wrap flex-row">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
       <div class="flex-1">
+        <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
         <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
         <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
+      <!--v-if-->
     </div>Default slot
   </div>
   <!--v-if-->
@@ -65,14 +69,15 @@ exports[`PageCard > renders with description correctly 1`] = `
 "<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default">
   <!--v-if-->
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
-      <!--v-if-->
+    <div class="flex flex-1 items-start gap-2.5 flex-wrap flex-row">
       <!--v-if-->
       <div class="flex-1">
+        <!--v-if-->
         <!--v-if-->
         <div class="text-[15px] text-pretty text-muted">Description</div>
       </div>
       <!--v-if-->
+      <!--v-if-->
     </div>
   </div>
   <!--v-if-->
@@ -83,14 +88,15 @@ exports[`PageCard > renders with description slot correctly 1`] = `
 "<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default">
   <!--v-if-->
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+    <div class="flex flex-1 items-start gap-2.5 flex-wrap flex-row">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
       <div class="flex-1">
+        <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
         <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
         <div class="text-[15px] text-pretty text-muted mt-1">Description slot</div>
       </div>
       <!--v-if-->
+      <!--v-if-->
     </div>
   </div>
   <!--v-if-->
@@ -101,13 +107,14 @@ exports[`PageCard > renders with footer slot correctly 1`] = `
 "<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default">
   <!--v-if-->
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+    <div class="flex flex-1 items-start gap-2.5 flex-wrap flex-row">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
       <div class="flex-1">
+        <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
         <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
         <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
+      <!--v-if-->
       <div class="pt-4 mt-auto">Footer slot</div>
     </div>
   </div>
@@ -119,14 +126,15 @@ exports[`PageCard > renders with header slot correctly 1`] = `
 "<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default">
   <!--v-if-->
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+    <div class="flex flex-1 items-start gap-2.5 flex-wrap flex-row">
       <div class="mb-4">Header slot</div>
-      <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
       <div class="flex-1">
+        <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
         <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
         <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
+      <!--v-if-->
     </div>
   </div>
   <!--v-if-->
@@ -137,14 +145,15 @@ exports[`PageCard > renders with highlight color error correctly 1`] = `
 "<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring-2 ring-error">
   <!--v-if-->
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+    <div class="flex flex-1 items-start gap-2.5 flex-wrap flex-row">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
       <div class="flex-1">
+        <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
         <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
         <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
+      <!--v-if-->
     </div>
   </div>
   <!--v-if-->
@@ -155,14 +164,15 @@ exports[`PageCard > renders with highlight color info correctly 1`] = `
 "<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring-2 ring-info">
   <!--v-if-->
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+    <div class="flex flex-1 items-start gap-2.5 flex-wrap flex-row">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
       <div class="flex-1">
+        <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
         <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
         <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
+      <!--v-if-->
     </div>
   </div>
   <!--v-if-->
@@ -173,14 +183,15 @@ exports[`PageCard > renders with highlight color neutral correctly 1`] = `
 "<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring-2 ring-inverted">
   <!--v-if-->
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+    <div class="flex flex-1 items-start gap-2.5 flex-wrap flex-row">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
       <div class="flex-1">
+        <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
         <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
         <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
+      <!--v-if-->
     </div>
   </div>
   <!--v-if-->
@@ -191,14 +202,15 @@ exports[`PageCard > renders with highlight color neutral correctly 2`] = `
 "<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring-2 ring-inverted">
   <!--v-if-->
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+    <div class="flex flex-1 items-start gap-2.5 flex-wrap flex-row">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
       <div class="flex-1">
+        <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
         <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
         <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
+      <!--v-if-->
     </div>
   </div>
   <!--v-if-->
@@ -209,14 +221,15 @@ exports[`PageCard > renders with highlight color primary correctly 1`] = `
 "<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring-2 ring-primary">
   <!--v-if-->
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+    <div class="flex flex-1 items-start gap-2.5 flex-wrap flex-row">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
       <div class="flex-1">
+        <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
         <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
         <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
+      <!--v-if-->
     </div>
   </div>
   <!--v-if-->
@@ -227,14 +240,15 @@ exports[`PageCard > renders with highlight color secondary correctly 1`] = `
 "<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring-2 ring-secondary">
   <!--v-if-->
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+    <div class="flex flex-1 items-start gap-2.5 flex-wrap flex-row">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
       <div class="flex-1">
+        <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
         <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
         <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
+      <!--v-if-->
     </div>
   </div>
   <!--v-if-->
@@ -245,14 +259,15 @@ exports[`PageCard > renders with highlight color success correctly 1`] = `
 "<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring-2 ring-success">
   <!--v-if-->
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+    <div class="flex flex-1 items-start gap-2.5 flex-wrap flex-row">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
       <div class="flex-1">
+        <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
         <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
         <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
+      <!--v-if-->
     </div>
   </div>
   <!--v-if-->
@@ -263,14 +278,15 @@ exports[`PageCard > renders with highlight color warning correctly 1`] = `
 "<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring-2 ring-warning">
   <!--v-if-->
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+    <div class="flex flex-1 items-start gap-2.5 flex-wrap flex-row">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
       <div class="flex-1">
+        <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
         <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
         <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
+      <!--v-if-->
     </div>
   </div>
   <!--v-if-->
@@ -281,14 +297,15 @@ exports[`PageCard > renders with highlight correctly 1`] = `
 "<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring-2 ring-primary">
   <!--v-if-->
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+    <div class="flex flex-1 items-start gap-2.5 flex-wrap flex-row">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
       <div class="flex-1">
+        <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
         <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
         <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
+      <!--v-if-->
     </div>
   </div>
   <!--v-if-->
@@ -299,9 +316,9 @@ exports[`PageCard > renders with icon correctly 1`] = `
 "<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default">
   <!--v-if-->
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+    <div class="flex flex-1 items-start gap-2.5 flex-wrap flex-row">
+      <!--v-if-->
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
       <!--v-if-->
       <!--v-if-->
     </div>
@@ -314,14 +331,52 @@ exports[`PageCard > renders with leading slot correctly 1`] = `
 "<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default">
   <!--v-if-->
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+    <div class="flex flex-1 items-start gap-2.5 flex-wrap flex-row">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5">Leading slot</div>
       <div class="flex-1">
+        <div class="inline-flex items-center mb-2.5">Leading slot</div>
         <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
         <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
+      <!--v-if-->
+    </div>
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`PageCard > renders with links correctly 1`] = `
+"<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default">
+  <!--v-if-->
+  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
+    <div class="flex flex-1 items-start gap-2.5 flex-wrap flex-row">
+      <!--v-if-->
+      <!--v-if-->
+      <div class="inline-flex flex-wrap gap-2.5 self-center"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+          <!--v-if--><span class="truncate">Get started</span>
+          <!--v-if-->
+        </button></div>
+      <!--v-if-->
+    </div>
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`PageCard > renders with links slot correctly 1`] = `
+"<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default">
+  <!--v-if-->
+  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
+    <div class="flex flex-1 items-start gap-2.5 flex-wrap flex-row">
+      <!--v-if-->
+      <div class="flex-1">
+        <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
+        <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
+      </div>
+      <div class="inline-flex flex-wrap gap-2.5 self-center">Links slot</div>
+      <!--v-if-->
     </div>
   </div>
   <!--v-if-->
@@ -332,14 +387,15 @@ exports[`PageCard > renders with orientation horizontal correctly 1`] = `
 "<div data-orientation="horizontal" class="relative flex rounded-lg bg-default ring ring-default">
   <!--v-if-->
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6 lg:grid-cols-2 lg:items-center">
-    <div class="flex flex-col flex-1 items-start">
+    <div class="flex flex-col flex-1 items-start gap-2.5 flex-wrap">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
       <div class="flex-1">
+        <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
         <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
         <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
+      <!--v-if-->
     </div>
   </div>
   <!--v-if-->
@@ -350,14 +406,15 @@ exports[`PageCard > renders with orientation horizontal reverse correctly 1`] =
 "<div data-orientation="horizontal" class="relative flex rounded-lg bg-default ring ring-default">
   <!--v-if-->
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6 lg:grid-cols-2 lg:items-center">
-    <div class="flex flex-col flex-1 items-start lg:order-last">
+    <div class="flex flex-col flex-1 items-start gap-2.5 flex-wrap lg:order-last">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
       <div class="flex-1">
+        <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
         <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
         <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
+      <!--v-if-->
     </div>
   </div>
   <!--v-if-->
@@ -368,14 +425,15 @@ exports[`PageCard > renders with orientation vertical correctly 1`] = `
 "<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default">
   <!--v-if-->
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+    <div class="flex flex-1 items-start gap-2.5 flex-wrap flex-row">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
       <div class="flex-1">
+        <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
         <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
         <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
+      <!--v-if-->
     </div>
   </div>
   <!--v-if-->
@@ -386,14 +444,15 @@ exports[`PageCard > renders with orientation vertical reverse correctly 1`] = `
 "<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default">
   <!--v-if-->
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start lg:order-last">
+    <div class="flex flex-1 items-start gap-2.5 flex-wrap flex-row lg:order-last">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
       <div class="flex-1">
+        <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
         <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
         <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
+      <!--v-if-->
     </div>
   </div>
   <!--v-if-->
@@ -404,14 +463,15 @@ exports[`PageCard > renders with spotlight color error correctly 1`] = `
 "<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default">
   <div class="absolute inset-0 rounded-[inherit] pointer-events-none bg-default/90"></div>
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+    <div class="flex flex-1 items-start gap-2.5 flex-wrap flex-row">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
       <div class="flex-1">
+        <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
         <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
         <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
+      <!--v-if-->
     </div>
   </div>
   <!--v-if-->
@@ -422,14 +482,15 @@ exports[`PageCard > renders with spotlight color info correctly 1`] = `
 "<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default">
   <div class="absolute inset-0 rounded-[inherit] pointer-events-none bg-default/90"></div>
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+    <div class="flex flex-1 items-start gap-2.5 flex-wrap flex-row">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
       <div class="flex-1">
+        <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
         <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
         <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
+      <!--v-if-->
     </div>
   </div>
   <!--v-if-->
@@ -440,14 +501,15 @@ exports[`PageCard > renders with spotlight color neutral correctly 1`] = `
 "<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default">
   <div class="absolute inset-0 rounded-[inherit] pointer-events-none bg-default/90"></div>
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+    <div class="flex flex-1 items-start gap-2.5 flex-wrap flex-row">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
       <div class="flex-1">
+        <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
         <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
         <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
+      <!--v-if-->
     </div>
   </div>
   <!--v-if-->
@@ -458,14 +520,15 @@ exports[`PageCard > renders with spotlight color neutral correctly 2`] = `
 "<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default">
   <div class="absolute inset-0 rounded-[inherit] pointer-events-none bg-default/90"></div>
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+    <div class="flex flex-1 items-start gap-2.5 flex-wrap flex-row">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
       <div class="flex-1">
+        <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
         <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
         <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
+      <!--v-if-->
     </div>
   </div>
   <!--v-if-->
@@ -476,14 +539,15 @@ exports[`PageCard > renders with spotlight color primary correctly 1`] = `
 "<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default">
   <div class="absolute inset-0 rounded-[inherit] pointer-events-none bg-default/90"></div>
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+    <div class="flex flex-1 items-start gap-2.5 flex-wrap flex-row">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
       <div class="flex-1">
+        <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
         <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
         <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
+      <!--v-if-->
     </div>
   </div>
   <!--v-if-->
@@ -494,14 +558,15 @@ exports[`PageCard > renders with spotlight color secondary correctly 1`] = `
 "<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default">
   <div class="absolute inset-0 rounded-[inherit] pointer-events-none bg-default/90"></div>
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+    <div class="flex flex-1 items-start gap-2.5 flex-wrap flex-row">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
       <div class="flex-1">
+        <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
         <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
         <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
+      <!--v-if-->
     </div>
   </div>
   <!--v-if-->
@@ -512,14 +577,15 @@ exports[`PageCard > renders with spotlight color success correctly 1`] = `
 "<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default">
   <div class="absolute inset-0 rounded-[inherit] pointer-events-none bg-default/90"></div>
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+    <div class="flex flex-1 items-start gap-2.5 flex-wrap flex-row">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
       <div class="flex-1">
+        <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
         <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
         <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
+      <!--v-if-->
     </div>
   </div>
   <!--v-if-->
@@ -530,14 +596,15 @@ exports[`PageCard > renders with spotlight color warning correctly 1`] = `
 "<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default">
   <div class="absolute inset-0 rounded-[inherit] pointer-events-none bg-default/90"></div>
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+    <div class="flex flex-1 items-start gap-2.5 flex-wrap flex-row">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
       <div class="flex-1">
+        <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
         <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
         <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
+      <!--v-if-->
     </div>
   </div>
   <!--v-if-->
@@ -548,14 +615,15 @@ exports[`PageCard > renders with spotlight correctly 1`] = `
 "<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default">
   <div class="absolute inset-0 rounded-[inherit] pointer-events-none bg-default/90"></div>
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+    <div class="flex flex-1 items-start gap-2.5 flex-wrap flex-row">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
       <div class="flex-1">
+        <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
         <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
         <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
+      <!--v-if-->
     </div>
   </div>
   <!--v-if-->
@@ -566,14 +634,15 @@ exports[`PageCard > renders with title correctly 1`] = `
 "<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default">
   <!--v-if-->
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
-      <!--v-if-->
+    <div class="flex flex-1 items-start gap-2.5 flex-wrap flex-row">
       <!--v-if-->
       <div class="flex-1">
+        <!--v-if-->
         <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
         <!--v-if-->
       </div>
       <!--v-if-->
+      <!--v-if-->
     </div>
   </div>
   <!--v-if-->
@@ -584,14 +653,15 @@ exports[`PageCard > renders with title slot correctly 1`] = `
 "<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default">
   <!--v-if-->
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+    <div class="flex flex-1 items-start gap-2.5 flex-wrap flex-row">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
       <div class="flex-1">
+        <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
         <div class="text-base text-pretty font-semibold text-highlighted">Title slot</div>
         <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
+      <!--v-if-->
     </div>
   </div>
   <!--v-if-->
@@ -611,14 +681,15 @@ exports[`PageCard > renders with ui correctly 1`] = `
 "<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default">
   <!--v-if-->
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+    <div class="flex flex-1 items-start gap-2.5 flex-wrap flex-row">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
       <div class="flex-1">
+        <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
         <div class="text-base text-pretty text-highlighted font-bold">Title</div>
         <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
+      <!--v-if-->
     </div>
   </div>
   <!--v-if-->
@@ -629,14 +700,15 @@ exports[`PageCard > renders with variant ghost correctly 1`] = `
 "<div data-orientation="vertical" class="relative flex rounded-lg">
   <!--v-if-->
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+    <div class="flex flex-1 items-start gap-2.5 flex-wrap flex-row">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
       <div class="flex-1">
+        <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
         <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
         <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
+      <!--v-if-->
     </div>
   </div>
   <!--v-if-->
@@ -647,14 +719,15 @@ exports[`PageCard > renders with variant ghost highlight correctly 1`] = `
 "<div data-orientation="vertical" class="relative flex rounded-lg ring-2 ring-primary">
   <!--v-if-->
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+    <div class="flex flex-1 items-start gap-2.5 flex-wrap flex-row">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
       <div class="flex-1">
+        <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
         <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
         <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
+      <!--v-if-->
     </div>
   </div>
   <!--v-if-->
@@ -665,14 +738,15 @@ exports[`PageCard > renders with variant ghost to correctly 1`] = `
 "<div data-orientation="vertical" class="relative flex rounded-lg transition hover:bg-elevated/50 has-focus-visible:ring-2 has-focus-visible:ring-primary">
   <!--v-if-->
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+    <div class="flex flex-1 items-start gap-2.5 flex-wrap flex-row">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
       <div class="flex-1">
+        <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
         <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
         <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
+      <!--v-if-->
     </div>
   </div><a href="https://github.com/benjamincanac" rel="noopener noreferrer" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
 </div>"
@@ -682,14 +756,15 @@ exports[`PageCard > renders with variant naked correctly 1`] = `
 "<div data-orientation="vertical" class="relative flex rounded-lg">
   <!--v-if-->
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-0 sm:p-0">
-    <div class="flex flex-col flex-1 items-start">
+    <div class="flex flex-1 items-start gap-2.5 flex-wrap flex-row">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
       <div class="flex-1">
+        <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
         <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
         <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
+      <!--v-if-->
     </div>
   </div>
   <!--v-if-->
@@ -700,14 +775,15 @@ exports[`PageCard > renders with variant naked highlight correctly 1`] = `
 "<div data-orientation="vertical" class="relative flex rounded-lg ring-2 ring-primary">
   <!--v-if-->
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-0 sm:p-0">
-    <div class="flex flex-col flex-1 items-start">
+    <div class="flex flex-1 items-start gap-2.5 flex-wrap flex-row">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
       <div class="flex-1">
+        <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
         <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
         <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
+      <!--v-if-->
     </div>
   </div>
   <!--v-if-->
@@ -718,14 +794,15 @@ exports[`PageCard > renders with variant naked to correctly 1`] = `
 "<div data-orientation="vertical" class="relative flex rounded-lg transition has-focus-visible:ring-2 has-focus-visible:ring-primary">
   <!--v-if-->
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-0 sm:p-0">
-    <div class="flex flex-col flex-1 items-start">
+    <div class="flex flex-1 items-start gap-2.5 flex-wrap flex-row">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
       <div class="flex-1">
+        <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
         <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
         <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
+      <!--v-if-->
     </div>
   </div><a href="https://github.com/benjamincanac" rel="noopener noreferrer" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
 </div>"
@@ -735,14 +812,15 @@ exports[`PageCard > renders with variant outline correctly 1`] = `
 "<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default">
   <!--v-if-->
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+    <div class="flex flex-1 items-start gap-2.5 flex-wrap flex-row">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
       <div class="flex-1">
+        <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
         <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
         <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
+      <!--v-if-->
     </div>
   </div>
   <!--v-if-->
@@ -753,14 +831,15 @@ exports[`PageCard > renders with variant outline highlight correctly 1`] = `
 "<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring-2 ring-primary">
   <!--v-if-->
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+    <div class="flex flex-1 items-start gap-2.5 flex-wrap flex-row">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
       <div class="flex-1">
+        <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
         <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
         <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
+      <!--v-if-->
     </div>
   </div>
   <!--v-if-->
@@ -771,14 +850,15 @@ exports[`PageCard > renders with variant outline to correctly 1`] = `
 "<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default transition hover:bg-elevated/50 has-focus-visible:ring-2 has-focus-visible:ring-primary">
   <!--v-if-->
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+    <div class="flex flex-1 items-start gap-2.5 flex-wrap flex-row">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
       <div class="flex-1">
+        <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
         <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
         <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
+      <!--v-if-->
     </div>
   </div><a href="https://github.com/benjamincanac" rel="noopener noreferrer" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
 </div>"
@@ -788,14 +868,15 @@ exports[`PageCard > renders with variant soft correctly 1`] = `
 "<div data-orientation="vertical" class="relative flex rounded-lg bg-elevated/50">
   <!--v-if-->
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+    <div class="flex flex-1 items-start gap-2.5 flex-wrap flex-row">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
       <div class="flex-1">
+        <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
         <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
         <div class="text-[15px] text-pretty text-toned mt-1">Description</div>
       </div>
       <!--v-if-->
+      <!--v-if-->
     </div>
   </div>
   <!--v-if-->
@@ -806,14 +887,15 @@ exports[`PageCard > renders with variant soft highlight correctly 1`] = `
 "<div data-orientation="vertical" class="relative flex rounded-lg bg-elevated/50 ring-2 ring-primary">
   <!--v-if-->
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+    <div class="flex flex-1 items-start gap-2.5 flex-wrap flex-row">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
       <div class="flex-1">
+        <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
         <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
         <div class="text-[15px] text-pretty text-toned mt-1">Description</div>
       </div>
       <!--v-if-->
+      <!--v-if-->
     </div>
   </div>
   <!--v-if-->
@@ -824,14 +906,15 @@ exports[`PageCard > renders with variant soft to correctly 1`] = `
 "<div data-orientation="vertical" class="relative flex rounded-lg bg-elevated/50 transition hover:bg-elevated has-focus-visible:ring-2 has-focus-visible:ring-primary">
   <!--v-if-->
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+    <div class="flex flex-1 items-start gap-2.5 flex-wrap flex-row">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
       <div class="flex-1">
+        <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
         <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
         <div class="text-[15px] text-pretty text-toned mt-1">Description</div>
       </div>
       <!--v-if-->
+      <!--v-if-->
     </div>
   </div><a href="https://github.com/benjamincanac" rel="noopener noreferrer" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
 </div>"
@@ -841,14 +924,15 @@ exports[`PageCard > renders with variant solid correctly 1`] = `
 "<div data-orientation="vertical" class="relative flex rounded-lg bg-inverted text-inverted">
   <!--v-if-->
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+    <div class="flex flex-1 items-start gap-2.5 flex-wrap flex-row">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
       <div class="flex-1">
+        <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
         <div class="text-base text-pretty font-semibold text-inverted">Title</div>
         <div class="text-[15px] text-pretty text-dimmed mt-1">Description</div>
       </div>
       <!--v-if-->
+      <!--v-if-->
     </div>
   </div>
   <!--v-if-->
@@ -859,14 +943,15 @@ exports[`PageCard > renders with variant solid highlight correctly 1`] = `
 "<div data-orientation="vertical" class="relative flex rounded-lg bg-inverted text-inverted ring-2 ring-primary">
   <!--v-if-->
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+    <div class="flex flex-1 items-start gap-2.5 flex-wrap flex-row">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
       <div class="flex-1">
+        <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
         <div class="text-base text-pretty font-semibold text-inverted">Title</div>
         <div class="text-[15px] text-pretty text-dimmed mt-1">Description</div>
       </div>
       <!--v-if-->
+      <!--v-if-->
     </div>
   </div>
   <!--v-if-->
@@ -877,14 +962,15 @@ exports[`PageCard > renders with variant solid to correctly 1`] = `
 "<div data-orientation="vertical" class="relative flex rounded-lg bg-inverted text-inverted transition hover:bg-inverted/90 has-focus-visible:ring-2 has-focus-visible:ring-primary">
   <!--v-if-->
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+    <div class="flex flex-1 items-start gap-2.5 flex-wrap flex-row">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
       <div class="flex-1">
+        <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
         <div class="text-base text-pretty font-semibold text-inverted">Title</div>
         <div class="text-[15px] text-pretty text-dimmed mt-1">Description</div>
       </div>
       <!--v-if-->
+      <!--v-if-->
     </div>
   </div><a href="https://github.com/benjamincanac" rel="noopener noreferrer" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
 </div>"
@@ -894,14 +980,15 @@ exports[`PageCard > renders with variant subtle correctly 1`] = `
 "<div data-orientation="vertical" class="relative flex rounded-lg bg-elevated/50 ring ring-default">
   <!--v-if-->
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+    <div class="flex flex-1 items-start gap-2.5 flex-wrap flex-row">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
       <div class="flex-1">
+        <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
         <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
         <div class="text-[15px] text-pretty text-toned mt-1">Description</div>
       </div>
       <!--v-if-->
+      <!--v-if-->
     </div>
   </div>
   <!--v-if-->
@@ -912,14 +999,15 @@ exports[`PageCard > renders with variant subtle highlight correctly 1`] = `
 "<div data-orientation="vertical" class="relative flex rounded-lg bg-elevated/50 ring-2 ring-primary">
   <!--v-if-->
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+    <div class="flex flex-1 items-start gap-2.5 flex-wrap flex-row">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
       <div class="flex-1">
+        <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
         <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
         <div class="text-[15px] text-pretty text-toned mt-1">Description</div>
       </div>
       <!--v-if-->
+      <!--v-if-->
     </div>
   </div>
   <!--v-if-->
@@ -930,14 +1018,15 @@ exports[`PageCard > renders with variant subtle to correctly 1`] = `
 "<div data-orientation="vertical" class="relative flex rounded-lg bg-elevated/50 ring ring-default transition hover:bg-elevated hover:ring-accented has-focus-visible:ring-2 has-focus-visible:ring-primary">
   <!--v-if-->
   <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+    <div class="flex flex-1 items-start gap-2.5 flex-wrap flex-row">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
       <div class="flex-1">
+        <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
         <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
         <div class="text-[15px] text-pretty text-toned mt-1">Description</div>
       </div>
       <!--v-if-->
+      <!--v-if-->
     </div>
   </div><a href="https://github.com/benjamincanac" rel="noopener noreferrer" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
 </div>"