Newsletter
Newsletter
Two newsletter components serve different placement contexts. XMarkNewsletterForm is an embeddable widget that fits inside a blog sidebar, a modal, or a card. XMarkSectionNewsletter is a full-width page section with a two-column layout that anchors the form visually within a page.
Components
<XMarkNewsletterForm />
An email capture form with four layout variants and built-in loading, success, and error state management. The submit event fires with the email value — wire it to your email service provider.
<XMarkNewsletterForm
title="Stay in the loop"
description="Get product updates and curated reads every week."
:button="{ label: 'Subscribe', color: 'primary' }"
placeholder="you@example.com"
variant="card"
:has-privacy="true"
privacy-text="No spam. Unsubscribe anytime."
@submit="handleNewsletterSubmit"
/>
Compact variant for sidebar use:
<XMarkNewsletterForm
title="Weekly digest"
variant="compact"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | String | 'Subscribe to our newsletter' | Form heading |
description | String | '' | Supporting text |
button | Object | { label: 'Subscribe' } | Button config { label, color? } |
variant | String | 'default' | Layout: 'default', 'inline', 'card', 'compact' |
hasPrivacy | Boolean | true | Show privacy note below the form |
Events
| Event | Payload | Description |
|---|---|---|
submit | email: string | Fired on form submission with the entered email |
<XMarkSectionNewsletter />
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-reset after submission.
<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' |
patternOpacity | Number | 0.05 | Pattern opacity (0–1) |
resetDelay | Number | 5000 | Ms before resetting to the form after success (0 to disable) |
Events
| Event | Payload | Description |
|---|---|---|
submit | email: string | Fired on form submission |
AI Context
category: Newsletter
package: "@xenterprises/nuxt-x-marketing"
components:
- XMarkNewsletterForm
- XMarkSectionNewsletter
use-when: >
Capturing email addresses anywhere on the site. Use XMarkNewsletterForm
inside existing containers (sidebar, footer, modals). Use
XMarkSectionNewsletter as a standalone section between page sections.
typical-page-section: >
XMarkNewsletterForm: blog sidebar, footer, CTA areas.
XMarkSectionNewsletter: between content sections or just above the footer.