Landing Page Newsletter Section
- Updated on
This component displays a newsletter subscription form. On smaller screens, the input field may adjust accordingly to ensure usability.
Never miss an update!
Subscribe to our newsletter to get the latest announcements, news and exclusive offers.
already joined
Usage
import { LandingNewsletterSection } from '@/components/landing/newsletter/LandingNewsletterSection';
<LandingNewsletterSection
title="Never miss an update!"
description="Subscribe to our newsletter to get the latest announcements, news and exclusive offers."
>
</LandingNewsletterSection>
Examples
Text position
Never miss an update!
Subscribe to our newsletter to get the latest announcements, news and exclusive offers.
With avatar images
Showing user images is a great way to add social proof to your newsletter section and increase conversions.
Never miss an update!
Subscribe to our newsletter to get the latest announcements, news and exclusive offers.
With background
Never miss an update!
Subscribe to our newsletter to get the latest announcements, news and exclusive offers.
With background glow
Never miss an update!
Subscribe to our newsletter to get the latest announcements, news and exclusive offers.
API Reference
Prop NameProp TypeRequiredDefault childrenReact.ReactNode ǀ string No- innerClassName string No- title string ǀ React.ReactNode No- titleComponent React.ReactNode No- description string ǀ React.ReactNode No- descriptionComponent React.ReactNode No- buttonLabel string No 'Subscribe' placeholderLabel string No 'Enter your email' inputLabel string No 'Email address' textPosition 'center' ǀ 'left' No 'left' minHeight number No 350 withBackground boolean No false withBackgroundGlow boolean No false withAvatars boolean No true variant 'primary' ǀ 'secondary' No 'primary' backgroundGlowVariant 'primary' ǀ 'secondary' No 'primary' disabled boolean No false onSubmit (e: React.FormEvent<HTMLFormElement>) => void No () => {}More Examples
For more even more examples, see our Landing Page Component Examples page or see complete landing page examples by Exploring Our Landing Page Templates.
To see how to configure the newsletter component, see our Configuring the Newsletter Component guide.