nuxt-x-marketing
CardPromo
9/16 aspect-ratio card with full-bleed background image, gradient overlay, title, optional badge, and CTA button — great for campaign or category tiles.
CardPromo
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.
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' |
Emits
| Event | Description |
|---|---|
click | Emitted on click when to is not set |
AI Context
category: Cards
package: "@xenterprises/nuxt-x-marketing"
components:
- XMarkCardPromo
use-when: >
Building image-driven grids for categories, campaigns, featured content,
or editorial tiles. The full-bleed portrait format works well in 2–4
column grids on landing and category pages.
typical-page-section: Category grids, featured sections, homepage editorial areas.