nuxt-x-marketing

Cards

Specialized card components — a full-bleed promo card with image background and overlay, and a glassmorphism content card.

Cards

Two purpose-built card components extend the standard card pattern. XMarkCardPromo is built for visual-first content like campaign tiles, category cards, or editorial features. XMarkCardGlass applies the frosted-glass treatment from the design system to any content wrapped inside it.

Components

`<XMarkCardPromo />`

A portrait-oriented (9:16) card with a full-bleed background image. A gradient overlay ensures text legibility. Content — badge, title, body slot, and button — is positioned via the align prop. When to is supplied the entire card becomes a NuxtLink; otherwise it emits a click event.

<XMarkCardPromo
  :img="{ src: '/images/campaign-summer.jpg', alt: 'Summer sale' }"
  badge="Limited time"
  title="Summer Sale"
  align="bottomLeft"
  overlay="gradient"
  :hoverable="true"
  title-size="2xl"
  to="/sale/summer"
  :button="{ label: 'Shop Now' }"
>
  Up to 50% off select items
</XMarkCardPromo>

Grid of promo cards:

<div class="grid grid-cols-2 lg:grid-cols-4 gap-4">
  <XMarkCardPromo
    v-for="category in categories"
    :key="category.slug"
    :img="category.img"
    :title="category.name"
    :to="`/category/${category.slug}`"
    align="bottomLeft"
  />
</div>

Props

Prop	Type	Default	Description
`to`	`String`	`''`	Navigation URL — renders as `NuxtLink` when set
`img`	`Object`	`{ src: '', alt: 'Promo image' }`	Background image `{ src, alt? }`
`title`	`String`	`'Promo Card Title'`	Card headline
`badge`	`String`	`''`	Optional pill badge over the image
`button`	`Object`	`null`	CTA button `{ label, color?, variant? }`
`align`	`String`	`'bottomLeft'`	Content alignment: `'bottomLeft'`, `'bottomRight'`, `'bottomCenter'`, `'topLeft'`
`overlay`	`String`	`'gradient'`	Overlay style: `'light'`, `'heavy'`, `'gradient'`
`hoverable`	`Boolean`	`true`	Enable lift animation on hover
`titleSize`	`String`	`'xl'`	Title font size (Tailwind size token): `'xs'` through `'8xl'`

Events

Event	Description
`click`	Emitted on click when `to` is not set

`<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:
  - XMarkCardPromo
  - XMarkCardGlass
use-when: >
  XMarkCardPromo: building image-driven grids for categories, campaigns,
  featured content, or editorial tiles. XMarkCardGlass: wrapping statistics,
  feature highlights, or widgets in the glass design language used by the
  pricing and feature sections.
typical-page-section: >
  XMarkCardPromo: category grids, featured sections, homepage editorial.
  XMarkCardGlass: feature detail sections, pricing addons, dashboard previews.

Edit this pageorReport an issue

Privacy

Cookie consent and GDPR compliance components — a persistent bottom banner, a toast-based lightweight consent notice, and a modal for granular cookie preferences.