Card
Card
Base card container with header, footer, collapsible body, and status variants.
Card
The base card container for building analytics dashboards. Provides an optional header (title, description, icon), collapsible body, footer slot, and border variants for status states.
Components
<XACard />
Base card container with an optional header (title, description, icon), collapsible body, footer slot, and border variants for status states.
<XACard
title="Recent Activity"
description="Last 30 days"
icon="i-lucide-activity"
collapsible
variant="default"
>
<p>Card body content</p>
<template #header-actions>
<UButton size="xs" label="View all" />
</template>
<template #footer>
<span class="text-sm text-neutral-500">Updated just now</span>
</template>
</XACard>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | '' | Card header title. |
description | string | '' | Subtitle below the title. |
icon | string | '' | Lucide icon name shown in the header. |
collapsible | boolean | false | Show a collapse toggle button. |
collapsed | boolean | false | Initial collapsed state. |
padding | boolean | true | Apply default body padding. |
divider | boolean | true | Show divider line under the header. |
variant | 'default' | 'error' | 'warning' | 'success' | 'default' | Border color variant. |
Slots
default, header-actions, footer
AI Context
component: XACard
package: "@xenterprises/nuxt-x-app"
auto-import: true
prefix: XA
use-when: General-purpose card container for dashboard panels, settings sections, or any content that needs a framed surface with an optional header and footer