nuxt-x-marketing
SectionNewsletter
Full-width newsletter section with inline form, dark/light variants, optional background pattern, and success state transition.
SectionNewsletter
A page-section-level newsletter component. The left side shows the title and description; the right side shows the email form with success state. Supports dark and light variants, optional decorative background patterns, and auto-resets after submission.
Components
<XMarkSectionNewsletter />
<XMarkSectionNewsletter
title="Never miss an update"
description="Join 5,000+ developers getting weekly insights."
placeholder="you@example.com"
:button="{ label: 'Subscribe Now', color: 'primary' }"
variant="dark"
pattern="dots"
:pattern-opacity="0.04"
:has-privacy="true"
privacy-text="We respect your privacy. Unsubscribe at any time."
success-message="You're subscribed!"
:reset-delay="5000"
@submit="handleSubmit"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | 'Subscribe to our newsletter' | Section heading. |
description | string | 'Get the latest news and updates.' | Supporting text. |
placeholder | string | 'Enter your email' | Input placeholder. |
button | object | { label: 'Subscribe' } | Button config { label, color? }. |
hasPrivacy | boolean | true | Show privacy note. |
privacyText | string | 'No spam. Unsubscribe anytime.' | Privacy note text. |
successMessage | string | 'Thanks for subscribing!' | Message shown after submission. |
variant | string | 'dark' | Color scheme: 'dark', 'light'. |
pattern | string | null | Background pattern: 'dots', 'grid', 'diagonal', 'topography', 'circuit', 'waves'. Pass null (or leave empty) to disable. |
patternOpacity | number | 0.05 | Pattern opacity (0–1). |
resetDelay | number | 5000 | Milliseconds before resetting to the form after success (0 to disable reset). |
Emits
| Event | Payload | Description |
|---|---|---|
submit | email: string | Fired on form submission. The component simulates a brief loading delay and then shows the success state. |
AI Context
category: Newsletter
package: "@xenterprises/nuxt-x-marketing"
components:
- XMarkSectionNewsletter
use-when: >
Adding a prominent full-width newsletter signup section between page
sections or just above the footer. Use XMarkNewsletterForm for embedded
widget placements instead.
typical-page-section: Between content sections or just above the footer.