nuxt-x-marketing
CardGlass
Glassmorphism card with optional glow border, title, subtitle, and header/footer slots.
CardGlass
A container card that applies the xGlass design token — frosted glass background, subtle border, and backdrop blur. Use the glow prop to add a glowing border effect. Supply content via the default slot; use header and footer slots to add structured top/bottom areas.
Components
<XMarkCardGlass />
A container card that applies the xGlass design token — frosted glass background, subtle border, and backdrop blur. Use the glow prop to add a glowing border effect. Supply content via the default slot; use header and footer slots to add structured top/bottom areas.
<XMarkCardGlass
title="API Usage"
subtitle="Last 30 days"
size="lg"
:glow="true"
>
<UProgress :value="72" />
<p class="mt-2 text-sm text-neutral-500">72,000 / 100,000 requests</p>
<template #footer>
<UButton size="sm" variant="ghost">Upgrade plan</UButton>
</template>
</XMarkCardGlass>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | String | '' | Card heading (shown in default header slot) |
subtitle | String | '' | Card subheading below the title |
size | String | 'md' | Padding size: 'xs', 'sm', 'md', 'lg', 'xl' |
glow | Boolean | false | Add animated glow border effect |
Slots
| Slot | Description |
|---|---|
header | Override the title/subtitle header area |
default | Main card content |
footer | Card footer — rendered with a top border |
AI Context
category: Cards
package: "@xenterprises/nuxt-x-marketing"
components:
- XMarkCardGlass
use-when: >
Wrapping statistics, feature highlights, or widgets in the frosted-glass
design language. Ideal for dashboard previews, pricing addons, or feature
detail sections over gradient or dark backgrounds.
typical-page-section: Feature detail sections, pricing addons, dashboard preview areas.