nuxt-x-marketing
ModalFeature
Full-screen feature showcase modal with hero image, scrollable content blocks (image, text, split), and a closing CTA.
ModalFeature
A full-screen immersive modal for long-form feature storytelling. Accepts a hero section, an array of scrollable blocks (type image, text, or split), and a closing cta section. Triggered by a slot element or a default button.
Components
<XMarkModalFeature />
A full-screen immersive modal for long-form feature storytelling. Accepts a hero section, an array of scrollable blocks (type image, text, or split), and a closing cta section. Triggered by a slot element or a default button.
<XMarkModalFeature
:hero="{
image: '/features/hero.jpg',
title: 'Introducing Spaces',
subtitle: 'A new way to organize your work',
}"
:blocks="[
{ type: 'text', title: 'Focus on what matters', body: 'Spaces help teams...' },
{ type: 'split', image: '/features/split.jpg', title: 'Side by side', body: 'Work together...', features: ['Real-time sync', 'Version history'] },
{ type: 'image', image: '/features/full.jpg', alt: 'Full product view' },
]"
:cta="{
title: 'Ready to try Spaces?',
subtitle: 'Available on all plans.',
button: { label: 'Get Started', color: 'primary' },
}"
:button="{ label: 'Learn More', icon: 'i-lucide-arrow-right' }"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
hero | Object | null | Hero config { image, title, subtitle? } |
blocks | Array | [] | Content blocks [{ type: 'image'|'text'|'split', ... }] |
cta | Object | null | Closing CTA { title, subtitle?, button?: { label, color? } } |
button | Object | {} | Default trigger button config |
AI Context
category: Modal
package: "@xenterprises/nuxt-x-marketing"
components:
- XMarkModalFeature
use-when: >
Presenting an immersive full-screen feature story without navigating away
from the page. Use for detailed product feature deep-dives triggered from
a features section or hero.
typical-page-section: Triggered from features section or hero CTAs.