Newsletter Card
A bordered card with a heading, a pitch, the form, and the privacy note underneath.
6 個のフレームワーク初級
One row, one field, one button - the smallest honest email capture.
<!--
The smallest honest email capture: one row, one field, one button.
"Smallest" does not mean the label is negotiable. It is hidden with a
clip-rect, which keeps it in the accessibility tree - an input whose only
description is a placeholder announces as "edit text, blank" the moment the
user starts typing.
-->
<form class="nl-inline" action="/api/subscribe" method="post">
<label class="nl-inline__label" for="nl-inline-email">Email address</label>
<input
class="nl-inline__input"
id="nl-inline-email"
name="email"
type="email"
autocomplete="email"
placeholder="you@company.com"
required
/>
<button class="nl-inline__submit" type="submit">Subscribe</button>
</form>| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
ctaLabel | string | 'Subscribe' | CTA ボタンのテキスト。 |
label | string | 'Email address' | ボタンのアクセシブルな名前。アイコンのみのボタンでは必須です。 |
loading | boolean | false | true の間はスピナーを表示し、入力をブロックします。 |
className | string | - | ルート要素にマージされる追加クラス。 |
Smallest does not mean the label is negotiable. It is hidden with `sr-only` - a clip-rect, not `display:none`, which would take it out of the accessibility tree along with the pixels - because an input described only by a placeholder announces as "edit text, blank" the moment the user types. The row goes vertical below `sm`: a 90px email input is not a form. Drop this under a blog post or into a sidebar; when it needs a heading and a privacy note, reach for `newsletter-card` instead of bolting them onto this one.