Landing Page Newsletter Section
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/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 Name | Prop Type | Required | Default |
|---|---|---|---|
| children | React.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' |
| 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.