मार्केटिंग
Inline Newsletter Form
One row, one field, one button - the smallest honest email capture.
#newsletter#inline#email
6 फ्रेमवर्कशुरुआती
Loading…
The pitch on the left, the form on the right, stacked on mobile.
<!--
Copy left, form right, and both are one <section> tied to one heading. On
mobile they stack in source order - pitch first, then the ask, which is the
order a reader needs them in anyway.
-->
<section class="nl-split" aria-labelledby="nl-split-title">
<div class="nl-split__copy">
<p class="nl-split__kicker">Weekly</p>
<h2 class="nl-split__title" id="nl-split-title">The five-minute engineering digest</h2>
<p class="nl-split__text">
What broke, what shipped, and what we learned - from teams running the
same stack as you.
</p>
</div>
<form class="nl-split__form" action="/api/subscribe" method="post">
<label class="nl-split__label" for="nl-split-email">Email address</label>
<input
class="nl-split__input"
id="nl-split-email"
name="email"
type="email"
autocomplete="email"
placeholder="you@company.com"
required
/>
<button class="nl-split__submit" type="submit">Subscribe</button>
<p class="nl-split__note">14,000 engineers already read it.</p>
</form>
</section>| Prop | टाइप | डिफ़ॉल्ट | विवरण |
|---|---|---|---|
titleआवश्यक | string | - | कार्ड की हेडिंग टेक्स्ट। |
kicker | string | - | टाइटल के ऊपर दिखने वाला छोटा लेबल। |
copy | string | - | टाइटल के नीचे दिखने वाला मुख्य टेक्स्ट। |
ctaLabel | string | 'Subscribe' | कॉल-टू-एक्शन बटन का टेक्स्ट। |
className | string | - | रूट एलिमेंट पर मर्ज होने वाली अतिरिक्त क्लासेज़। |
Copy and form are one `<section>` tied to one heading, and they stack in source order on mobile - pitch, then ask, which is the order a reader needs them in anyway. The `md:grid-cols-[1.2fr_1fr]` split gives the copy the wider column on purpose: the form is three controls and does not grow, while the sentence that has to earn the subscription does. Swap the social-proof line for a real number or delete it - a made-up count is worse than none.