マーケティング
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' | CTA ボタンのテキスト。 |
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.